devops-发布vue前端项目

回到目录

将使用jenkins+k8s发布前端项目

1 环境准备

node环境

在部署jenkins的服务器上搭建node环境

node版本

# 1.拉取
https://nodejs.org/download/release/v20.4.0/node-v20.4.0-linux-x64.tar.gz# 2.解压到/usr/local目录下
sudo tar xf v20.4.0.tar.gz -C /usr/local
#   重命名为node20
mv v20.4.0 node20# 3.配置环境变量
vim /etc/profile
export PATH=$PATH:/usr/local/node20/bin
#   文件生效
source /etc/profile# 4.软连接
sudo ln -s /usr/local/node20/bin/npm /usr/local/bin/
sudo ln -s /usr/local/node20/bin/node /usr/local/bin/# 5.验证
node -v
npm -v

验证环境没有问题后，将文件移动到jenkins的目录下

因为是docker部署的jenkins，挂载目录是/usr/local/docker/docker-jenkins/data，所以必须将node环境移动到该目录下，jenkins才能加载到

mv node20 /usr/local/docker/docker-jenkins/data

jenkins中下载nodejs插件

插件中搜索 nodejs

安装完成后重启，再次进入

在全局工具配置中，找到nodejs

安装目录为docker中jenkins的node目录，可进入docker jinkens容器中查看

2 项目构建

前提：在gitlab中创建一个vue项目，并确保该项目在本地能正常运行

我的项目结构如下，需要添加Dockerfile和jenkinsfile以及deploy目录

 

创建完成后编写jenkinsfile

