#第三方平台

目前 Modern.js 官方支持了以下平台（🚫表示不支持，❔表示未经验证）

#Netlify

Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现代 Web 项目而设计。在 Netlify 上部署，通常需要配置 netlify.toml 文件，你可以根据项目复杂度，渐进地配置该文件。

#纯前端项目

在当前项目的根目录添加 netlify.toml 文件：

./
├── src
├── modern.config.ts
├── netlify.toml
└── package.json

在 netlify.toml 中添加以下内容：

[build]
  publish = "dist"
  command = "modern deploy"

在 Netlify 平台上添加项目，部署即可。

#全栈项目

全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目，这些项目需要部署在 Netlify Functions 上。你需要基于上述的 netlify.toml 文件，添加以下配置：

[build]
  publish = "dist"
  command = "modern deploy"

[functions]
  directory = ".netlify/functions"
  node_bundler = "none"
  included_files = [".netlify/functions/**"]

#Monorepo 项目

对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例，在 Netlify 上对 Monorepo 项目进行部署。

假设 Monorepo 仓库目录结构如下：

.
├── packages
│   ├── app
│   └── app-dep1
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

你需要在 Netlify 平台上配置 Base directory 为 packages/app:

在 packages/app/package.json 中添加以下 script，在执行 app 仓库的部署命令之前，先执行 workspace 中其他仓库的构建：

{
  "scripts": {
    "build:packages": "pnpm --filter 'app^...' run build",
    "deploy": "pnpm run build:packages && modern deploy"
  }
}

在 netlify.toml 配置构建命令：

[build]
  publish = "dist"
  command = "npm run deploy"

[functions]
  directory = ".netlify/functions"
  node_bundler = "none"
  included_files = [".netlify/functions/**"]

提交你的代码，使用 Netlify 平台部署即可。

#Vercel

Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的功能，支持部署静态网站，服务端渲染应用等。在 Vercel 上部署，通常需要配置 vercel.json 文件，你可以根据项目复杂度，渐进地配置该文件。

#纯前端项目

在当前项目的根目录添加 vercel.json 文件：

./
├── src
├── modern.config.ts
├── vercel.json
└── package.json

在 vercel.json 中添加以下内容：

{
  "buildCommand": "modern deploy",
  "outputDirectory": ".vercel/output"
}

提交你的项目到 git，在 Vercel 平台上选择 Frmeworkwork Preset 为 Other，部署即可。

#全栈项目

全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目，这些项目需要部署在 Vercel Functions 上。

全栈项目除了按照纯前端项目的方式配置 vercel.json 外，需要注意：

1. 函数运行的 node.js 版本由项目在 Vercel 平台配置决定。

#Monorepo 项目

对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例，在 Vercel 上对 Monorepo 项目进行部署。

假设 Monorepo 仓库目录结构如下：

.
├── packages
│   ├── app
│   └── app-dep1
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

首先，你需要在 Vercel 平台上配置 Root Directory 为 packages/app:

将 Node.js 运行时设置为 20.x：

"engines": {
  "node": "20.x"
},

在 packages/app/package.json 中添加以下 script，在执行 app 仓库的部署命令之前，先执行 workspace 中其他仓库的构建：

{
  "scripts": {
    "build:packages": "pnpm --filter 'app^...' run build",
    "deploy": "pnpm run build:packages && modern deploy"
  }
}

在 packages/app/vercel.json 文件中添加以下内容：

{
  "buildCommand": "npm run deploy",
  "outputDirectory": ".vercel/output"
}

提交你的代码，使用 Vercel 平台部署即可。

#腾讯云 EdgeOne

在腾讯云 EdgeOne 上部署，通常需要配置 edgeone.json 文件。

#纯前端项目

在当前项目的根目录添加 edgeone.json 文件：

./
├── src
├── modern.config.ts
├── edgeone.json
└── package.json

在 edgeone.json 中添加以下内容：

