一、将前端项目打包成docker镜像，并推送到远程仓库
1、在本地文件夹创建三个Dockerfile、nginx.conf和front文件夹
[root@node4 testHtml]# ll total 8 -rw-r--r-- 1 root root 213 Jan 17 17:29 Dockerfile drwxr-xr-x 2 root root 24 Jan 17 17:07 front -rw-r--r-- 1 root root 803 Jan 17 17:39 nginx.conf
front文件夹中就是前端的代码：
2、nginx.conf内容：
worker_processes 1;
events {
worker_connections 1024;
}
http {
sendfile on;
tcp_nodelay on;
keepalive_timeout 30;
include /etc/nginx/mime.types;
default_type application/octet-stream;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/front/dist;
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
location / {
try_files $uri $uri/ =404;
index index.html index.htm;
gzip_static on;
expires max;
add_header Cache-Control public;
if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$) {
add_header Access-Control-Allow-Origin *;
}
}
}
}
3、Dockerfile文件内容：
FROM nginx RUN mkdir /usr/share/nginx/front RUN mkdir /usr/share/nginx/front/dist RUN rm -rf /etc/nginx/nginx.conf COPY ./nginx.conf /etc/nginx/nginx.conf COPY ./front /usr/share/nginx/front/dist EXPOSE 80
4、前端页面中就是简单的一个html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>这是测试页面</h1> </body> </html>
二、打包镜像并推送到远程仓库
1、打包镜像：
docker build -f Dockerfile -t jgqfront:latest .
2、为镜像打标签，并推送到远程仓库
# 打标签 docker tag 1a4ab0dec0ac registry.cn-hangzhou.aliyuncs.com/jgqk8s/jgqfront:latest # 登录： docker login --username=18652907029 registry.cn-hangzhou.aliyuncs.com # 推送： docker push registry.cn-hangzhou.aliyuncs.com/jgqk8s/jgqfront:latest
三、在K8s上部署并暴露服务
1、部署一个k8s Deployment（部署2个pod）：
kind: Deployment
apiVersion: apps/v1
metadata:
name: jgqfront
namespace: common
labels:
app: jgqfront
annotations:
deployment.kubernetes.io/revision: '1'
kubesphere.io/alias-name: jgqfront
kubesphere.io/creator: admin
kubesphere.io/description: jgqfront
spec:
replicas: 2
selector:
matchLabels:
app: jgqfront
template:
metadata:
creationTimestamp: null
labels:
app: jgqfront
spec:
volumes:
- name: host-time
hostPath:
path: /etc/localtime
type: ''
containers:
- name: container-oojz64
image: 'registry.cn-hangzhou.aliyuncs.com/jgqk8s/jgqfront:latest'
ports:
- name: tcp-80
containerPort: 80
protocol: TCP
resources:
limits:
cpu: '1'
memory: 1000Mi
volumeMounts:
- name: host-time
readOnly: true
mountPath: /etc/localtime
terminationMessagePath: /dev/termination-log
terminationMessagePolicy: File
imagePullPolicy: IfNotPresent
restartPolicy: Always
terminationGracePeriodSeconds: 30
dnsPolicy: ClusterFirst
serviceAccountName: default
serviceAccount: default
securityContext: {}
affinity: {}
schedulerName: default-scheduler
strategy:
type: RollingUpdate
rollingUpdate:
maxUnavailable: 25%
maxSurge: 25%
revisionHistoryLimit: 10
progressDeadlineSeconds: 600
2、再暴露一个Service服务：
kind: Service apiVersion: v1 metadata: name: jgqfront namespace: common labels: app: jgqfront annotations: kubesphere.io/alias-name: jgqfront kubesphere.io/creator: admin kubesphere.io/description: jgqfront spec: ports: - name: http-jgqfront protocol: TCP port: 80 targetPort: 80 nodePort: 31151 selector: app: jgqfront clusterIP: 10.233.2.13 clusterIPs: - 10.233.2.13 type: NodePort sessionAffinity: None externalTrafficPolicy: Cluster
3、查看服务端口：
[root@node4 testHtml]# kubectl get svc -n common |grep jgqfront jgqfront NodePort 10.233.2.13 <none> 80:31151/TCP 14m
4、测试访问：
大功告成！
