1. 简介
使用 Nginx 部署 React 应用是一种高效、快速的服务化方式。Nginx 作为高性能的静态资源服务器，不仅能提升应用的加载速度，还能增强安全性。
本文将介绍如何将使用 create-react-app 创建的 React 应用部署到 Nginx 服务器上。我们将从构建生产环境代码开始，接着安装并配置 Nginx，最后进行性能优化与安全加固。
2. 构建 React 应用
2.1 创建 React 项目
首先，使用 create-react-app 创建一个新的 React 项目：
npx create-react-app react-deploy
该命令会生成一个名为 react-deploy 的目录，进入该目录：
cd react-deploy
此时，我们已经得到了一个可用于开发的 React 项目。
2.2 生成生产环境构建包
使用以下命令生成用于部署的生产环境构建包：
npm run build
输出示例：
> [email protected] build
> react-scripts build
...
Compiled successfully.
File sizes after gzip:
58.99 kB build/static/js/main.fb9dabe6.js
2.7 kB build/static/js/488.8960d093.chunk.js
515 B build/static/css/main.f855e6bc.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 目录，包含压缩后的 HTML、CSS、JS 文件。这些文件是优化后的静态资源，适合部署。
将构建好的文件复制到 Nginx 的默认目录中：
sudo cp -r build /var/www/html
这样 Nginx 就能通过 /var/www/html/build 提供 React 应用了。
3. 安装和配置 Nginx
3.1 安装 Nginx
更新软件包列表并安装 Nginx：
sudo apt update
sudo apt install nginx
启动 Nginx 并设置开机自启：
sudo systemctl start nginx
sudo systemctl enable nginx
3.2 调整防火墙规则
如果服务器启用了防火墙，需要开放 HTTP 和 HTTPS 端口：
sudo ufw allow 'Nginx Full'
这一步确保外部请求可以正常访问应用。
4. 配置 Nginx 提供 React 应用
4.1 创建 Nginx 配置文件
在 /etc/nginx/sites-available/ 下创建一个配置文件，例如：
sudo nano /etc/nginx/sites-available/react-app
添加以下配置内容：
server {
listen 80;
server_name example.com www.example.com;
root /var/www/html/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
access_log /var/log/nginx/react-app.access.log;
error_log /var/log/nginx/react-app.error.log;
}
说明：
server_name替换为你的域名；root指向build文件夹的路径；try_files是关键配置，用于支持 React 的前端路由（SPA）。
4.2 启用配置并重载 Nginx
创建软链接启用该配置：
sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
测试配置并重载 Nginx：
sudo nginx -t
sudo systemctl reload nginx
此时，通过浏览器访问域名或服务器 IP 即可看到 React 应用。
5. 性能优化与安全加固
5.1 启用 Gzip 压缩
编辑 nginx.conf 文件：
sudo nano /etc/nginx/nginx.conf
在 http 块中启用 Gzip 并配置类型：
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
保存后测试并重载 Nginx：
sudo nginx -t && sudo systemctl reload nginx
✅ Gzip 启用后可以显著减少传输体积，提升页面加载速度。
5.2 使用 Let’s Encrypt 配置 HTTPS
安装 Certbot 及其 Nginx 插件：
sudo apt install certbot python3-certbot-nginx -y
申请并安装证书：
sudo certbot --nginx -d example.com -d www.example.com
Certbot 会自动修改 Nginx 配置，启用 HTTPS。
验证证书自动续期：
sudo certbot renew --dry-run
最后重启 Nginx：
sudo systemctl restart nginx
✅ 启用 HTTPS 后，网站将具备加密通信能力，提升安全性。
6. 总结
我们完成了以下关键步骤：
- 使用
create-react-app构建 React 生产环境包； - 安装并配置 Nginx 提供静态资源；
- 启用 Gzip 压缩提升加载性能；
- 使用 Let’s Encrypt 配置 HTTPS 加密访问。
通过以上操作，React 应用已经成功部署在 Nginx 上，并具备良好的性能和安全性。
如果你正在部署一个 SPA 应用，上述配置是一个非常实用且通用的方案。记得定期检查证书状态和 Nginx 日志，避免潜在的运维问题。