云引擎 Web 前端运行环境
云引擎同样对托管 Web 前端应用(例如一个网站)提供了支持,对于使用了 React、Vue 等框架的应用,云引擎可以在线上完成构建的过程,开发者不需要将构建产物提交进 Git 仓库也不需要额外的 CI 环境。云引擎还提供了自定义域名绑定、自动申请 SSL 证书、重定向到 HTTPS 等常用的功能,减轻前端开发者在部署和运维环节的工作量。
这篇文档是针对 Web 前端运行环境的介绍,如需了解云引擎平台提供的功能,请看 云引擎平台功能。
如果项目根目录包含一个 static.json 或 index.html,云引擎就会将其识别为 Web 前端项目,使用 Node.js 运行环境进行构建,然后自动使用 serve 来启动一个 HTTP 服务器。
快速开始
大多前端脚手架都可以通过简单地配置运行在云引擎上,推荐使用它们来创建新的项目。
- React
- Vue
- Next.js
create-react-app 提供了开箱即用的 React 工具链,会自动配置好 React 的构建工具链,让开发者能专注在核心功能上:
npx create-react-app react-for-engine --use-npm
然后切换到项目目录(上面的例子中是 react-for-engine)创建一个配置文件 static.json 将不存在的 URL 都重写到 index.html,以便我们的单页应用可以使用自己的前端路由(如 react-router):
{
"public": "build",
"rewrites": [{ "source": "**", "destination": "/index.html" }]
}
再创建一个 leanengine.yaml 来配置构建命令:
build: npm run build
可以使用官方的 Vue CLI:
npm install -g @vue/cli
vue create vue-for-engine
然后切换到项目目录(上面的例子中是 vue-for-engine)创建一个配置文件 static.json 将不存在的 URL 都重写到 index.html,以便我们的单页应用可以使用自己的前端路由(如 vue-router):
{
"public": "dist",
"rewrites": [{ "source": "**", "destination": "/index.html" }]
}
再创建一个 leanengine.yaml 来配置构建命令:
build: npm run build
可以使用官方的 create-next-app 创建项目:
npx create-next-app next-for-engine --use-npm
然后切换到项目目录(上面的例子中是 next-for-engine),创建一个 leanengine.yaml 来配置构建命令:
build: npm run build
为了能使用 Next.js 提供的 API Routes 等功能,这里实际是运行在 Node.js 运行环境(使用 npm start 启动 Next.js production server),因此下文中关于配置 serve 的部分并不适用于 Next.js。
云引擎可以在线上完成构建过程,开发者不需要将构建产物提交进 Git 仓库,也不需要额外的 CI 环境。
部署到云引擎
直接部署到生产环境:
tds deploy --prod
配置 Node.js 版本
在 package.json 的 engines.node 字段可以指定 Node.js 版本:
{
"engines": {
"node": "16.x"
}
}
你还可以设置为 * 表示总是使用最新(current)版本。
如未设置 Node.js 版本,云引擎会默认使用最新的稳定(LTS)版本。