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进行访问

成功访问,说明发布成功

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/53837.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

No111.精选前端面试题,享受每天的挑战和学习

文章目录 map和foreach的区别在组件中如何获取vuex的action对象中的属性怎么去获取封装在vuex的某个接口数据有没有抓包过&#xff1f;你如何跟踪某一个特定的请求&#xff1f;比如一个特定的URL&#xff0c;你如何把有关这部分的url数据提取出来&#xff1f;1. 使用网络抓包工…

C++ - 模板分离编译

模板分离编译 我们先来看一个问题&#xff0c;我们用 stack 容器的声明定义分离的例子来引出这个问题&#xff1a; // stack.h // stack.h #pragma once #include<deque>namespace My_stack {template<class T, class Container std::deque<T>>class stack…

2023年08月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2023年08月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…

【容器】docker基础使用

文章目录 一、docker常见命令二、注意事项Reference 一、docker常见命令 docker是一个容器化平台。 Docker介绍&#xff1a;&#xff08;官网&#xff1a;https://www.docker.com/get-started&#xff09; Docker 是一个开源的应用容器引擎&#xff0c;你可以把它当作一个轻量…

Java判断文件的系统格式编码格式

使用Java判断一个文件的系统格式&#xff08;亲测可用&#xff09;&#xff0c;比如我们常见的Windows格式的文件&#xff0c;Unixg格式的文件&#xff0c;Mac格式的文件&#xff1b;常常有这样的场景&#xff1a;我们在Windows系统编写的脚步上传到Linux系统执行&#xff0c;执…

caj文件怎么转换成pdf?了解一下这种方法

caj文件怎么转换成pdf&#xff1f;如果你曾经遇到过需要将CAJ文件转换成PDF格式的情况&#xff0c;那么你一定知道这是一件麻烦的事情。幸运的是&#xff0c;现在有许多软件和工具可以帮助你完成这项任务。下面就给大家介绍一款使用工具。 【迅捷PDF转换器】是一款功能强大的工…

外包业务成功的秘诀:自我修养的艺术

了解外包业务 外包&#xff0c;亦称外包服务&#xff0c;是一种经济活动形式。它是指企业将非核心业务交由专门的外部供应商完成&#xff0c;从而集中精力发展自身的核心业务。 外包的利弊 外包业务的利处在于&#xff0c;企业可以更好地专注于核心业务&#xff0c;缩减内部成…

【C#学习笔记】数组和索引器

文章目录 数组单维数组多维数组交错数组 索引器类上的索引器方法1方法2 接口中的索引器 数组 数组具有以下属性&#xff1a; 数组可以是一维、多维或交错的。创建数组实例时&#xff0c;将建立纬度数量和每个纬度的长度。 这些值在实例的生存期内无法更改。数值数组元素的默认…

中介者模式(Mediator)

中介者模式是一种行为设计模式&#xff0c;可以减少对象之间混乱无序的依赖关系。该模式会限制对象之间的直接交互&#xff0c;迫使它们通过一个封装了对象间交互行为的中介者对象来进行合作&#xff0c;从而使对象间耦合松散&#xff0c;并可独立地改变它们之间的交互。中介者…

【项目 线程4】3.12生产者消费者模型 3.13条件变量 3.14信号量 C++实现生产者消费者模型

3.12生产者消费者模型 生产者消费者模型中的对象&#xff1a; 1、生产者 2、消费者 3、容器 若容器已满&#xff0c;生产者阻塞在这&#xff0c;通知消费者去消费&#xff1b;若容器已空&#xff0c;则消费者阻塞&#xff0c;通知生产者去生产。生产者可以有多个&#xff0c;消…

深入学习 Redis - 谈谈你对 Redis 的 RDB、AOF、混合持久化的了解吧?

目录 一、Redis 是怎么存储数据的&#xff1f; 二、Redis 具体是按照什么样的策略来实现持久化的&#xff1f; 2.1、RDB&#xff08;Redis Database&#xff09; 2.1.1、触发机制 2.1.2、bgsave 命令处理流程 2.1.3、RDB 文件的处理 2.1.4、演示效果 1&#xff09;手动执…

OSPF在MGRE上的实验

实验题目如下&#xff1a; 实验拓扑如下&#xff1a; 实验要求如下&#xff1a; 【1】R6为ISP只能配置ip地址&#xff0c;R1-5的环回为私有网段 【2】R1/4/5为全连的MGRE结构&#xff0c;R1/2/3为星型的拓扑结构&#xff0c;R1为中心站点 【3】所有私有网段可以互相通讯&…