K8s部署Vue应用

一、前言

前面讲述了k8s部署spring boot应用，原理一样，部署vue前端应用也是一样的步骤：打包-制作docker镜像-k8s部署。

二、打包

笔者使用webstorm开发工具，打包命令：

npm run build

打包成功后，会生成文件夹dist。

三、制作镜像

首先要下载nginx基础镜像：

docker pull nginx

该条命令会下载最新版本的nginx基础镜像。

• 编写nginx.conf文件：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;


    server {
        listen       32000;
        server_name  localhost;

        location / {
            #root   html;
            #index  index.html index.htm;
        }

         root /usr/vuejs/nginx/;
         index index.html;

	location ~^/svr1[/\w*]*$ {
           proxy_pass http://192.168.10.11:31001;
        }
	location ~^/svr2[/\w*]*$ {
           proxy_pass http://192.168.10.11:31002;
	}
        location ~^/svr3[/\w*]*$ {
           proxy_pass http://192.168.10.11:31003;
        }
    }
}

说明：
svr1-svr3是三个服务名称。

• Dockerfile:

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

COPY dist/ /usr/vuejs/nginx/

• 构建docker镜像

docker build –t fontApp:v1.0  .  

四、k8s部署

• 编写 rc.yaml文件:

apiVersion: v1
kind: ReplicationController
metadata:
        name: fontApp
spec:
        replicas: 1
        selector:
                  app: fontApp
        template:
                metadata:
                        labels:
                                app: fontApp
               spec:
                       containers:
                       - name: fontApp
                         image: fontApp:v1.0
                         ports:
                                 - containerPort:  32000

• 编写 svc.yaml文件：

apiVersion: v1
kind: Service
metadata:
        name: fontApp
spec:
         type: NodePort
         ports:
         - port: 32000
           nodePort: 32000 
         selector:
                  app: fontApp

• 创建rc:

kubectl create -f rc.yaml .

查看创建结果：

kubectl  get rc

• 创建svc:

kubectl create -f svc.yaml .

查看创建结果：

kubectl  get svc

• 查看pod:

kubectl get pod -o wide