使用k8s部署前端vue项目和后端springboot项目关于ingress的访问路径设置

1.前端vue项目

项目根目录下有Dockerfile文件,.gitlab-ci.yml文件和nginx.conf文件

使用k8s部署前端vue项目和后端springboot项目关于ingress的访问路径设置

Dockerfile文件作用:根据基础nginx镜像前端vue项目生成的文件打包进去

FROM nginx:stable-alpine
MAINTAINER 1103324414@qq.com
COPY nginx.conf /etc/nginx/nginx.conf
ADD dist.tar.gz /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

.gitlab-ci.yml文件作用:提交代码后根据分支不同触发自动编译打包vue项目,docker镜像的工作
使用k8s部署前端vue项目和后端springboot项目关于ingress的访问路径设置

nginx.conf文件作用:前端vue项目访问后端应用的nginx路径映射配置,尤其是需要注意的,这个跟普通部署的不一样,稍后详细分析这个

user  nginx;
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/nginx/mime.types;
    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         http://gateway:8094/;
        #proxy_set_header   X-Forwarded-Proto $scheme;
        #proxy_set_header   Host              $http_host;
        #proxy_set_header   X-Real-IP         $remote_addr;
      }
      #解决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目录下,访问的时候只需要加上文件名就行了,就不用再调整nginx.conf内容了。

部署到k8s上的分析

若想使用域名访问项目,设置俩ingress就可以了,一个是指向web的,也就是前端vue项目的service,另一个是ingress是指向后端服务的(或者是指向网关)

访问流程大致如下,这个跟之前的流程不太一样

域名-> ingress -> service -> pod。

之前的流程如下:
vue项目中配置的是域名,直接请求的后端服务地址,比如:
使用k8s部署前端vue项目和后端springboot项目关于ingress的访问路径设置

然后nginx.conf配置文件中写上后端服务的路径
使用k8s部署前端vue项目和后端springboot项目关于ingress的访问路径设置

这样一来,比如登录页面的验证码,就不是浏览器直接清理后端服务,而是浏览器再次请求nginx服务,然后再转发给后端服务来使用。

部署到k8s中,留意到vue项目中使用的nginx.conf文件内容,就只有/,没有到后端服务的路径了。

现在访问流程变成如下:
浏览器访问,请求到ingress,ingress在路径中找到对应的service然后进行转发给对应的pod,vue中有请求后端的服务,则会再次请求ingress,然后找到配置的后端服务service。这样就不应再在nginx.conf中配置转发到后端的路径了。

使用k8s部署前端vue项目和后端springboot项目关于ingress的访问路径设置

上一篇:Kubernetes的三种集群外部访问方式及使用场景说明:NodePort、LoadBalancer和Ingress


下一篇:使用 java-client 连接k8s