使用nginx部署next+react项目到服务器

以下实例为部署到测试服务器上，相关目录地址可根据实际部署进行修改。

• nging的安装目录：/usr/local/webserver/nginx/conf/
• 项目放在/usr/ATP-Test/文件夹下
• 项目的命名为：x-atp-firmware-web
• 服务器地址：172.24.185.55

部署步骤：

1. 将整个项目代码进行压缩，将压缩文件复制到服务器上。目录为：/usr/ATP-Test/文件夹下
   • 解压文件：

    unzip x-atp-firmware-web.zip
   

2. 切换当前的目录到项目的文件夹：

    cd /usr/ATP-Test/x-atp-firmware-web/
   

3. 打包：npm run build
   • 遇到文件操作权限问题（Permission deny）：chmod 777 文件夹地址
4. 运行：npm run start
   • 在项目运行后默认接口为：3000，访问地址为：http://localhost:3000/
5. 访问的端口可在package.json中指定： "start": "next start --port 3001"
6. 修改/usr/local/webserver/nginx/conf/nginx.conf

   # 在http{}里面添加server，监听端口号为8081
   upstream testnext {
     server 127.0.0.1:3001;
   }
   server {
       listen       8081;
       server_name  test.com;
       proxy_read_timeout 165;
       client_max_body_size 200M;
        location / {
           proxy_pass http://testnext;
           proxy_set_header Host $host;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_connect_timeout 165;
           fastcgi_send_timeout 165;
           fastcgi_read_timeout 165;
           proxy_set_header X-Nginx-Proxy true;
           proxy_redirect off;
       }
       # 静态文件的地址
       location /_next/static {
           alias /usr/ATP-Test/x-atp-firmware-web/.next/static/;
       }
   }
   

7. 查看nginx运行的进程号(进程号为nginx：master的当前进程号)

    ps -ef|grep nginx
   

8. 杀掉当前运行的进程,用上一步的进程号来替代命令中的[process number]

    kill -TERM [process number]
   

9. 重启nginx

    /usr/local/webserver/nginx/sbin/nginx -c /usr/local/webserver/nginx/conf/nginx.conf
   

10. 访问地址：http://172.24.185.55:8081/
    • 访问如果被拒绝，需要将8081端口加入到安全队列：

      firewall-cmd --zone=public --query-port=8081/tcp
      

    • 重启防火墙规则：

       firewall-cmd --reload
      

相关的参考文档

• nginx的相关知识
• 部署方法的参考