上一篇曾介紹過Vue在History 模式存在404刷新問題，故而需採用不同的方式部署，而最採用的當屬Nginx了，由於目前微服務的廣泛應用， Vue也將是架構師需要了解部署的一個必要內容，關於kubernetes容器化編排工具不在本文範疇，不再展示敘述。
下面就介紹Vue項目的dockerfile文件的編寫內容如下：
# STEP 1: Build
FROM node:10.16
LABEL authors="xxxxx<[email protected]>"
COPY package.json package-lock.json ./
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force
RUN npm i && mkdir /app
WORKDIR /app
COPY . .
RUN npm install && npm run build
# STEP 2: Setup
FROM nginx:1.17
# 在k8s環境下，將conf文件以configmap形式進行映射，測試docker環境下需要放開
#COPY --from=0 /app/_nginx/nginx.conf /etc/nginx/nginx.conf
#COPY --from=0 /app/_nginx/* /etc/nginx/
COPY --from=0 /app/dist /etc/nginx/html
CMD [ "nginx", "-g", "daemon off;"]
完成上述dockerfile的編寫之後就可以通過jenkins完成打包工作，本文重點講解Vue項目的部署，故而關於Jenkins也不在此展示敘述，可自行百度。
接下來我們就開始編寫Vue-ui項目的k8s腳本：
ConfigMap文件內容如下：
kind: ConfigMap
apiVersion: v1
metadata:
namespace: self-namespace
name: vue-ui-configmap-fat
data:
nginx.conf: |+
# 啓動多worker進程
worker_processes auto;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
# 設置緩存信息
proxy_temp_path /tmp/temp_dir;
proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=1g;
# 配置springboot服務集羣
upstream seeker_server {
server service-xxxxx-gateway-fat:7000 weight=3;
keepalive 32;
}
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"'
'"$upstream_cache_status"';
sendfile on;
keepalive_timeout 65;
# 啓用gzip壓縮
gzip on;
server {
listen 80;
# listen 443;
# ssl on;
# ssl_certificate /etc/nginx/ssl/server.crt;
# ssl_certificate_key /etc/nginx/ssl/server.key;
server_name localhost;
# 這是新版本的Nginx轉發
# return 301 https://$server_name$request_uri;
charset utf-8;
# 日誌輸出
# access_log /var/log/nginx/host.access.log main;
# nginx靜態文件緩存
location ~* ^.+\.(gif|jpg|jpeg|png|htm|html|css|js|flv|ico|swf|cur|gz|svg|map|mp4|ogg|ogv|webm)$ {
proxy_redirect off;
# 關閉靜態資源的訪問日誌
access_log off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache cache_one;
proxy_cache_key $host$uri$is_args$args;
proxy_cache_valid 200 302 1h;
proxy_cache_valid 301 1d;
proxy_cache_valid any 1m;
expires 7d;
add_header Nginx-Cache "$upstream_cache_status";
}
# vuejs靜態文件配置
location / {
root /etc/nginx/html;
try_files $uri $uri/ @router;
index index.html index.htm;
}
# 對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
# 因此需要rewrite到index.html中，然後交給路由在處理請求資源
location @router {
rewrite ^.*$ /index.html last;
}
# 反向代理springboot接口服務
location /xxxxx/api/ {
# 解決springboot中獲取遠程ip的問題
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://seeker_server/gateway/xxxx/api/;
proxy_http_version 1.1;
proxy_set_header Connection "";
}
error_page 404 /404.html;
# redirect server error pages to the static page /500.html
#
error_page 500 502 503 504 /500.html;
location = /50x.html {
root /etc/nginx/html;
}
}
}
完成了上述的ConfigMap文件之後，我們就需要開始編寫前端項目部署的Deployment腳本文件了，具體腳本如下：
---
apiVersion: v1
kind: Service
metadata:
name: service-vue-ui-fat
namespace: self-namespace
labels:
name: service-vue-ui-fat
spec:
type: NodePort
ports:
- port: 80
targetPort: 80
protocol: TCP
nodePort: 300xx
selector:
app: pod-vue-ui-fat
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: deployment-vue-ui-fat
namespace: self-namespace
labels:
app: deployment-vue-ui-fat
spec:
selector:
matchLabels:
app: pod-vue-ui-fat
replicas: 1
template:
metadata:
labels:
app: pod-vue-ui-fat
spec:
terminationGracePeriodSeconds: 10
containers:
- name: container-vue-ui-fat
image: registry.cn-shanghai.aliyuncs.com/xxxxx-containers/vue-ui:latest
ports:
- containerPort: 80
resources:
requests:
cpu: 0.1
memory: 1024Mi
limits:
cpu: 0.5
memory: 2048Mi
volumeMounts:
- name: volume-vue-ui-fat
mountPath: /etc/nginx/nginx.conf
subPath: nginx.conf
volumes:
- name: volume-vue-ui-fat
configMap:
name: vue-ui-configmap-fat
items:
- key: nginx.conf
path: nginx.conf
affinity:
podAntiAffinity:
preferredDuringSchedulingIgnoredDuringExecution:
- weight: 100
podAffinityTerm:
labelSelector:
matchExpressions:
- key: app
operator: In
values:
- pod-seeker-ui-fat
topologyKey: kubernetes.io/hostname
imagePullSecrets:
- name: aliyun-registry
其中知識點較多，均屬於Kubernetes的知識點，本文不詳細展示敘述。其中volumeMounts與volumes即實現了上述ConfigMap的數據卷掛載映射關係，這樣就達到了將nginx.conf配置文件與vue項目部署區分開來，不需要因爲變動服務地址而重新打包的煩惱，實現動態加載nginx的配置，以減少不必要的操作。
volumeMounts:
- name: volume-vue-ui-fat
mountPath: /etc/nginx/nginx.conf
subPath: nginx.conf
volumes:
- name: volume-vue-ui-fat
configMap:
name: vue-ui-configmap-fat
items:
- key: nginx.conf
path: nginx.conf
到此關於Vue項目基於History 模式下的部署已全部介紹完畢。