如何使用Nginx在CentOS 7服务器部署React JS应用

一、准备服务器环境 #

• 更新系统包：sudo yum update -y
• 安装Nginx（用来托管静态文件）：sudo yum install nginx -y
• 启动并设置Nginx开机自启：
  • sudo systemctl start nginx
  • sudo systemctl enable nginx
• 开放80端口（默认访问端口）：sudo firewall-cmd --add-port=80/tcp --permanent && sudo firewall-cmd --reload

二、本地构建React项目 #

• 确保本地装了Node.js和npm，进入你的React项目根目录
• 执行构建命令生成静态资源：npm run build
• 构建完成后，项目根目录会多出一个build文件夹，里面就是要部署的所有文件

三、上传静态文件到服务器 #

• 用scp命令直接上传：scp -r ./build/ 你的服务器用户名@服务器IP:/usr/share/nginx/html/
  • 比如你的用户名是root，IP是192.168.1.100，命令就是scp -r ./build/ root@192.168.1.100:/usr/share/nginx/html/
• 嫌命令麻烦的话，用FTP工具（比如FileZilla）把build里的所有文件传到服务器的/usr/share/nginx/html/目录也行

四、配置Nginx解决路由问题 #

• 先备份默认配置：sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak
• 编辑配置文件：sudo vi /etc/nginx/nginx.conf
• 找到server块，修改成下面的内容（主要是加try_files解决React路由刷新404的问题）：

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;

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

• 检查配置是否合法：sudo nginx -t
• 重启Nginx生效：sudo systemctl restart nginx

五、测试访问与权限排查 #

• 在本地浏览器输入服务器IP，就能看到你的React应用了
• 如果出现访问报错，大概率是权限问题，执行命令修复：sudo chown -R nginx:nginx /usr/share/nginx/html/

内容的提问来源于stack exchange，提问作者Lucky