在云引擎上部署 React 单页应用

很多前端应用为了提供更好的交互体验，都会选择使用「单页面应用（Single-page Application）」的方式来构建，React 则是其中非常有竞争力的一套解决方案，这篇文章会演示如何创建一个最简单的 React 单页应用并部署到云引擎。

在开始之前你需要安装 10.0 以上版本的 Node.js 和 5.2 以上版本的 NPM。

首先我们选择了 create-react-app [1] 来创建项目，它会自动配置好 React 的构建工具链，让开发者能专注在核心功能上：

npx create-react-app react-for-engine --use-npm

create-react-app 默认会使用 Yarn，为了减少需要介绍的概念我们这里选择了 NPM（--use-npm），但云引擎同样也是支持 Yarn 的。

等待一小会，我们就可以在本地启动页面的预览了：

cd react-for-engine
npm start # 会自动打开 http://localhost:3000

就像我们前面提到的，create-react-app 提供了开箱即用的 React 工具链，现在你可以编辑 src/App.js 中的代码，甚至不需要刷新就可以在浏览器中看到页面发生了变化。

如果要把这个应用部署到云引擎的话，我们需要在线上使用 serve [2] 来运行一个生产环境的 Web server 提供 HTTP 服务：

npm install serve

为 serve 创建一个配置文件（static.json），这里我们将不存在的 URL 都重写到index.html，以便我们的单页应用可以使用自己的前端路由（如 react-router）：

{
  "public": "build",
  "rewrites": [
    { "source": "**", "destination": "/index.html" }
  ]
}

再创建一个云引擎的配置文件（leanengine.yaml），来配置构建和启动 Web server 的命令：

build: npm run build
run: $(npm bin)/serve -c static.json -l ${LEANCLOUD_APP_PORT}

这样云引擎可以在线上完成 React 的构建过程，开发者不需要将构建产物提交进 Git 仓库也不需要额外的 CI 环境。

最后修改 package.json 配置一个较新的 Node.js 版本:

@@ -2,6 +2,9 @@
   "name": "react-for-engine",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "16"
+  },
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

使用 命令行工具 [3] 部署到云引擎：

lean login   # 登录帐号
lean switch  # 选择应用
lean deploy  # 部署代码

云引擎也支持通过 GitHub Action 来自动部署，可以在 控制台 => 云引擎 => 部署 => Git 部署 => 自动部署 中查看具体配置。

如果你在使用中国节点的话，还需要 绑定一个域名[4]（国际版可以使用子域名），就可以在线上看到我们的应用了：

虽然我们部署的只是一个 Hello World，但实际上云引擎的标准版提供了生产级别的可用性，还有预备环境来进行发布前的预览。在绑定域名时云引擎还提供了 CDN 加速、自动维护 HTTPS 证书等能力，为前端单页应用的开发者解决发布上线环节的所有麻烦。

云引擎更多「最佳实践」请点击左下角「阅读原文」查看。

[1] create-react-app：https://url.leanapp.cn/SqhpIK2

[2] serve：https://github.com/vercel/serve

[3] 命令行工具：https://url.leanapp.cn/dJfgIaY

[4] 绑定一个域名：https://url.leanapp.cn/4gu9iUv

end

LeanCloud，领先的 BaaS 提供商，为移动开发提供强有力的后端支持。更多内容请关注「LeanCloud 通讯」