阿里云k8s发布vue项目
作为一个后端 偶尔会承担一些运维工作 此次经历了发布vue项目的过程 因网上资料混乱 做个记录
首先要编写对应的Dockerfile (花了一些时间弄清楚[为什么需要用nginx作为基础镜像 而不是node.js])
Dockerfile
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的构建命令
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
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
NODE_ENV=production
VUE_APP_PLATFORM_NAME=demo vue项目
VUE_APP_API_BASE_URL=/api
创建axios实例时配置前缀
const request = axios.create({
// API 请求的默认前缀
baseURL:process.env.VUE_APP_API_BASE_URL,
timeout: 30000 // 请求超时时间
})
接下来就是在项目根目录创建manifests文件夹 里面有3个文件
1.image仓库 密钥
imageSecret.yaml
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
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
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。