项目的时候遇到了前后端分离上线的问题,前端使用的vue框架,后台是用springboot框架。后台的上线是在Tomcat上部署的,是由同学完成的。
Vue项目
用vue-cli搭建项目框架,其中用到vue-router路由跳转,因为地址不是真实存在的,而是由vue-router创建出来的虚拟路径,所以跳转地址后,无法查找到,需要单独在nginx配置文件里单独配置路由部分。
nginx的配置文件
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:8080/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_hide_header Server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 10;
proxy_send_timeout 10;
proxy_read_timeout 10;
proxy_intercept_errors on;
proxy_buffering off;
}
location /api/ {
proxy_pass http://XXXX:8081/api/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_hide_header Server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 10;
proxy_send_timeout 10;
proxy_read_timeout 10;
proxy_intercept_errors on;
proxy_buffering off;
}
location /a/ {
proxy_pass http://XXXX:8081/a/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_hide_header Server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 10;
proxy_send_timeout 10;
proxy_read_timeout 10;
proxy_intercept_errors on;
proxy_buffering off;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
# location /js/ {
# root html;
# fastcgi_pass 127.0.0.1:7004;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
进阶: localhost:8080是vue的服务。那么拦截的是api跟a 拦截之后请求到http://XXXX:8081/api/这个地址去。
有的人会说 vue自己内部也可以直接请求到后台接口。这个其实就是一步可以做好跟两步做好是一样的。我个人比较倾向nginx做反代理。隐藏真实IP。要是vpc可以做内网转发,还有到了nginx可以做很多网关安全之类的处理还有负载均衡之类。中小型项目都可以满足了。