ReactJS - 构建与部署

本章将学习如何进行 React 应用的生产构建和部署。

构建

完成 React 应用开发后，需要将应用捆绑并部署到生产服务器。本章将学习构建和部署应用的命令。

只需一个命令即可创建应用的生产版本。

npm run build
> [email protected] build path\to\expense-manager
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

File sizes after gzip:

   41.69 KB   build\static\js\2.a164da11.chunk.js
    2.24 KB   build\static\js\main.de70a883.chunk.js
    1.4  KB   build\static\js\3.d8a9fc85.chunk.js
    1.17 KB   build\static\js\runtime-main.560bee6e.js
  493     B   build\static\css\main.e75e7bbe.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

   npm install -g serve
   serve -s build

Find out more about deployment here:

   https://cra.link/deployment

构建应用后，应用位于 build/static 文件夹下。

默认情况下，profiling 选项处于禁用状态，可以通过 -profile 命令行选项启用。-profile 将在代码中包含性能分析信息。性能分析信息可以与 React DevTools 一起使用来分析应用。

npm run build -- --profile

部署

构建应用后，可以将其部署到任何 Web 服务器。本章将学习如何部署 React 应用。

本地部署

可以使用 serve 包进行本地部署。首先使用以下命令安装 serve 包：

npm install -g server

要使用 serve 启动应用，请使用以下命令：

cd /go/to/app/root/folder 
serve -s build

默认情况下，serve 使用端口 5000 提供服务。应用可以在 https://127.0.0.1:5000 查看。

生产部署

生产部署可以通过将 build/static 文件夹下的文件复制到生产应用的根目录轻松完成。它适用于所有 Web 服务器，包括 Apache、IIS、Nginx 等。

相对路径

默认情况下，生产构建是在假设应用将托管在 Web 应用的根文件夹中创建的。如果应用需要托管在子文件夹中，则在 package.json 中使用以下配置，然后构建应用。

{ ... "homepage": "http://domainname.com/path/to/subfolder", ... }