前后端分离项目,用nginx转发请求,部署到一个服务器上。
效果
后端接口是9999端口,前端静态资源是80端口,请求时都是www.xx.com,如果是后端接口前缀带上/apis/
比如登录 前端资源www.xx.com/login/a.jpg 后端接口是 www.xx.com/apis/login
服务上吧静态资源放在/home/xx/dist内,后端是jar包启动在9999端口 nginx将 www.xx.com/apis/login转发为localhost:9999/login
操作
- 安装nginx自行百度
- 修改nginx的配置文件 忘记了的话 搜一下 find / -name nginx.conf
- 修改配置文件 vim nginx.conf 将其中是server改为如下
- 启动nginx 注意启动时指定配置文件 nginx -c /usr/nginx.conf
注意:nginx的那个正则是过滤了apis的,比如我登录接口 localhost:9999/login.那么前端请求是www.xx.com/apis/login 如果想被过滤掉自行修改下配置文件中的rewrite那个正则
附配置nginx的配置文件
server {
listen 80;//监听80端口 即外部浏览器访问80端口才会被转发
#访问后端接口,代理访问9999端口
#以/apis开头的会访问到proxy_pass设置的
location /apis{
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://localhost:9999;
}
#前端代码 页面跳转直接访问80端口
location / {
#增加请求头
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
root /home/xx/dist;
index index.html index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
有问题联系 1294235127 欢迎指点