前端项目在部署方面有什么特点
- 不需要在服务器上承担过多压力，用户打开页面，把静态资源加载到浏览器之后，常规的业务操作本身与前端服务器无关；
- 要考虑用户打开页面加载静态文件时占用的网络带宽，一个内容较多的js或css文件可能会导致服务器卡顿
- 项目启动时，自带一个Nginx，在容器实例内对前端资源进行代理和转发。
部署前提
- 已有可用的K8S集群资源，给集群节点打上所属的标签
- 创建从镜像中心拉取镜像的密钥
内置Nginx
- 监听的端口在创建Pod的yaml文件中指定；
- 对图片、js和css文件开始压缩；
- 动态资源和静态资源分别放在不同目录。
server {
listen ${SERVER_PORT};
charset utf-8;
client_max_body_size 75M;
keepalive_timeout 65;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
location / {
root /opt/auth;
index index.html index.htm;
}
location /auth-web {
alias /opt/auth;
}
location /auth-web/static {
alias /opt/auth/static;
}
}
部署服务实例
部署前端项目的配置比后端服务少一些，除了命名空间、pod类型和实例名称之外，完成部署工作最重要的几项配置如下。
- 指定部署实例数量 spec.replicas，本例中是 1；
- 把实例部署到特定标签的节点上 spec.template.spec.affinity.nodeAffinity;
- 指定内置Nginx监听的端口 spec.template.spec.containers.env里的SERVER_PORT；
- 指定容器端口spec.template.spec.containers.env.ports.containerPort；
- 指定实例运行时的最小和最大资源量 spec.template.spec.containers.env.resources；
- 配置从镜像中心拉取镜像的密钥 spec.template.spec.imagePullSecrets；
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
app: auth-web
name: auth-web
namespace: mojiay-prod
spec:
replicas: 1
selector:
matchLabels:
app: auth-web
strategy: { }
template:
metadata:
labels:
app: auth-web
spec:
volumes:
- name: date-config
hostPath:
path: /etc/localtime
type: ''
containers:
- env:
- name: SERVER_PORT
value: '8098'
image: <IMAGE_VERSION>
name: auth-web
ports:
- containerPort: 8098
resources:
limits:
cpu: 3500m
memory: 3500Mi
requests:
cpu: '3'
memory: 3000Mi
volumeMounts:
- name: date-config
readOnly: true
mountPath: /etc/localtime
imagePullSecrets:
- name: huaweiyun-secret
restartPolicy: Always
affinity:
nodeAffinity:
requiredDuringSchedulingIgnoredDuringExecution:
nodeSelectorTerms:
- matchExpressions:
- key: app
operator: In
values:
- "frontend"
为服务添加集群访问配置
为防止出现故障，前端项目也建议部署2个或以上的实例，为了能发挥好集群负载，强烈建议创建集群访问（ClusterIP）的Service。
本例中，容器端口和服务端口都是 8098。
apiVersion: v1
kind: Service
metadata:
labels:
app: auth-web
name: auth-web
namespace: mojiayi-prod
spec:
ports:
- name: "8098"
port: 8098
targetPort: 8098
selector:
mas-app: auth-web
status:
loadBalancer: { }
编写Dockerfile
- 指定Nginx版本；
- 指定容器实例的运行时区；
- 启用项目源码中编写的Nginx配置文件。
FROM nginx:1.14.1
ENV LANG=en_US.UTF-8
ENV TZ=Asia/Shanghai
COPY ./dist /opt/auth
COPY config/web_nginx.template /opt/config/web_nginx.template
RUN touch /etc/nginx/conf.d/web_nginx.conf
CMD ["/bin/bash", "-c", "export DOLLAR=$ && envsubst </opt/config/web_nginx.template > /etc/nginx/conf.d/web_nginx.conf && nginx -g 'daemon off;'"]
