[转]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
版权声明:本文为博主原创文章,转载请附上博文链接!

 

posted on 2019-03-20 09:30  freeliver54  阅读(137)  评论(0编辑  收藏

导航