使用k8s部署vue.js,vue前后端需要分离，以及遇到部署过程中遇到的问题

      最近忙完手头上的事情，在热化的晚上来谈谈在kubernetes上部署前段项目或者说在本地部署前段项目。

      先聊聊vue,目前作为前段三大框架之一，正好公司采用vue，也是粗略去学习和了解vue。vue官方文档地址：https://cn.vuejs.org/。vue是一套构建用户界面的渐进式框架，只用关注视图层，采用自低向上的开发设计，目标是通过尽可能简单的api实现响应的数据绑定和组合的视图组件。

      在说说架构选型，前段采用vue.js和NGINX的部署方式，后端springcloud。前端代码中路由到理机上部后端的api风格需要保持一致，比如说apis,这个在前端项目中的.env文件中增加restful api风格的根路径，这样方便在后期nginx部署中跳转后端地址配置更加简洁。

1.前段项目打包，输出文件为dist

2.部署NGINX,nginx官方地址为：http://nginx.org/en/

3.同时将dist目录的文件拷贝到/usr/share/nginx/html目录下

4.在/etc/nginx/下新建一个目录vhost.d,修改nginx.conf中的配置将vhost.d包括进去，然后在vhost.d目录下创建xx.conf添加如下配置

  upstream portalServer {
        server 192.168.1.1:8080;
    }
    
    server {
        listen       80
        server_name  localhost;
        
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
        
        接口
        location /apis/ {
            proxy_pass http://portalServer/;
            proxy_set_header Host $host:$server_port;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

5.重启nginx

systemctl reload nginx.service

就此vue前段项目部署完毕，访问http://localhost:80

 

   说一下在k8s上部署vue前段，需要注意的是我们会用到两层nginx，一层作为前段访问的入口，一个是挂在k8s服务内部的nginx，前段到后端的入口。如下是dockerfile的编写：

# 设置基础镜像 
FROM nginx:1.15
# 定义作者
MAINTAINER xxx 
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist  /usr/share/nginx/html/

 

需要编写deployment的yaml文件

在这里说明一下，这里前端会用到kubernetes的service,暴露该服务，配置在第一层nginx。大家还有好的部署方案可以一起探讨