devops-发布vue前端项目

news2024/10/2 16:27:36

回到目录

将使用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 any


    environment {
    		//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 block
                    sh '''
                       npm install --registry=https://registry.npmmirror.com
                       npm run build
                    '''
                }
            }
        }
        

         stage("构建镜像"){
            steps {
            		//docker制作镜像
            		//将maven打包的jar移动到docker目录下
            		//使用dockerfile进行构建镜像,镜像名称为 项目名:标签
                sh """
                    echo $PWD
                    docker 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.yaml
                    ssh root@10.19.99.200 sed -i'' "s#DOCKERHUB_NAMESPACE#${env.HARBOR_REPO}#" ${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yaml
                    ssh root@10.19.99.200 sed -i'' "s#APP_NAME#${env.GIT_NAME}#" ${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yaml
                    ssh root@10.19.99.200 sed -i'' "s#BUILD_NUMBER#${env.TAG_NAME}#" /${env.K8S_FILE_PATH}/${env.GITLAB_DEPLOYMENT_FILE}/deployment.yaml
                    ssh 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 build

FROM 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-conf
  namespace: fitment
  labels:
    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-ui
    component: fitment-devops
    tier: front
  name: fitmet-ui
  namespace: fitment
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  selector:
    matchLabels:
      app: fitmet-ui
      component: fitment-devops
      tier: front
  strategy:
    rollingUpdate:
      maxSurge: 100%
      maxUnavailable: 100%
    type: RollingUpdate
  template:
    metadata:
      labels:
        app: fitmet-ui
        component: fitment-devops
        tier: front
    spec:
      imagePullSecrets:
        - name: harbor-secret
      containers:
        - name: fitmet-ui
          image: REGISTRY/DOCKERHUB_NAMESPACE/APP_NAME:BUILD_NUMBER
          imagePullPolicy: Always
          ports:
            - containerPort: 80
              protocol: TCP
          livenessProbe:
            httpGet:
              path: /
              port: 80
            initialDelaySeconds: 30
            timeoutSeconds: 5
            failureThreshold: 5
            periodSeconds: 10
          readinessProbe:
            httpGet:
              path: /
              port: 80
            initialDelaySeconds: 20
            timeoutSeconds: 5
            failureThreshold: 3
            periodSeconds: 10
          resources:
            limits:
              cpu: 300m
              memory: 600Mi
            requests:
              cpu: 100m
              memory: 100Mi
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
          volumeMounts:
            - name: nginx-conf
              mountPath: /etc/nginx/conf.d/
      volumes:
        - name: nginx-conf
          configMap:
            name: fitment-conf
            items:
            - key: nginx.conf
              path: nginx.conf   
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      terminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: fitmet-ui
    component: fitment-devops
  name: fitmet-ui
  namespace: fitment
spec:
  ports:
    - name: http
      port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: fitmet-ui
    component: fitment-devops
    tier: front
  sessionAffinity: None
  type: NodePort
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: fitment-ui-ingress
  namespace: fitment
  annotations:
    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 # 代理到哪个 service
            port:
              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          23m

NAME                TYPE       CLUSTER-IP      EXTERNAL-IP   PORT(S)        AGE
service/fitmet-ui   NodePort   10.106.206.48   <none>        80:30800/TCP   37m

NAME                        READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/fitmet-ui   1/1     1            1           37m

NAME                                  DESIRED   CURRENT   READY   AGE
replicaset.apps/fitmet-ui-76c68f444   1         1         1       37m

访问

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

成功访问,说明发布成功

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

唐刘:TiDB 研发工程实践及 TiDB 人才观丨CCF 中国数据库暑期学校

在刚刚结束的 CCF 中国数据库暑期学校上&#xff0c; PingCAP 的研发副总裁唐刘分享了在 TiDB 研发过程中的工程实践经验和人才培养方法。目前&#xff0c;TiDB 已广泛应用于各行各业&#xff0c;有着庞大的用户基数&#xff0c;面临多样化的数据处理需求。PingCAP 通过开源、敏…

Datax 数据同步-使用总结(一)

1&#xff0c;实时同步&#xff1f; datax 通常做离线数据同步使用。 目前能想到的方案 利用 linux 的定时任务时间戳的方式做增量同步。 2&#xff0c;同步速度快不快&#xff1f; 单表同步速度还是挺快的 但是如果遇到复杂的 sql 查询&#xff0c;其同步效率&#xff0c…

企业数字化转型:信息化还是数字化?

面对巨大的数字经济市场&#xff0c;全球大部分企业都开始了数字化转型进程&#xff0c;国内一半以上的企业已经将数字化转型视为下一步发展重点&#xff0c;并制定了清晰的数字化转型战略规划。 但是&#xff0c;相当一部分传统行业&#xff0c;如制造、金融、能源、化工等非数…

使用ngrok实现内网穿透

前言&#xff1a;因为公司对接的某个项目要搭建一个测试环境&#xff0c;所以使用内网穿透的方式来搭建。非常方便&#xff0c;而且还节省资源&#xff0c;最重要的是免费啊这个工具。 ngrok官网&#xff1a;https://ngrok.com/ 点击下载&#xff0c;很快就能下好。 下好之…

Postman(接口测试工具)

目录 一.基本介绍 1.Postman 是什么 2.Postman 快速入门 2.1快速入门需求说明 二.Postman 完成 Controller 层测试 需要的代码&#xff1a; Java类 request.jsp success.jsp 1. 完成请求 2. 完成请求 3. 完成请求 4. 完成请求 5. 完成请求 三.发送join 一.基本介…

【Ubuntu】Ubuntu 22.04 升级 OpenSSH 9.3p2 修复CVE-2023-38408

升级原因 近日Openssh暴露出一个安全漏洞CVE-2023-38408&#xff0c;以下是相关资讯&#xff1a; 一、漏洞详情 OpenSSH是一个用于安全远程登录和文件传输的开源软件套件。它提供了一系列的客户端和服务器程序&#xff0c;包括 ssh、scp、sftp等&#xff0c;用于在网络上进行…

机器学习深度学习——卷积神经网络(LeNet)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——池化层 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 卷积神…

微信朋友圈会自动点赞?

网友称微信存在bug&#xff0c;朋友圈会自动点赞&#xff1f;腾讯回应了 微信作为国内最大的网络社交平台&#xff0c;目前用户已超过11亿。 令人吃惊的是&#xff0c;拥有这么庞大用户数量的平台&#xff0c;竟然有可能存在Bug。 近日&#xff0c;#微信回应看朋友圈会自动点…

Linux性能分析工具介绍(二)--内存、进程、磁盘、IO分析

目录 一、引言 二、Linux性能分析工具介绍 ------>2.1、进程 ------>2.2、内存 ------>2.3、磁盘 ------>2.4、IO 一、引言 本章从内存、IO、进程的角度,分析linux系统的性能 二、Linux性能分析工具介绍 2.1、进程 2.1.1、top top命令可以动态查看进程…

【pandas百炼成钢】数据预览与预处理

知识目录 前言一、数据查看1 - 查看数据维度2 - 随机查看5条数据3 - 查看数据前后5行4 - 查看数据基本信息5 - 查看数据统计信息&#xff5c;数值6 - 查看数据统计信息&#xff5c;非数值7 - 查看数据统计信息&#xff5c;整体 二、缺失值处理8 - 计算缺失值&#xff5c;总计9 …

【ASP.NET MVC】使用动软(三)(11)

一、问题 上文中提到&#xff0c;动软提供了数据库的基本操作功能&#xff0c;但是往往需要添加新的功能来解决实际问题&#xff0c;比如GetModel&#xff0c;通过id去查对象&#xff1a; 这个功能就需要进行改进&#xff1a;往往程序中获取的是实体的其他属性&#xff0c;比如…

浪潮服务器硬盘指示灯显示黄色的服务器数据恢复案例

服务器数据恢复环境&#xff1a; 宁夏某市某单位的一台浪潮服务器&#xff0c;该服务器中有一组由6块SAS硬盘组建的RAID5阵列。 服务器上存放的是Oracle数据库文件&#xff0c;操作系统层面划分了1个卷。 服务器故障&初检&#xff1a; 服务器在运行过程中有两块磁盘的指示灯…

需要仔细了解公文类型和目的,以便选择合适的写作风格

撰写公文前需要仔细了解公文类型和目的&#xff0c;以便选择合适的写作风格。 不同类型的公文有不同的结构、内容和表达方式&#xff0c;需要根据具体类型和目的来选择合适的写作风格和表达方式。例如&#xff0c;通知、公告等公文需要采用简洁明了、规范严谨的表达方式&#x…

一篇文章教你学会:对Java集合进行并集,交集,差集运算

废话不多&#xff0c;直接上代码&#xff1a; 目录 1&#xff1a;新建一个实体类 2&#xff1a;准备好数据 3&#xff1a;使用stream 流求 3.1 并集 3.2 交集 3.3 差集 3.31&#xff08;第一种&#xff09; 3.32&#xff08;第二种&#xff09; 4&#xff1a;使用Gool…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(28)-Fiddler如何抓取Android7.0以上的Https包-下篇

1.简介 虽然依旧能抓到大部分Android APP的HTTP/HTTPS包&#xff0c;但是别高兴的太早&#xff0c;有的APP为了防抓包&#xff0c;还做了很多操作&#xff1a; ① 二次加密 有的APP&#xff0c;在涉及到关键数据通信时&#xff0c;会将正文二次加密后才通过HTTPS发送&#xff…

RFID资产管理系统的选择

RFID资产管理是一种有效的资产过程控制方法&#xff0c;可以帮助企业实现高效的资产管理。选择RFID技术&#xff0c;可以高度集成各种资产信息&#xff0c;完成实时跟踪管理。   根据RFID资产管理系统&#xff0c;可以做到资产的实时管理&#xff0c;使企业管理者可以实时了解…

Android优化篇|网络预连接

作者&#xff1a;苍耳叔叔 一个示例 前后分别去请求同一个域名下的接口&#xff0c;通过 Charles 抓包&#xff0c;可以看到 Timing 下面的时间&#xff1a; 第二次请求时&#xff0c;DNS、Connect 和 TLS Handshake 部分都是 -&#xff0c;说明没有这部分的耗时&#xff0c;…

C# 控制台彩色深度打印 工具类

文章目录 前言Nuget 环境安装代码使用打印结果 总结 前言 有时候我们想要靠打印获得程序信息&#xff0c;因为Dubeg模式需要一点一点断点进入进出&#xff0c;但是我们觉得断点运行实在是太慢了&#xff0c;还是直接打印后找结果会好一点。 Nuget 环境安装 想自己写的话可以看…

unity tolua热更新框架教程(1)

git GitHub - topameng/tolua: The fastest unity lua binding solution 拉取到本地 使用unity打开&#xff0c;此处使用环境 打开前几个弹窗(管线和api升级)都点确定 修改项目设置 切换到安卓平台尝试打包编译 设置包名 查看报错 打开 屏蔽接口导出 重新生成 编译通过 …

FineReport常用功能

不分页显示数据 参见&#xff1a;https://help.fanruan.com/finereport/doc-view-328.html?source4 列数多时&#xff0c;所有列不能在一页显示&#xff0c;可在URL后增加如下参数&#xff0c;添加模版时&#xff0c;可以作为模版参数进行设置&#xff1a; 分页预览模式&am…