{
  "nodeVersion": "22.11.0",
  "buildCommand": "MODERNJS_DEPLOY=edgeone modern deploy",
  "outputDirectory": ".eo-output"
}

提交你的项目到 git，在 EdgeOne 平台上选择仓库，配置保持默认，部署即可。

#全栈项目

全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目。

全栈项目请按照纯前端项目的方式配置 edgeone.json。需要注意：目前 Modern.js 还不支持在 EdgeOne Edge Functions 进行部署，我们将在后续的版本中支持。

在 BFF 和 Data Loader 中，均可以使用类似于获取 Cloudflare Workers Bindings 的方式获取腾讯云 EdgeOne 的 EventContext。

#阿里云 ESA

在阿里云 ESA 上部署，通常需要配置 esa.jsonc 文件，你可以根据项目复杂度，渐进地配置该文件。

#纯前端项目

在当前项目的根目录添加 esa.jsonc 文件：

./
├── src
├── modern.config.ts
├── esa.jsonc
└── package.json

在 esa.jsonc 中添加以下内容：

{
  "buildCommand": "MODERNJS_DEPLOY=aliEsa modern deploy",
  "assets": {
    "directory": "./.ali-esa/dist"
  }
}

提交你的项目到 git，在阿里云 ESA 平台上选择仓库，配置保持默认，部署即可。

#全栈项目

全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目。

全栈项目除了按照纯前端项目的方式配置 esa.jsonc 外，需要额外添加 entry 字段：

{
  "entry": "./.ali-esa/functions/index.js"
  /* 其他配置 */
}

#Cloudflare Workers

在 Cloudflare Workers 上部署，通常需要配置 wrangler.jsonc 文件，你可以根据项目复杂度，渐进地配置该文件。

#纯前端项目

在当前项目的根目录添加 wrangler.jsonc 文件：

./
├── src
├── modern.config.ts
├── wrangler.jsonc
└── package.json

在 wrangler.jsonc 中添加以下内容：

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "compatibility_date": "2025-10-08",
  "assets": {
    "directory": "./.cf-workers/assets",
    "binding": "ASSETS"
  },
  "build": {
    "command": "MODERNJS_DEPLOY=cfWorkers modern deploy"
  }
}

如果你使用本地 Wrangler CLI 进行部署，还需要配置 name 字段，在其中填写你的 Cloudflare Workers 项目名称。

提交你的项目到 git，在 Cloudflare Workers 平台上选择仓库，配置保持默认，部署即可。

#全栈项目

全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目。

全栈项目除了按照纯前端项目的方式配置 wrangler.jsonc 外，需要额外添加以下内容：

{
  "compatibility_flags": ["nodejs_compat"],
  "main": "./.cf-workers/functions/index.js",
  /* 其他配置 */
}

在 BFF 中，可以使用 useHonoContext 获取 bindings；在 Data Loader 中，可以使用 context 获取 bindings。详细方式请参见各自文档。

#GitHub Pages

如果你要为一个仓库创建 GitHub 页面，并且你没有自定义域名，则该页面的 URL 将会是以下格式：http://<username>.github.io/<repository-name>，所以需要在 modern.config.ts 中添加 以下配置：

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  //...
  server: {
    baseUrl: '/<repository-name>',
  },
  output: {
    assetPrefix: '/<repository-name>',
  },
});

GitHub Pages 支持两种部署方式，通过分支部署或通过 GitHub Actions 部署，如果通过分支部署，可以使用以下步骤：

1. 在 github 仓库中，选择 Settings > Pages > Source > Deploy from a branch。
2. 安装 gh-pages 依赖作为开发依赖。
3. 在 package.json 的 scripts 中添加 "deploy:gh-pages": "MODERNJS_DEPLOY=ghPages modern deploy && gh-pages -d .output"。
4. 执行 npm run deploy:gh-pages。

如果通过 GitHub Actions 部署，可以选择 Settings > Pages > Source > GitHub Actions，并在项目中添加 workflow 文件，可参考示例。