react 项目打包部署nginx

在 React 项目开发完成后，可以将其打包并通过 Nginx 部署到服务器上。以下是详细步骤：

1. 打包 React 项目

生成生产环境文件
在 React 项目的根目录运行以下命令：

npm run build

这会在项目目录中生成一个 build/ 文件夹，包含优化后的静态资源文件。

2. 上传打包文件到服务器

将 build/ 文件夹上传到目标服务器的指定路径，例如 /var/www/react-app。

使用 scp 命令上传

scp -r build/ user@server_ip:/var/www/react-app

3. 配置 Nginx

3.1 安装 Nginx

如果服务器未安装 Nginx，可以先安装：

Ubuntu/Debian：

sudo apt update
sudo apt install nginx

CentOS：

sudo yum install nginx

3.2 配置 Nginx 站点

编辑 Nginx 配置文件，为 React 项目创建一个站点配置文件：

sudo nano /etc/nginx/sites-available/react-app

配置内容示例：

server {
    listen 80;
    server_name your-domain.com; # 替换为你的域名或服务器 IP

    root /var/www/react-app; # 指向 React 打包文件的路径
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html; # React 路由处理
}

启用站点配置

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

测试 Nginx 配置

sudo nginx -t

重启 Nginx

sudo systemctl restart nginx

4. 配置防火墙

确保服务器的 HTTP 端口（80）是开放的：

允许 HTTP 流量：

sudo ufw allow 80

检查防火墙状态：

sudo ufw status

5. 验证部署

在浏览器中访问：

http://your-domain.com

如果显示 React 应用，则部署成功！

6. 配置 HTTPS（可选）

为了提高安全性，建议为网站配置 HTTPS。

使用 Let’s Encrypt 配置免费 HTTPS

安装 Certbot：

sudo apt install certbot python3-certbot-nginx

生成并配置 HTTPS 证书：

sudo certbot --nginx -d your-domain.com

Certbot 会自动更新 Nginx 配置文件并启用 HTTPS。

7. 单页面应用路由处理

React 是单页面应用，所有路由（如 /about, /contact）都需要返回 index.html。Nginx 的 try_files 配置已处理此问题：

location / {
    try_files $uri /index.html;
}

确保此配置生效。

完整流程总结

打包项目：

npm run build

上传文件：

scp -r build/ user@server_ip:/var/www/react-app

配置 Nginx：

创建 /etc/nginx/sites-available/react-app，并配置站点。

重启 Nginx：

sudo systemctl restart nginx

配置防火墙和 HTTPS（可选）：

打开端口 80 和 443。
使用 Certbot 配置免费 HTTPS。
完成后，访问网站即可查看 React 应用。

注意事项

如果是单页面应用（如 React 或 Vue），需要确保 index.html 处理路由，使用 try_files 或 error_page 将所有路径重定向到 index.html。
生产环境下尽量不要将项目放置在 /root 目录中，推荐使用 /var/www 或其他非 root 用户目录。

检查目录权限

确保 Nginx 用户（通常是 www-data 或 nginx）有权限访问目标目录和文件。

更改权限

sudo chmod -R 755 /root/platform/manager
sudo chown -R www-data:www-data /root/platform/manager

检查 Nginx 日志是否仍然报错：

sudo tail -f /var/log/nginx/error.log

重新加载 Nginx 配置

如果修改了配置，保存后重新加载：

sudo nginx -t   # 检查配置是否正确
sudo systemctl reload nginx

完整nginx配置示例

server {
    listen 80;
    server_name platform.xx.com;

    root /root/platform/manager;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;
}