Linux中使用nginx发布react项目

1、前言

记录一次自己使用nginx发布react的过程，其发布的难点主要是在于nginx的配置，所以这次记录是为了方便以后复用该配置。

2、发布准备

React项目测试可以正常运行，且可以build打包

Linux中安装有nginx，nodeJs

3、修改nginx配置并重启

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

	server {
        listen       3001;
        root	/data/app/data-sharing/build;
		
		location /dsp {
			proxy_pass   http://42.192.130.207:10725/dsp;
		}
    }

}

关键点配置如下：

最核心的是截图中的这一部分，其它的都是nginx的默认配置，不用和该配置文件一样，只需要添加截图中的这一块就行。截图中的配置介绍如下：

listen 表示要监听的端口号，这里要配置成react前端页面访问的端口号

root 配置react项目打包后上传在服务器中的位置

location /dsp 代表要拦截包含dsp的url请求

proxy_pass 代表拦截到对应url请求后，反向代理重新发送的地址