•  打包vue dist生成的目录，进入dist目录下面执行打包命令 tar -zcvf dist.tar.gz *,解压到容器的目录/usr/share/nginx/html下
• 文件目录结构如下

1. 

• Dockerfile文件配置： 

#下载最新nginx
FROM nginx
MAINTAINER zr
#vue dist包上传到容器nginx默认目录
ADD dist.tar.gz /usr/share/nginx/html
#复制本地nginx配置文件覆盖容器nginx默认配置文件
COPY nginx.conf /etc/nginx/nginx.conf
#暴漏容器端口
EXPOSE 8088
#指定容器时区
RUN rm -f /etc/localtime \
&& ln -sv /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
&& echo "Asia/Shanghai" > /etc/timezone
#启动nginx容器服务
ENTRYPOINT nginx -g "daemon off;"

• nginx k8s-vue-demo.yaml 配置文件

apiVersion: v1
kind: Service
metadata:
  name: $IMG_NAME
  namespace: realize
  labels:
    app: $IMG_NAME
spec:
  type: NodePort
  ports:
    - port: 8088
      nodePort: 30088 #service对外开放端口
  selector:
    app: $IMG_NAME
---
apiVersion: apps/v1
kind: Deployment #对象类型
metadata:
  name: $IMG_NAME #名称
  namespace: realize
  labels:
    app: $IMG_NAME #标注
spec:
  replicas: 1 #运行容器的副本数，修改这里可以快速修改分布式节点数量
  selector:
    matchLabels:
      app: $IMG_NAME
  template:
    metadata:
      labels:
        app: $IMG_NAME
    spec:
      containers: #docker容器的配置
        - name: $IMG_NAME
          image: rz-dt-image-server-registry.cn-shanghai.cr.aliyuncs.com/rz-dt/$IMG_NAME:$IMG_TAG # pull镜像的地址 ip:prot/dir/images:tag
          imagePullPolicy: Always #pull镜像时机，
          ports:
            - containerPort: 8088 #容器对外开放端口,需与springboot配置文件一致
          volumeMounts:
          - name: time-config
            mountPath: /etc/localtime
            readOnly: true
      #从私有仓库拉取镜像凭证
      imagePullSecrets:
        - name: rz-dt-miyue
      volumes:
      - name: time-config
        hostPath:
          path: /usr/share/zoneinfo/Asia/Shanghai

• 一键部署阿里云k8s脚本build.sh:

echo "开始制作镜像..."
image_tag=`date +%Y-%m-%d-%H-%M-%S` #_%H%M
echo "当前时间：$image_tag"
docker build -t k8s-vue-demo:${image_tag} .
echo "制作镜像成功!"

echo "登录"
sudo docker login --username=aliyun0398513152 rz-dt-image-server-registry.cn-shanghai.cr.aliyuncs.com --password=1234

echo "镜像最新版本提交"
docker tag k8s-vue-demo:${image_tag} rz-dt-image-server-registry.cn-shanghai.cr.aliyuncs.com/rz-dt/k8s-vue-demo:${image_tag}
docker push rz-dt-image-server-registry.cn-shanghai.cr.aliyuncs.com/rz-dt/k8s-vue-demo:${image_tag}

echo "k8s一键部署"
export IMG_TAG=${image_tag}
envsubst < k8s-vue-demo.yaml | kubectl apply -f -

• 本地nginx.conf替换容器目录下etc/nginx/nginx.conf文件配置如下：

 server {
            listen       8088; #端口号，自定义
            server_name  127.0.0.1;
                root         /usr/share/nginx/html/;
                index index.html;
        location / {
                        try_files $uri $uri/ @router;
                        index  index.html index.htm index.php;
                        add_header 'Access-Control-Allow-Origin' '*';
                        add_header 'Access-Control-Allow-Credentials' 'true';
                        add_header 'Access-Control-Allow-Methods' 'GET';

        }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
                location @router {
                        rewrite ^.*$ /index.html last;
        }
                location /prod-api/ {
                        rewrite ^/prod-api/(.*)$ /$1 break;
                        proxy_pass http://k8s-realize-master-service.realize:8080/; #访问k8s service名称.命名空间.端口
                }
    }