k8s部署基于vue与node.js搭建的前端全栈项目
前言
在进行下面步骤时，你已经使用Node.js和vue搭建了一个全栈项目，并且了解k8s的基本原理。 k8s学习可以参考 k8s中文文档:
k8s部署基础知识
基本原理
- 使用yaml创建Deployment
- k8s deployment资源创建流程：
-
- 用户通过 kubectl 创建 Deployment。
- (kubectl create -f nginx-deployment.yaml –record,--record参数可以记录当前版本的Deployment都执行过哪些命令。)
-
- Deployment 创建 ReplicaSet。
-
- ReplicaSet 创建 Pod。
Deployment对象，顾名思义，是用于部署应用的对象。它使Kubernetes中最常用的一个对象，它为ReplicaSet和Pod的创建提供了一种声明式的定义方法，从而无需像前两篇文章中那样手动创建ReplicaSet和Pod对象（使用Deployment而不直接创建ReplicaSet是因为Deployment对象拥有许多ReplicaSet没有的特性，例如滚动升级和回滚）。
ReplicaSet负责通过“控制器模式”，保证系统中Pod的个数永远等于指定的个数。
Deployment同样通过控制器模式，操作ReplicaSet的个数和属性，进而实现“水平扩展/收缩”和“滚动更新”两个编排动作对于“水平扩展/收缩”的实现
前端通过yaml编写前端Deployment，然后生成前端pod
然后通过yaml编写前端Deployment，然后生成ingress,
ingress相当于一个负载均衡器，是k8s对反向代理的一个抽象。大概的工作原理也确实类似于Nginx，可以理解成在 Ingress 里建立一个个映射规则 , ingress Controller 通过监听 Ingress这个api对象里的配置规则并转化成 Nginx 的配置（kubernetes声明式API和控制循环） , 然后对外部提供服务。
整体部署流程
搭建镜像前准备
- 下载安装docker
- 配置docker地址
af.*****.com.cn（为公司提供镜像地址），docker需要切换到linux环境下运行
搭建前端服务镜像及部署
搭建前端镜像
创建基本镜像
- 创建pmsc-frontend-base文件夹（文件夹名称自定）
- 在pmsc-frontend-base创建dockerfile文件（dockerfile为固定名称）
- 编辑dockerfile文件
FROM node:14.16.0-alpine
MAINTAINER 用户名 用户名@***.com.cn
SHELL ["/bin/sh", "-c"]
RUN echo '文件夹名称 image build' && \
sed -i 's/dl-cdn.alpinelinux.org/mirrors.******.com.cn/g' /etc/apk/repositories && \
apk add git && apk add nginx && \
sed -i 's/nginx;/root;/g' /etc/nginx/nginx.conf && \
mkdir -p /run/nginx && \
mkdir -p /root/repos && \
cd /root/repos/ && \
echo 'git clone repos' && \
git clone 项目git地址 && \
echo 'set npm registry' && \
npm config set registry http://af.****.com.cn/artifactory/api/npm/npm-down/ && \
echo 'npm install' && \
cd ~/repos/分支名称/ && npm i && \
echo 'clean' && \
cd ~/ && rm -rf ./repos/ && \
echo 'done!'
- echo '' 中是注释内容，可自定义
- sed -i 's/dl-cdn.alpinelinux.org/mirrors.*****.com.cn/g' /etc/apk/repositories 将repositories切换为公司的源
- apk add git && apk add nginx 安装git包和nginx包
- sed -i 's/nginx;/root;/g' /etc/nginx/nginx.conf 将nginx.conf 中nginx;替换成root;
- mkdir -p /run/nginx 创建nginx目录
- mkdir -p /root/repos 创建repos目录
- cd /root/repos/ 切换到repos目录下
- git clone 项目git地址 克隆项目
- npm config set registry http://af.*****.com.cn/artifactory/api/npm/npm-down/ 使用npm源
- cd ~/repos/分支名称/ 进入分支文件夹
- npm i 下载依赖
- rm -rf ./repos/ 删除repos文件夹
以上是基础镜像配置，作用是添加git和nginx,加入项目npm的缓存。
eg:
FROM node:14.16.0-alpine
MAINTAINER **** ****@qq.com.cn
SHELL ["/bin/sh", "-c"]
RUN echo 'docker-cusmanage-base image build' && \
sed -i 's/dl-cdn.alpinelinux.org/mirrors.*****.com.cn/g' /etc/apk/repositories && \
apk add git && apk add nginx && \
sed -i 's/nginx;/root;/g' /etc/nginx/nginx.conf && \
mkdir -p /run/nginx && \
mkdir -p /root/repos && \
cd /root/repos/ && \
echo 'git clone repos' && \
git clone http://iris.*****.com.cn/*****/docker-cusmanage.git && \
echo 'set npm registry' && \
npm config set registry http://af.****.com.cn/artifactory/api/npm/npm-down/ && \
echo 'npm install' && \
cd ~/repos/docker-cusmanage/ && npm i && \
echo 'clean' && \
cd ~/ && rm -rf ./repos/ && \
echo 'done!'
上传基本镜像
- 切换到当前dockerfile目录
cd dockerfiles
cd pmsc-frontend-base
- 编译镜像打包
docker build -t 镜像地址/pmsc-frontend-base:***-********** . --no-cache
// ***-********** 版本号时间 eg：0.0.1 pmsc-frontend-prod和组件名相关
- 镜像登录
docker login 镜像地址
// 需要公司提供登录账号和密码
- 镜像上传
docker push 镜像地址/pmsc-frontend-base:***-**********
- 查看上传镜像
docker images
创建运行镜像
- 创建pmsc-frontend-prod文件夹（文件夹名称自定）
- 在pmsc-frontend-prod文件夹创建dockerfile文件（dockerfile为固定名称）
- 编辑nginx.conf 在pmsc-frontend-prod文件夹下创建files文件夹，然后创建nginx.conf文件
nginx.conf作配置项目路由地址，使不同项目可以进不同主界面
# This is a default site configuration which will simply return 404, preventing
# chance access to any other virtualhost.
server {
listen 80 default_server;
listen [::]:80 default_server;
# Everything is a 404
location ~ 初始路由地址(?<path>/.*)? {
root /root/repos/前端打包文件所在地址;
add_header Cache-Control no-cache;
try_files $path /index.html =404;
}
# You may need this to prevent return 404 recursion.
location = /404.html {
internal;
}
}
eg:
# This is a default site configuration which will simply return 404, preventing
# chance access to any other virtualhost.
server {
listen 80 default_server;
listen [::]:80 default_server;
# Everything is a 404
location ~ /custom(?<path>/.*)? {
root /root/repos/docker-cusmanage/dist;
add_header Cache-Control no-cache;
try_files $path /index.html =404;
}
# You may need this to prevent return 404 recursion.
location = /404.html {
internal;
}
}
- 编辑dockerfile
FROM 镜像地址/创建的基础镜像名称
MAINTAINER 用户名 用户名@*****.com.cn
COPY files/nginx.conf（配置的nginx.conf所在地址） /etc/nginx/conf.d/default.conf
SHELL ["/bin/sh", "-c"]
ENV BRANCH dev // 自定义分支
RUN echo '文件夹名称 image build' && \
mkdir -p /root/repos && \
cd /root/repos/ && \
echo 'git clone repos' && \
git clone 项目所在git地址 && \
echo 'checkout branch' && \
cd ~/repos/分支名称/ && git checkout $BRANCH && \
echo 'npm install' && \
cd ~/repos/分支名称/ && npm i && \
echo 'npm build' && \
cd ~/repos/分支名称/ && npm run build && \
echo 'clean node_modules' && \
cd ~/repos/分支名称/ && rm -rf node_modules && \
echo build done!
CMD nginx -g 'daemon off;'
eg:
FROM af.****.com.cn/docker-pbg-local/custom-manage-frontend-base:0.0.2
MAINTAINER **** ****.com.cn
COPY files/nginx.conf /etc/nginx/conf.d/default.conf
SHELL ["/bin/sh", "-c"]
ENV BRANCH master
RUN echo 'docker-cusmanage-frontend image build' && \
mkdir -p /root/repos && \
cd /root/repos/ && \
echo 'git clone repos' && \
git clone http://iris.****.com.cn/*****/docker-cusmanage.git && \
echo 'checkout branch' && \
cd ~/repos/docker-cusmanage/ && git checkout $BRANCH && \
echo 'npm install' && \
cd ~/repos/docker-cusmanage/ && npm i && \
echo 'npm build' && \
cd ~/repos/docker-cusmanage/ && npm run build && \
echo 'clean node_modules' && \
cd ~/repos/docker-cusmanage/ && rm -rf node_modules && \
echo build done!
CMD nginx -g 'daemon off;'
上传运行镜像
- 切换到当前dockerfile目录
cd dockerfiles
cd pmsc-frontend-prod
- 编译镜像打包
docker build -t 镜像地址/pmsc-frontend-prod:***-********** . --no-cache
// ***-********** 版本号时间 eg：1.0.1-20210604151866 pmsc-frontend-prod和组件名相关
- 镜像登录
docker login 镜像地址
// 公司提供账号密码
- 镜像上传
docker push 镜像地址/pmsc-frontend-prod:***-**********
- 查看上传镜像
docker images
- 镜像运行（本地查看使用）
docker run -p 8088:80 -it --rm 镜像地址/pmsc-frontend-prod:***-**********
完整配置文件目录
charts后端提供，k8s部署使用，暂不做介绍
备注：如果项目增加大规模新的依赖，可以重新打基础镜像，提升运行速度
部署前端镜像
chart文件编写
基本结构目录
eg:
1、cus-fronted中，主要是前端Deployment
Chart.yaml中定义了前端pod名称
apiVersion: v2
name: custom-manage-frontend
version: 0.0.1
deployment.yaml中定义了获取镜像地址相关信息
apiVersion: apps/v1
kind: Deployment
metadata:
name: {{ .Chart.Name }} #deployment应用名
spec:
replicas: 1 #pod副本数
selector: #pod选择器定义
matchLabels:
app: {{ .Chart.Name }} #pod选择器标签
template:
metadata:
labels:
app: {{ .Chart.Name }} #pod标签定义
spec:
containers:
- name: {{ .Chart.Name }} #容器名
image: af.****.com.cn/docker-pbg-local/pmsc-frontend-prod:0.0.0 #镜像地址
imagePullPolicy: Always
ports:
- containerPort: 80
protocol: TCP
service.yaml文件中定义了前端抛出服务端口号
kind: Service
apiVersion: v1
metadata:
name: {{ .Chart.Name }} #服务名
spec:
type: NodePort
ports:
- name: {{ .Chart.Name }}
port: 80
targetPort: 80
nodePort: 31456
selector:
app: {{ .Chart.Name }}
整体创建了一个前端Deployment，生成对应的pod
2、cus-ingress，主要是ingress的Deployment
Chart.yaml中定义了ingress名称
apiVersion: v2
name: custom-manage-ingress
version: 0.0.1
ingress.yaml中定义了通过不同path访问不同pod
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
name: {{ .Chart.Name }}
spec:
tls:
- hosts:
- ismspark.*****.com
secretName: {{ .Chart.Name }}-tls
rules:
- http:
paths:
- path: /users
backend:
serviceName: nodeapp-svc // 后端提供服务
servicePort: 3000 // 后端提供服务
- path: /api
backend:
serviceName: nodeapp-svc
servicePort: 3000
- path: /custom
backend:
serviceName: cus-frontend
servicePort: 80
/webapi部分是后端定义提供，前端通过path不一样，判断是进前端界面还是后端请求
当我们的echart文件编写好后，上传到对应的服务器
前端镜像远程服务器部署基本步骤
1、安装FinalShell,FinalShell网络管理软件
2、安装好，添加对应SSH连接远程服务器（该服务器已部署k8s，具体k8s部署可参考k8s官网）
将我们的chart文件上传到远程服务器，然后将已上传的镜像名称，直接替换yaml文件下的镜像名称，然后在控制台执行一下命令，部署ingress和前端镜像 部署ingress
helm delete --purge cus-ingress // 对于非初次部署ingress ，需先删掉之前的pod
helm install --name cus-ingress /k8s/charts/cus-ingress
# 如果需要部署到对应的空间下，则运行
helm install --name cus-ingress /k8s/charts/cus-ingress --namespace node-kube-apps
备注：Helm 是 Kubernetes 包管理器，不同版本命令稍有不同，具体命令可 helm help 查看 部署前端镜像
helm delete --purge cus-frontend // 对于非初次部署镜像，需先删掉之前的pod
helm install --name cus-frontend /k8s/charts/cus-frontend
# 如果需要部署到对应的空间下，则运行
helm install --name cus-frontend /k8s/charts/cus-frontend --namespace node-kube-apps
部署好后，可输入
helm list
查看已部署pods
搭建后端node服务镜像及部署
创建dockerfile
在我们Node搭建的后端服务文件下，创建一个dockerfile，位置在app.js层
在dockerfile中编译以下内容
#node镜像版本
FROM node:8-alpine
#声明作者
MAINTAINER Hapiman
#在image中创建文件夹
RUN mkdir -p /home/Service
#将该文件夹作为工作目录
WORKDIR /home/Service
# 将node工程下所有文件拷贝到Image下的文件夹中
COPY . /home/Service
#使用RUN命令执行npm install安装工程依赖库
RUN npm install
#暴露给主机的端口号
EXPOSE 3000
#执行npm start命令，启动Node工程
CMD [ "npm", "start" ]
制作镜像
cd manage-api
docker build -t af.*****.com.cn/docker-pbg-local/custom-manage-api:20210709163055 .
# 构建镜像, 请更改为自己账号名称
docker run -p 8088:3000 af.*****.com.cn/docker-pbg-local/custom-manage-api:20210709163055
# 测试你的镜像没有问题 ，若果成果会显示
`
> gift-api@0.0.0 start /home/Service
> node ./bin/www
启动成功!
`
# 上传镜像到docker仓库，这里需要在你的docker仓库新建镜像,之后执行下面的操作; 我的地址为: af.*****.com.cn
# 如果先登录再创建,则推送会报仓库不存在
docker login af.*****.com.cn
# 登录, 输入账号和密码
docker push af.*****.com.cn/docker-pbg-local/custom-manage-api:20210709163055 # 推送镜像
部署镜像
创建namespace
在需要部署的服务器上，创建node-kube-apps.yaml,创建对应node-kube-apps的namespace
apiVersion: v1
kind: Namespace
metadata:
name: node-kube-apps
labels:
name: node-kube-apps
创建pod.Service
在需要部署的服务器上，创建nodeapp.yaml,创建对应pod.Service
nodeapp.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: nodeapp-deploy
namespace: node-kube-apps
labels:
k8s-app: nodeappk8s
spec:
dnsPolicy: Default
replicas: 1
selector:
matchLabels:
k8s-app: nodeappk8s
template:
metadata:
labels:
k8s-app: nodeappk8s
spec:
containers:
- image: af.****.com.cn/docker-pbg-local/custom-manage-api:20210709163055
imagePullPolicy: Always
name: nodeappk8s
---
apiVersion: v1
kind: Service
metadata:
name: nodeapp-svc
namespace: node-kube-apps
labels:
k8s-app: nodeappk8s
spec:
type: NodePort
ports:
- port: 3000
targetPort: 3000
nodePort: 32000
selector:
k8s-app: nodeappk8s
将image改为我们刚刚上传的镜像
image: af.*****.com.cn/docker-pbg-local/custom-manage-api:20210709163055
部署到服务器
kubectl apply -f nodeapp.yaml
# 执行成功会输出
# deployment "nodeapp-deploy" created
# service "nodeapp-svc" created
查看部署状态
kubectl get svc -n node-kube-apps // 查看svc
# nodeapp-svc NodePort 10.103.12.208 <none> 3000:32000/TCP 4d17h
kubectl get pods -n node-kube-apps // 查看pods
# nodeapp-deploy-647f97d8f6-hjgrz 1/1 Running 5 4d17h
kubectl get deployments -n node-kube-apps // 查看deployments
# nodeapp-deploy 1/1 1 1 4d17h
kubectl describe pod -n node-kube-apps nodeapp-deploy-647f97d8f6-hjgrz // 查看具体pod运行详情
kubectl logs -f -n node-kube-apps nodeapp-deploy-647f97d8f6-hjgrz // 查看日志打印
若我们的后端镜像服务部署成功，会有如下显示
当前后端都部署好，执行http://ip:30002/custom可查看服务,ip为远程服务ip,
参考资料：
