阿里云k8s发布vue项目

作为一个后端偶尔会承担一些运维工作此次经历了发布vue项目的过程因网上资料混乱做个记录

首先要编写对应的Dockerfile (花了一些时间弄清楚[为什么需要用nginx作为基础镜像而不是node.js])

Dockerfile

bash 复制代码

FROM nginx:1.16.0

WORKDIR /front

COPY dist /front/

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

比如后端springboot项目肯定用例如 java8作为基础镜像那vue为什么不用同理的运行环境node.js来构建

先来看node.js的构建命令

bash 复制代码

cnpm install
node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build

后来查阅资料才了解执行node build命令后前端vue项目会被构建成一个纯静态资源放在dist目录

静态资源就不需要启动命令（类似npm run serve）来运行可以直接静态访问。所以，只需要把静态访问的路径交由nginx管理即可

nginx.conf

bash 复制代码

log_format  spockportallog  '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $bytes_sent $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" "$http_x_forwarded_for" '
                   '$upstream_addr $host $sent_http_x_reqid $upstream_response_time $request_time';

server {
  listen 80; //ngnix的默认端口 通过访问安装了ngnix的服务器ip:80 可以访问nginx服务

  access_log  /var/log/nginx/access.log  main;
  error_log   /var/log/nginx/error.log;

  # Make site accessible from http://localhost/

  client_max_body_size 1024m;
  proxy_send_timeout 500s;
  proxy_read_timeout 500s;

  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }

  location / {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
    root /front/; //这里很关键 /front文件夹存放的是vue build后的静态文件(Dockerfile... COPY dist /front/) 通过这句 ngnix和vue项目关联起来 这样 访问80端口 ngnix就会把请求转发到 /front/index.html
    index index.html index.htm;
    try_files $uri $uri/ @rewrites;
  }

  //这里是配置请求后端接口的反向代理 效果例如 www.test.com/api/t01-->http://XXX.XXX.XX.XX:30960/t01
  location /api/{
      proxy_pass http://XXX.XXX.XX.XX:30960/; //后端的服务地址
      proxy_set_header Host $host;
      proxy_set_header Referer $http_referer;
    }

  
}

vue项目中要配置对应的api基础路径

.env

bash 复制代码

NODE_ENV=production
VUE_APP_PLATFORM_NAME=demo vue项目
VUE_APP_API_BASE_URL=/api

创建axios实例时配置前缀

bash 复制代码

const request = axios.create({
  // API 请求的默认前缀
  baseURL:process.env.VUE_APP_API_BASE_URL,
  timeout: 30000 // 请求超时时间
})

接下来就是在项目根目录创建manifests文件夹里面有3个文件

1.image仓库密钥

imageSecret.yaml

bash 复制代码

kind: Secret
apiVersion: v1
metadata:
  name: imageSecret
  namespace: ${namespace}
  annotations:
    kubesphere.io/creator: admin
data:
  .dockerconfigjson: >-
    XXXXXXXXXXXXXXX
type: kubernetes.io/dockerconfigjson

2.k8s deployment文件

frontend-deployment.yaml

bash 复制代码

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: front-uat
  name: front-uat
spec:
  replicas: 1
  selector:
    matchLabels:
      app: front-uat
      version: front-uat
  strategy:
    type: Recreate
  template:
    metadata:
      labels:
        app: front-uat
        version: front-uat
    spec:
      imagePullSecrets:
      - name: imageSecret
      containers:
      - image: ${image}
        name: frontend
        ports:
        - containerPort: 80
          name: nginx-port
        resources:
          limits:
            cpu: 2000m
            memory: 2000Mi
          requests:
            cpu: 500m
            memory: 1000Mi

3.nodePort service 和 ingress

frontend-service.yaml

bash 复制代码

apiVersion: v1
kind: Service
metadata:
  labels:
    app: front-uat
  name: front-uat
spec:
  type: NodePort
  ports:
  - name: "front-uat"
    port: 80
    targetPort: 80
  selector:
    app: front-uat
    version: front-uat
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: front-uat
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: ${host}.demo.com
    http:
      paths:
      - path: /
        backend:
          serviceName: front-uat
          servicePort: 80

一共在根目录添加了2个文件 1个文件夹

Dockerfile nginx.conf manifests(imageSecret.yaml frontend-deployment.yaml frontend-service.yaml)

流水线主要有2个步骤

1.镜像构建并推送到阿里云buildkit

2.kubectl发布到阿里云k8s集群

ps: Dockerfile中是可以用 node.js作为基础镜像的那就是另外一种构建方法了不使用node build命令

而是直接在Dockerfile中使用CMD npm run serve。