静态 React 应用

示例应用

你可以查看 sample apps directory，里面有一个可直接部署的 React 应用示例。虽然示例本身很不错，但如果你的服务器内存（RAM）不够、且 package.json 依赖过多，那么构建过程可能会因为内存耗尽而在服务器上崩溃。在这种情况下，你可以按下方步骤在本地机器（例如笔记本电脑）完成构建，然后把构建产物部署到服务器。

在本地机器构建

下面是一个简短的分步指南，讲解如何将 create-react-app 以静态站点形式部署。 不同于常规的 caprover deploy（它会把源码部署到 NodeJS 容器，然后在服务器上构建，并启动一个小型 node 服务来提供静态资源），本指南展示的是：在本地完成构建，然后把静态产物部署到一个简单的静态服务器容器中。

这种方式最大的优势是：构建发生在你的本地机器上，你本地通常已经有 node_modules，而且算力很可能比服务器更强。你上传的也只是压缩后的静态文件，而不是整个代码仓库。因此部署会更快、对服务器的计算资源消耗也更小。

虽然本指南以 create-react-app 为例，但同样的技巧也适用于任何静态项目（VueJS、Parcel、Angular 等）。

构建应用

首先要做的是以生产模式构建你的应用。

npm run build

创建 captain-definition

然后在项目根目录创建一个 captain-definition：

{
  "schemaVersion": 2,
  "dockerfileLines": [
    "FROM socialengine/nginx-spa:latest", 
    "COPY ./build /app", 
    "RUN chmod -R 777 /app"
  ]
}

这个 captain-definition 使用了 socialengine/nginx-spa，它是一个简单的静态 nginx 服务器，支持 pushState（将所有请求都路由到 /index.html，因此你可以使用前端路由）。

注意：如果你的构建输出目录不是 build，需要把 COPY ./build /app 改成 COPY ./[my-output-folder] /app。

创建 tar 文件

接下来需要创建一个 tar 文件。通常你不必手动做这一步，因为 caprover deploy 会基于你的 git 仓库自动创建一个。但这里我们不希望把整个仓库内容打进 tar，只需要包含静态文件和 captain-definition 文件即可。

tar -cvf ./deploy.tar --exclude='*.map' ./captain-definition ./build/*

注意：如果你的构建输出目录不是 build，需要把 ./build/* 替换为 ./[my-output-folder]/*。

注意：我们排除了 .map 文件，因为它们通常很大，会让上传耗时更长。如果你希望在生产环境包含 .map 文件，只需移除 --exclude='*.map'。

提示：把 deploy.tar 加入你的 .gitignore，避免不小心把它推到仓库里 😉

使用 caprover 部署

现在我们只需要使用 caprover CLI，并通过 -t 参数指定我们自己制作的 tar 文件，而不是使用从 git 仓库生成的那个包。

caprover deploy -t ./deploy.tar

然后像平常一样回答提示问题，等待上传完成即可 🎉