EdgeOne Makers 前端框架部署

前面 EdgeOne Makers 快速开始 部署的是静态 HTML，EdgeOne Makers 构建与环境变量 讲了构建配置。实际项目里用的更多是 Vue、React、Next.js 这些前端框架。这些框架都有各自的构建流程和输出格式，听起来挺复杂，但在 EdgeOne Makers 上部署其实很简单，因为平台做了零配置的支持。

零配置部署的原理

你可能好奇，为什么 EdgeOne Makers 能做到”零配置”。

秘密在于平台会自动检测你的项目类型。它会在项目根目录下找 package.json 文件，然后根据里面的依赖来判断用的是什么框架。

比如检测到 vue 依赖，就知道是 Vue 项目，自动帮你执行 npm install 和 npm run build，构建产物在 dist 目录下。检测到 react-scripts 或者 vite 加上 react，就知道是 React 项目，构建产物也在对应的目录下。

你不用手动配置构建命令和输出目录，平台都帮你搞定了。

部署 Vue 项目

本地项目结构

一个典型的 Vue 项目结构是这样的:

my-vue-app/
├── public/
├── src/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vite.config.js

package.json 里大概长这样:

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

部署步骤

把这个项目推送到 GitHub，然后在 EdgeOne Makers 控制台点击”新建项目”，选择”从 Git 导入”，找到你的仓库。

平台会自动检测到这是 Vue 项目，构建配置会自动填好:

配置项	自动填充的值
构建命令	npm run build
输出目录	dist
Node 版本	18.x

直接点击”部署”按钮，等一两分钟，构建完成后就能访问了。

常见问题

如果构建失败，最常见的原因是 Node 版本不对。可以在项目根目录下建一个 .nvmrc 文件，写上你本地用的 Node 版本，比如:

18

平台会读取这个文件，用对应的 Node 版本来构建。

部署 React 项目

本地项目结构

React 项目结构和 Vue 类似:

my-react-app/
├── public/
├── src/
│   ├── components/
│   ├── App.js
│   └── index.js
├── package.json
└── vite.config.js

package.json 里是这样:

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.0.0"
  }
}

部署步骤

部署流程和 Vue 一模一样，推送到 GitHub，在控制台导入项目。

平台检测到 React 依赖，自动配置构建命令。点击部署，等待完成。

使用 Create React App 的老项目

如果你用的是 Create React App，package.json 里的 build 脚本是 react-scripts build，平台也能识别。构建产物在 build 目录下，平台会自动配置好。

部署 Next.js 项目

Next.js 比较复杂，因为它既有静态导出模式，也有服务端渲染模式。EdgeOne Makers 两种都支持。

静态导出模式

如果你的 Next.js 项目用的是静态导出，也就是 next.config.js 里配置了 output: ‘export’:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

部署方式和 Vue/React 一样，平台会自动检测并构建。构建产物在 out 目录下。

静态导出的好处是部署简单，加载速度快，缺点是不支持服务端渲染和 API 路由。

服务端渲染模式

如果你的 Next.js 项目需要用到服务端渲染、API 路由、中间件这些功能，那就得用全栈部署模式。

这种情况平台也能自动识别。它会检测到 Next.js 依赖，并且知道这是全栈项目，会用特殊的方式来部署，确保服务端功能能正常运行。

具体细节在下一篇 EdgeOne Makers 后端与全栈框架 里会详细讲。

部署 Nuxt 项目

Nuxt 是 Vue 的全栈版本，和 Next.js 类似，也支持静态导出和服务端渲染。

静态导出模式

如果用的是 nuxt generate 生成静态站点，配置方式和 Vue 差不多，平台会自动检测并构建。

服务端渲染模式

如果需要服务端渲染，平台也能识别 Nuxt 项目并用对应的方式部署。

自定义构建配置

虽然平台提供了零配置部署，但有时候你可能需要自定义构建命令或输出目录。

比如你的项目结构比较特殊，构建命令不是默认的，或者输出目录不在默认位置。

这时候可以在项目设置里手动修改构建配置。

配置项	说明	示例
构建命令	执行什么命令来构建项目	npm run build
输出目录	构建产物在哪个目录	dist
安装命令	执行什么命令来安装依赖	npm install
Node 版本	用哪个 Node 版本来构建	18.x

修改配置后，点击”重新部署”，新的配置就会生效。

环境变量

有些项目在构建时需要用到环境变量，比如 API 地址、公开密钥等。

可以在项目设置的环境变量部分添加。注意区分构建时环境变量和运行时环境变量。

类型	说明	用途
构建时环境变量	在执行构建命令时注入	构建时需要用到的配置，比如 API 地址
运行时环境变量	在运行时可用	运行时需要用到的配置，比如数据库连接信息

构建时环境变量在构建时会替换到代码里，运行时环境变量在每次请求时都能读取到。

具体内容在 EdgeOne Makers 构建与环境变量 里会详细讲。

速查卡片

要点	说明
零配置原理	平台自动检测 package.json 里的依赖，识别框架类型
Vue 部署	构建命令 npm run build，输出目录 dist
React 部署	构建命令 npm run build，输出目录 dist 或 build
Next.js 静态模式	配置 output: ‘export’，输出目录 out
Next.js 全栈模式	平台自动识别，支持 SSR 和 API 路由
Nuxt 部署	支持静态导出和服务端渲染两种模式
自定义配置	可以在项目设置里修改构建命令、输出目录、Node 版本
环境变量	分构建时和运行时两种，用途不同