react 项目打包部署nginx

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

1. 打包 React 项目

生成生产环境文件

在 React 项目的根目录运行以下命令：

bash 复制代码

npm run build

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

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

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

使用 scp 命令上传

bash 复制代码

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

3. 配置 Nginx

3.1 安装 Nginx

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

Ubuntu/Debian：

bash 复制代码

sudo apt update
sudo apt install nginx

CentOS：

bash 复制代码

sudo yum install nginx

3.2 配置 Nginx 站点

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

bash 复制代码

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

配置内容示例：

bash 复制代码

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 路由处理
}

启用站点配置

bash 复制代码

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

测试 Nginx 配置

bash 复制代码

sudo nginx -t

重启 Nginx

bash 复制代码

sudo systemctl restart nginx

4. 配置防火墙

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

允许 HTTP 流量：

bash 复制代码

sudo ufw allow 80

检查防火墙状态：

bash 复制代码

sudo ufw status

5. 验证部署

在浏览器中访问：

bash 复制代码

http://your-domain.com

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

6. 配置 HTTPS（可选）

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

使用 Let's Encrypt 配置免费 HTTPS

安装 Certbot：

bash 复制代码

sudo apt install certbot python3-certbot-nginx

生成并配置 HTTPS 证书：

bash 复制代码

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

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

7. 单页面应用路由处理

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

bash 复制代码

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

确保此配置生效。

完整流程总结

打包项目：

bash 复制代码

npm run build

上传文件：

bash 复制代码

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

配置 Nginx：

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

重启 Nginx：

bash 复制代码

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）有权限访问目标目录和文件。

更改权限

bash 复制代码

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

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

bash 复制代码

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

重新加载 Nginx 配置

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

bash 复制代码

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

完整nginx配置示例

bash 复制代码

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;
}