目前,Modern.js 提供了两种部署方式:
目前 Modern.js 仅支持在 Node.js 环境中运行,未来将提供更多运行时环境的支持。
执行 modern deploy
命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖,检测当前部署平台,并自动生成可以在该平台运行的产物。
如果你希望在本地生成并测试特定部署平台的产物,可以通过设置环境变量来指定平台:
在 Modern.js 官方支持的部署平台中部署时,无需指定环境变量。
默认情况下,如果未检测到 Modern.js 支持的部署平台,Modern.js 将生成可以在 Node.js 环境下运行的部署产物。
你可以使用以下命令构建项目:
当执行 modern deploy
命令时,Modern.js 将生成可执行的部署产物,并在控制台输出以下内容:
现在,你可以通过执行 node .output/index
命令来运行服务器。在 .output/static
目录中,存放了页面运行所需的静态资源,你可以选择将这些资源上传到 CDN 以提高访问速度。
默认情况下,运行 Modern.js 服务器时会监听 8080 端口,如果你想修改监听的端口,可以指定 PORT
环境变量:
对于 Monorepo 项目,除了需要构建当前的项目外,还需要构建当前项目依赖的仓库中其他子项目。
假设当前项目的 package.json
中的 name 为 app
,以 pnpm 作为 Monorepo 管理工具为例,你可以在项目 package.json
中添加以下命令用于构建:
如果你使用 rush 作为 Monorepo 管理工具,可以在 package.json
中添加以下命令:
构建完成后,框架会将项目中所有的依赖生成在 .output/node_modules
目录下。你同样可以使用 node .output/index
运行 Modern.js 服务器。
Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现代 Web 项目而设计。在 Netlify 上部署,通常需要配置 netlify.toml
文件,你可以根据项目复杂度,渐进地配置该文件。
在当前项目的根目录添加 netlify.toml
文件:
在 netlify.toml
中添加以下内容:
在 Netlify 平台上添加项目,部署即可。
全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目,这些项目需要部署在 Netlify Functions 上。你需要基于上述的 netlify.toml
文件,添加以下配置:
目前 Modern.js 还不支持在 Netlify Edge Functions 进行部署,我们将在后续的版本中支持。
以下指南主要针对于全栈项目,对于纯 CSR 的项目,只需要按照纯前端项目部署即可。
对于 Monorepo 项目,除了需要构建当前的项目外,还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例,在 Netlify 上对 Monorepo 项目进行部署。
假设 Monorepo 仓库目录结构如下:
你需要在 Netlify 平台上配置 Base directory 为 packages/app
:
在 packages/app/package.json
中添加以下 script,在执行 app
仓库的部署命令之前,先执行 workspace 中其他仓库的构建:
在 netlify.toml
配置构建命令:
提交你的代码,使用 Netlify 平台部署即可。
Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的功能,支持部署静态网站,服务端渲染应用等。在 Vercel 上部署,通常需要配置 vercel.json
文件,你可以根据项目复杂度,渐进地配置该文件。
在当前项目的根目录添加 vercel.json
文件:
在 vercel.json
中添加以下内容:
提交你的项目到 git,在 Vercel 平台上选择 Frmeworkwork Preset 为 Other
,部署即可。
全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目,这些项目需要部署在 Vercel Functions 上。
全栈项目除了按照纯前端项目的方式配置 vercel.json
外,有两点需要注意:
20.x
,部署全栈项目时建议选择 18.x
,具体原因详见Serverless Function contains invalid runtime error,你可以修改 package.json
指定版本:以下指南主要针对于全栈项目,对于纯 CSR 的项目,只需要按照纯前端项目部署即可。
对于 Monorepo 项目,除了需要构建当前的项目外,还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例,在 Vercel 上对 Monorepo 项目进行部署。
假设 Monorepo 仓库目录结构如下:
首先,你需要在 Vercel 平台上配置 Root Directory 为 packages/app
:
将 Node.js 运行时设置为 18.x
:
在 packages/app/package.json
中添加以下 script,在执行 app
仓库的部署命令之前,先执行 workspace 中其他仓库的构建:
在 packages/app/vercel.json
文件中添加以下内容:
提交你的代码,使用 Vercel 平台部署即可。