pipeline{agent anyenvironment {//gitlab访问凭证GIT_CREDENTIAL_ID = 'gitlab-root'//gitlab地址GIT_REPO_URL = '10.1.9.23:28080'//gitlab分组GIT_GROUP = 'devops'//gitlab项目名称GIT_NAME = 'fitmentfront'//harbor凭证HARBOR_ID = 'harbor-admin'//harbor地址HARBOR_URL = '39.10.18.1:8858'//harbor项目HARBOR_REPO = 'repo'//发送delpoment.yml到k8s服务器上的地址K8S_FILE_PATH = '/opt/k8s/deployfile'//gitlab发送到服务器的目录GITLAB_DEPLOYMENT_FILE = 'deploy'}parameters {//git插件 分支参数gitParameter(branchFilter: '.*',defaultValue: "${env.BRANCH_NAME ?: 'main'}",name: 'BRANCH_NAME',type: 'PT_BRANCH',description: '请选择要发布的分支')//git插件 标签参数gitParameter(branchFilter: '.*',defaultValue: "${env.TAG_NAME ?: 'v:1.0.0'}",name: 'TAG_NAME',type: 'PT_TAG',description: '请选择要发布的标签')}stages{stage("基本信息输出"){steps{echo '选定待发布信息'echo "项目地址    ${GIT_REPO_URL}"echo "项目组      ${GIT_GROUP}"echo "项目名      ${GIT_NAME}"echo "分支        ${BRANCH_NAME}"echo "TAG        ${TAG_NAME}"}}stage('拉取gitlab代码') {steps {//拉取gitlab代码，选择分支checkout scmGit(branches: [[name: env.BRANCH_NAME]],extensions: [],userRemoteConfigs: [[credentialsId: env.GIT_CREDENTIAL_ID,url: "http://${env.GIT_REPO_URL}/${env.GIT_GROUP}/${env.GIT_NAME}.git"]])echo '拉取gitlab代码  --SUCCESS'}}stage("编译"){steps{nodejs('node') {// some blocksh '''npm install --registry=https://registry.npmmirror.comnpm run build'''}}}stage("构建镜像"){steps {//docker制作镜像//将maven打包的jar移动到docker目录下//使用dockerfile进行构建镜像，镜像名称为 项目名:标签sh """echo $PWDdocker build -t ${env.GIT_NAME}:${env.TAG_NAME} ."""echo '通过docker制作镜像  --SUCCESS'}}stage('推送镜像到harbor') {steps {//使用harbor凭证推送镜像withCredentials([usernamePassword(credentialsId: env.HARBOR_ID,passwordVariable: 'DOCKER_PASSWORD',usernameVariable: 'DOCKER_USERNAME')]) {//打标签为远程仓库标签//登陆到harbor//推送镜像sh """docker tag ${env.GIT_NAME}:${env.TAG_NAME} ${env.HARBOR_URL}/${env.HARBOR_REPO}/${env.GIT_NAME}:${env.TAG_NAME}echo "\$DOCKER_PASSWORD" | docker login -u "\$DOCKER_USERNAME" -p "\$DOCKER_PASSWORD" ${env.HARBOR_URL}docker push ${env.HARBOR_URL}/${env.HARBOR_REPO}/${env.GIT_NAME}:${env.TAG_NAME}"""}echo '推送镜像到harbor  --SUCCESS'}}stage('发送k8s部署yml文件至目标服务器') {steps {//请空文件夹下所有文件内容sh """ssh root@10.199.99.200 rm -rf $K8S_FILE_PATH/*"""//使用ssh插件 发送deploy目录下的部署yml文件到目标服务器//须提前配置ssh免密登陆sshPublisher(publishers: [sshPublisherDesc(configName: 'k8s',transfers: [sshTransfer(cleanRemote: false,excludes: '',execCommand: '',execTimeout: 120000,flatten: false,makeEmptyDirs: false,noDefaultExcludes: false,patternSeparator: '[, ]+',remoteDirectory: '',remoteDirectorySDF: false,removePrefix: '',sourceFiles: "${env.GITLAB_DEPLOYMENT_FILE}/*yaml")],usePromotionTimestamp: false,useWorkspaceInPromotion: false,verbose: false)])echo '发送yml文件至目标服务器  --SUCCESS'}}stage('远程执行k8s部署yaml命令') {steps {//替换发送过来的部署文件//部署sh """ssh root@10.19.99.200 sed -i'' "s#REGISTRY#${env.HARBOR_URL}#" ${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yamlssh root@10.19.99.200 sed -i'' "s#DOCKERHUB_NAMESPACE#${env.HARBOR_REPO}#" ${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yamlssh root@10.19.99.200 sed -i'' "s#APP_NAME#${env.GIT_NAME}#" ${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yamlssh root@10.19.99.200 sed -i'' "s#BUILD_NUMBER#${env.TAG_NAME}#" /${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yamlssh root@10.19.99.200 kubectl apply -f ${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/"""echo '远程执行k8s部署yaml命令  --SUCCESS'}}}
}

 Dockerfile

FROM node:14-alpine AS build
WORKDIR /build/fitment
COPY . .
RUN npm install --registry=https://registry.npmmirror.com && npm run buildFROM nginx:1.22
WORKDIR /app/fitment
COPY --from=build /build/fitment/dist .
EXPOSE 80

deploy中的deployment.yaml

apiVersion: v1
kind: Namespace
metadata:name: fitment
---
apiVersion: v1
kind: ConfigMap
metadata:name: fitment-confnamespace: fitmentlabels:app: nginx-conf
data:nginx.conf: |server {listen  80;server_name localhost;location / {root /app/fitment;index index.html index.htm;}location /api/ {#设置请求头等，防止出现跨域问题proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://fitmentback.fitment/; #设置监控后端启动的端口}error_page 500 502 503 504 /50x.html;location = /50x.html {root    html;}}
---
apiVersion: apps/v1
kind: Deployment
metadata:labels:app: fitmet-uicomponent: fitment-devopstier: frontname: fitmet-uinamespace: fitment
spec:progressDeadlineSeconds: 600replicas: 1selector:matchLabels:app: fitmet-uicomponent: fitment-devopstier: frontstrategy:rollingUpdate:maxSurge: 100%maxUnavailable: 100%type: RollingUpdatetemplate:metadata:labels:app: fitmet-uicomponent: fitment-devopstier: frontspec:imagePullSecrets:- name: harbor-secretcontainers:- name: fitmet-uiimage: REGISTRY/DOCKERHUB_NAMESPACE/APP_NAME:BUILD_NUMBERimagePullPolicy: Alwaysports:- containerPort: 80protocol: TCPlivenessProbe:httpGet:path: /port: 80initialDelaySeconds: 30timeoutSeconds: 5failureThreshold: 5periodSeconds: 10readinessProbe:httpGet:path: /port: 80initialDelaySeconds: 20timeoutSeconds: 5failureThreshold: 3periodSeconds: 10resources:limits:cpu: 300mmemory: 600Mirequests:cpu: 100mmemory: 100MiterminationMessagePath: /dev/termination-logterminationMessagePolicy: FilevolumeMounts:- name: nginx-confmountPath: /etc/nginx/conf.d/volumes:- name: nginx-confconfigMap:name: fitment-confitems:- key: nginx.confpath: nginx.conf   dnsPolicy: ClusterFirstrestartPolicy: AlwaysterminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:labels:app: fitmet-uicomponent: fitment-devopsname: fitmet-uinamespace: fitment
spec:ports:- name: httpport: 80protocol: TCPtargetPort: 80selector:app: fitmet-uicomponent: fitment-devopstier: frontsessionAffinity: Nonetype: NodePort
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:name: fitment-ui-ingressnamespace: fitmentannotations:kubernetes.io/ingress.class: "nginx"nginx.ingress.kubernetes.io/rewrite-target: /
spec:rules:- host: fitment.fooleryang.cn # 域名配置，可以使用通配符 *http:paths: # 相当于 nginx 的 location 配置，可以配置多个- pathType: Prefix # 路径类型，按照路径类型进行匹配 ImplementationSpecific 需要指定 IngressClass，具体匹配规则以 IngressClass 中的规则为准。Exact：精确匹配，URL需要与path完全匹配上，且区分大小写的。Prefix：以 / 作为分隔符来进行前缀匹配backend:service:name: fitmet-ui # 代理到哪个 serviceport:number: 80 # service 的端口path: /

3 jenkins创建项目

在vue项目的准备工作完成后【本地运行正常，各个文件准备完成、提交到gitlab中】，创建jenkins流水线项目

执行构建，然后停止【目的：拉取源码的jenkinsfile，得到参数化构建配置】

执行第一次构建后参数化配置即会出现

再次选择tag进行构建

 构建完成后，去k8s中查看相应pod，发现处于运行状态

[root@k8s-master k8s]# kubectl get all -n fitment
NAME                            READY   STATUS    RESTARTS   AGE
pod/fitmet-ui-76c68f444-thm74   1/1     Running   0          23mNAME                TYPE       CLUSTER-IP      EXTERNAL-IP   PORT(S)        AGE
service/fitmet-ui   NodePort   10.106.206.48   <none>        80:30800/TCP   37mNAME                        READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/fitmet-ui   1/1     1            1           37mNAME                                  DESIRED   CURRENT   READY   AGE
replicaset.apps/fitmet-ui-76c68f444   1         1         1       37m

访问

可以用配置的ingress进行访问，也可以使用nodeport进行访问

成功访问，说明发布成功