一、制作镜像：

1、创建nginx配置文件default.conf

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

root /usr/share/nginx/html：这个目录和下面创建的Dockerfile中目录要保持一致

2、创建Dockerfile

FROM nginx:1.20.2
 
MAINTAINER test
 
RUN rm /etc/nginx/conf.d/default.conf
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/nginx/html

• FROM nginx -- 打包容器的底层来刚才先拉取的nginx
• MAINTAINER beizhu：备注
• RUN rm /usr/local/nginx/conf/nginx.conf.default：删除目录下的nginx.conf.default 文件
• ADD nginx.conf.default /usr/local/nginx/conf/：将default.conf复制到/usr/local/nginx/conf/下，用本地的default.conf配置来替换nginx镜像里的默认配置
• COPY dist/ /usr/local/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/local/nginx/html/目录下上一步root地址

3、准备静态模板

4、打包docker镜像image并推送

docker build -f Dockerfile -t [dockerhub用户名]/vue-pro:1.0 .

docker push [dockerhub用户名]/vue-pro:1.0

如果是用的阿里云镜像，请参照阿里云镜像推送方式。 

二、K8S部署： 

1、编写 K8S yaml 文件

vi deploy-ui.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: shop-ui

---

apiVersion: apps/v1
kind: Deployment
metadata:
  name: manager-ui
  namespace: shop-ui
spec:
  replicas: 1
  selector:
    matchLabels:
      app: manager-ui
  template:
    metadata:
      labels:
        app: manager-ui
    spec:
      containers:
      - name: manager-ui
        image: 192.168.1.48/shop-ui/vue-pro:1.0
        ports:
        - name: http
          containerPort: 80
---

apiVersion: v1
kind: Service
metadata:
  name: manager-ui-service
  namespace: shop-ui
spec:
  selector:
    app: manager-ui
  ports:
    - name: http
      protocol: TCP
      port: 80
      targetPort: 80
      nodePort: 30001
  type: NodePort

2、部署服务

kubectl apply -f deploy-ui.yaml