nginx 代理转发,让生产和测试环境React、Vue项目轻松访问API,前端路由不再404
2017-03-29 00:00
771 查看
我有一些需求,需要搭建一个静态服务,路由在前端,前端请求API,需要到代理到API服务器,图片资源需要代理到图片资源服务器。这里持续更新修正
upstream server-api{ # api 代理服务地址 server 127.0.0.1:3110; } upstream server-resource{ # 静态资源 代理服务地址 server 127.0.0.1:3120; } server { listen 3111; server_name localhost; # 这里指定域名 root /home/www/server-statics; # 匹配 api 路由的反向代理到API服务 location ^~/api/ { rewrite ^/(.*)$ /$1 break; proxy_pass http://server-api; } # 假设这里验证码也在API服务中 location ^~/captcha { rewrite ^/(.*)$ /$1 break; proxy_pass http://server-api; } # 假设你的图片资源全部在另外一个服务上面 location ^~/img/ { rewrite ^/(.*)$ /$1 break; proxy_pass http://server-resource; } # 路由在前端,后端没有真实路由,在路由不存在的 404状态的页面返回 /index.html # 这个方式使用场景,你在写React或者Vue项目的时候,没有真实路由 location / { try_files $uri $uri/ /index.html =404; } }
相关文章推荐
- vue项目总结之配置本地,测试,生产环境api
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack单页路由项目,打包后访问正常刷新出现404问题
- Nginx配置ReactJs项目,Url后面直接输入路由路径时老报404问题。
- react,vue等部署单页面项目时,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- Nginx配置React项目Url后直接输入路由路径时报404问题的解决
- 使用vue-cli+axios构建的项目本地环境API代理设置和解决跨域
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue项目打包部署_nginx代理访问方法详解
- nginx 代理java项目访问共享链接404
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- Docker集群实验环境布署--swarm【6 配置上层Nginx代理,让任意Docker client访问得到高可用的管理API】
- Gradle项目之Spring.profile.开发.测试.生产环境的配置和切换之一键部署
- 通过maven管理项目的生产、开发和测试环境的配置文件
- nginx反向代理服务,因配置文件错误导致访问资源时出现404
- vue项目配置生产环境和发布环境的接口地址
- 互联网项目发布环境:测试、回归、预发布、灰度发布、生产环境的见解