K8S实战 之 前端部署

发表于 更新于 分类于 阅读次数：

本文基于K8S实战 之 私有镜像仓库和K8S实战 之 数据库部署和K8S实战 之 后端部署

目录

项目

1
2
3
4
5
6
7
8
9
10
11
cnpm i -g @vue/cli

vue -V
# @vue/cli 4.5.12

vue create repo-vue
# Default ([Vue 2] babel, eslint)

cd repo-vue

npm run serve

镜像

1
vim Dockerfile
1
2
3
FROM nginx:alpine

COPY dist/ /usr/share/nginx/html/
1
2
3
4
5
6
7
8
9
npm run build

docker build -t repo-vue:0.1 .

docker images
# REPOSITORY       TAG       IMAGE ID       CREATED          SIZE
# repo-vue         0.1       fa06a73c9d38   40 seconds ago   23.5MB

docker run --name=v1 -p 7000:80 -d repo-vue:0.1

数据

1
cnpm i --save axios
1
vim src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";

export default {
    name: "App",
    components: {
        HelloWorld,
    },
    mounted() {
        axios.get("http://repo-spring.com:32640/db");
    },
};
</script>
1
2
3
4
5
6
7
8
9
10
npm run build

docker build -t repo-vue:0.2 .

docker images
# REPOSITORY           TAG       IMAGE ID       CREATED          SIZE
# repo-vue             0.2       fd26cd775d15   5 seconds ago    23.7MB
# repo-vue             0.1       fa06a73c9d38   40 seconds ago   23.5MB

docker run --name=v2 -p 7001:80 -d repo-vue:0.2

仓库

1
2
3
4
5
6
7
docker tag fa06a73c9d38 registry.cn-hangzhou.aliyuncs.com/ali-pub/repo-vue:0.1

docker push registry.cn-hangzhou.aliyuncs.com/ali-pub/repo-vue:0.1

docker tag fd26cd775d15 registry.cn-hangzhou.aliyuncs.com/ali-pub/repo-vue:0.2

docker push registry.cn-hangzhou.aliyuncs.com/ali-pub/repo-vue:0.2

配置

  • 修改repo-spring的k8s.yml以允许跨域
1
vim k8s.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 省略了未修改的代码
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: repo-spring
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/enable-cors: 'true'
    nginx.ingress.kubernetes.io/cors-allow-origin: '*'
spec:
  rules:
    - host: repo-spring.com
      http:
        paths:
          - backend:
              serviceName: repo-spring
              servicePort: 9000
1
kubectl apply -f k8s.yml

部署

1
vim k8s.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
apiVersion: apps/v1
kind: Deployment
metadata:
  name: repo-vue
spec:
  selector:
    matchLabels:
      app: repo-vue
  replicas: 3
  template:
    metadata:
      labels:
        app: repo-vue
    spec:
      containers:
      - name: repo-vue
        image: registry.cn-hangzhou.aliyuncs.com/ali-pub/repo-vue:0.2
        imagePullPolicy: "Always"
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: repo-vue
spec:
  selector:
    app: repo-vue
  ports:
    - protocol: TCP
      port: 7000
      targetPort: 80
  type: NodePort
1
2
3
kubectl apply -f k8s.yml

kubectl get pods,svc
1
2
3
4
5
6
7
NAME                            READY   STATUS    RESTARTS   AGE
pod/repo-vue-66779d494b-dcs4k   1/1     Running   0          85s
pod/repo-vue-66779d494b-lbcxk   1/1     Running   0          85s
pod/repo-vue-66779d494b-xm4hb   1/1     Running   0          85s

NAME                 TYPE        CLUSTER-IP     EXTERNAL-IP   PORT(S)          AGE
service/repo-vue     NodePort    10.102.90.10   <none>        7000:30326/TCP   16s

  • 修改/etc/hosts添加”172.10.66.201 repo-spring.com”

  • 浏览器访问http://172.10.66.201:30326 => 打开浏览器调试”Network”查看请求如下

docker-repository-frontend-01.png

清理

1
2
3
kubectl delete -f k8s.yml

docker rm -f v1 v2

参考