使⽤k8s部署前端vue项⽬和后端springboot项⽬关于ingress的
访问路径设置
1.前端vue项⽬
项⽬根⽬录下有Dockerfile⽂件，.l⽂件和f⽂件
Dockerfile⽂件作⽤：根据基础nginx镜像前端vue项⽬⽣成的⽂件打包进去
FROM nginx:stable-alpine
MAINTAINER 1103324414@qq
f /etc/f
ADD /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
.
worker_processes  auto;
error_log  /var/log/nginx/error.log error;
pid    /var/run/nginx.pid;
events {
use epoll;
worker_connections  65535;
multi_accept off;
}
http {
include      /etc/pes;
default_type  application/octet-stream;
log_format log_json '{"@timestamp": "$time_local", '
'"remote_addr": "$remote_addr", '
'"referer": "$http_referer", '
'"request": "$request", '
'"status": $status, '
'"bytes": $body_bytes_sent, '
'"agent": "$http_user_agent", '
'"upstream_addr": "$upstream_addr",'
'"upstream_status": "$upstream_status",'
'"up_resp_time": "$upstream_response_time",'
'"request_time": "$request_time"'
' }';
access_log  /var/log/nginx/access.log  log_json;
server_tokens off;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout  65;
gzip on;
gzip_min_length 1k;
gzip_buffers  4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_proxied any;
gzip_disable "MSIE [1-6].";
# include /etc/nginx/conf.d/*.conf;
server {
listen      80;
location /jdd-parking-cloud-admin/ {
proxy_pass        gateway:8094/;
#proxy_set_header  X-Forwarded-Proto $scheme;
#proxy_set_header  Host              $http_host;
#proxy_set_header  X-Real-IP        $remote_addr;
nginx部署前端项目
}
#解决Router(mode: 'history')模式下，刷新路由地址不能到页⾯的问题
location / {
root  /usr/share/nginx/html/;
index  index.html index.htm;
if (!-e \$request_filename) {
rewrite ^(.*)\$ /index.html?s=\$1 last;
break;
}
}
access_log  /var/log/nginx/default_access.log log_json;
}
}
前端项⽬分析
分析docker项⽬镜像
把编译vue项⽬后⽣成的dist⽂件夹重命名为mgr，把mgr⽂件夹放到nginx的html⽬录下，且nginx的根⽬录是到html，并不是到html下的mgr。
这样放置的结果是访问的时候，直接访问/，出现的是nginx的默认index.html⽂件内容，访问/mgr的时候则是vue项⽬的内容。
同理放置其他vue项⽬到html⽬录下，访问的时候只需要加上⽂件名就⾏了，就不⽤再调整f内容了。
部署到k8s上的分析
若想使⽤域名访问项⽬，设置俩ingress就可以了，⼀个是指向web的，也就是前端vue项⽬的service，另⼀个是ingress是指向后端服务的(或者是指向⽹关)
访问流程⼤致如下，这个跟之前的流程不太⼀样
域名-> ingress -> service -> pod。
之前的流程如下：
vue项⽬中配置的是域名，直接请求的后端服务地址，⽐如：
然后f配置⽂件中写上后端服务的路径
这样⼀来，⽐如登录页⾯的验证码，就不是浏览器直接清理后端服务，⽽是浏览器再次请求nginx服务，然后再转发给后端服务来使⽤。部署到k8s中，留意到vue项⽬中使⽤的f⽂件内容，就只有/，没有到后端服务的路径了。
现在访问流程变成如下：
浏览器访问，请求到ingress，ingress在路径中到对应的service然后进⾏转发给对应的pod，vue中有请求后端的服务，则会再次请求ingress，然后到配置的后端服务service。这样就不应再在f中配置转发到后端的路径了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。