[转]react 部署在ngnix上（windows环境）

本文转自：https://blog.csdn.net/wly_er/article/details/82348593

目录

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

完~
---------------------
作者：wly_er
来源：CSDN
原文：https://blog.csdn.net/wly_er/article/details/82348593
版权声明：本文为博主原创文章，转载请附上博文链接！