在本章中,让我们学习如何进行 React 应用程序的生产、构建和部署。
建筑
一旦 React 应用程序开发完成,就需要将应用程序打包并部署到生产服务器。在本章中,让我们学习可用于构建和部署应用程序的命令。
单个命令就足以创建应用程序的生产版本。
npm run build
> expense-manager@0.1.0 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
> expense-manager@0.1.0 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 文件夹下使用。
默认情况下,分析选项处于禁用状态,可以通过 -profile 命令行选项启用。-profile 将在代码中包含分析信息。分析信息可以与 React DevTools 一起使用来分析应用程序。
npm run build -- --profile
部署
一旦构建了应用程序,就可以将其部署到任何 Web 服务器。在本章中,让我们学习如何部署 React 应用程序。
本地部署
可以使用 serve package 完成本地部署。让我们首先使用以下命令安装 serve 包 -
npm install -g server
要使用 serve 启动应用程序,请使用以下命令 -
cd /go/to/app/root/folder
serve -s build
serve -s build
默认情况下,serve 使用端口 5000 为应用程序提供服务。该应用程序可以查看@http://localhost:5000。
生产部署
通过将 build/static 文件夹下的文件复制到生产应用程序的根目录,可以轻松完成生产部署。它将在所有 Web 服务器中运行,包括 Apache、IIS、Nginx 等。
相对路径
默认情况下,创建生产版本时,假定应用程序将托管在 Web 应用程序的根文件夹中。如果应用程序需要托管在子文件夹中,则在package.json中使用以下配置,然后构建应用程序。
{ ... "homepage": "http://domainname.com/path/to/subfolder", ... }