react 部署在ngnix上（windows环境）

目录

1.下载nginx。

2.测试nginx

3.配置react项目

4.nginx常用命令

---

1.下载nginx。

2.测试nginx

解压后，可以在cmd命令行输入：start nginx，开启服务，并在浏览器输入localhost，如果成功打开，则说明该nginx可以使用了。

出现该效果说明运行成功 

3.配置react项目

我的项目打包后目录结构：

现在我们开始配置react项目

打开nginx.conf文件

在http里面添加一个server对象

server {
        listen       8088;
        server_name  localhost;

		root E:/items/react/rec-webp4/dist;
        index index.html;

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

        location @router {
        rewrite ^.*$ /index.html last;
        }

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

    }

listen  ：设置的端口号

server_name  ：访问的名字

root   ：你项目所放的地址

index index.html  ：你的入口html文件

因为是单页应用，所以，是根据路由跳转，所以，为了避免出现404，我们需要重写至index.html

     #根据路由设置，避免出现404
        location / {

             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }

设置代理：

nginx可以设置反向代理，解决跨域问题，我们可以这样设置：

# 匹配 api 路由的反向代理到API服务
location /api/ {
     proxy_pass http://192.168.xxx.xxx:xxxx/;
}

这样，就会由：

http://localhost:10003/api/user/getuser...

转发至：

http://192.168.xxx.xxx:xxxx/user/getuser...

好了，现在，你就可以重启服务查看效果，（因为之前使用了start nginx ，所以这里可以直接reload重启）

nginx -s reload

4.nginx常用命令

nginx开启命令：start nginx

nginx停止命令：nginx -s quit

nginx重启命令：nginx -s reload

完~