Jenkins+vue发布项目

在Jenkins 中先创建一个任务名称

然后进行下一步,放一个项目

填写一些参数

参数1:

参数2:

参数3:参数4:


点击保存就行了

配置脚本

javascript 复制代码
// git
def git_url = 'http://gitlab.xxxx.git'
def git_auth_id = 'GITEE_RIVERBIED'

// harbor
def harbor_host = '10.0.165.17:5000'
def harbor_project = 'test'
def harbor_crt_id = 'HARBOR_CRT_ID'

// k8s shf
def k8s_crt_id = 'KUBE_CONFIG_FILE_ID'
def k8s_namespace = 'test-web'

// common
def api_name = 'test-web'
def docker_file_path= ''
def docker_image = "${harbor_host}/${harbor_project}/${api_name}:${SERVICE_VERSION}-${ENVIRONMENT.toLowerCase()}"
def service_node_port = ''
def current_timespan = System.currentTimeMillis().toString()


pipeline {
    agent any
    tools {
      nodejs 'nodejs14.15.1'
    }
    stages {
        stage('参数初始化+代码拉取') {
            steps {
                script {
                            api_name = "test-web"
                            docker_file_path = "Dockerfile"
                            docker_image = "${harbor_host}/${harbor_project}/${api_name}-${ENVIRONMENT.toLowerCase()}:${SERVICE_VERSION}_${current_timespan}"
                            service_node_port = "30992"
                }
               dir("${ENVIRONMENT.toLowerCase()}") {
               // 如果是公开仓库,可以直接使用 git url: "${git_url}" 拉取代码
                git branch: BRANCH, credentialsId: "${git_auth_id}", url: "${git_url}"
               }
            }
        }

        stage('依赖安装') {
            steps {
                dir("${ENVIRONMENT.toLowerCase()}") {
                sh (script: """
                npm install --registry=https://registry.npm.taobao.org
                """)
                }
            }
        }

         stage('代码编译') {
            steps {
                dir("${ENVIRONMENT.toLowerCase()}") {
                sh (script: """
                npm run build
                """)
                }
            }
        }

        stage('镜像构建') {
            steps {
                dir("${ENVIRONMENT.toLowerCase()}") {
                sh (script: """
                oldImage=\$(docker images ${harbor_host}/${harbor_project}/${api_name}:${SERVICE_VERSION}  | grep ${api_name} | awk \'{ print \$1":"\$2 }\')
                if [ -z \$oldImage ]; then
                    echo "正常构建镜像"
                else
                     echo "删除存在镜像"
                     docker rmi \$oldImage
                fi
                """)
                sh 'pwd'
                // 生成镜像
                sh "docker build -t ${docker_image}  -f ${docker_file_path} ."
                // 查看镜像
                sh "docker images ${harbor_host}/${harbor_project}/${api_name}"
                }
            }
        }
        stage('镜像上传') {
            steps {
                withCredentials([usernamePassword(credentialsId: "${harbor_crt_id}", passwordVariable: 'harbor_password', usernameVariable: 'harbor_user_name')]) {
                sh (script: """
                # 登录镜像仓库
                HARBOR_PASSWORD=${harbor_password} && echo "\$HARBOR_PASSWORD" | docker login ${harbor_host}  -u ${harbor_user_name} --password-stdin
                # 推送镜像
                docker push ${docker_image}
                # 登出
                docker logout ${harbor_host}
                # 删除镜像
                docker rmi ${docker_image}
                """)
                }
            }
        }
        stage('发布到K8S') {
         steps {
            dir("${ENVIRONMENT.toLowerCase()}") {
            sh """
            api_name=${api_name}
            deploy_api_name=\${api_name}
            export REGISTRY_HOST_IMAGE=${docker_image}
            export SERVICE_NAME=\${deploy_api_name}
            export SERVICE_VERSION=\${SERVICE_VERSION}
            export SERVICE_DEPLOYNAME_NAME=\${deploy_api_name}-deployment
            export ASPNETCORE_ENVIRONMENT=${ENVIRONMENT}
            export SERVICE_SERVICE_NAME=\${deploy_api_name}-service
            export SERVICE_SERVICE_PORT_NAME=\${deploy_api_name}-port
            export SERVICE_SERVICE_SELECT_NAME=\${deploy_api_name}
            export SERVICE_SERVICE_NODE_PORT=${service_node_port}
            export SERVICE_REPLICAS=${REPLICAS}
            export K8S_DEPLOY_NAMESPACE=${k8s_namespace}

            envsubst < deploy/k8s-master/template/api-deployment.yaml > deploy/k8s-master/template/api-real-deployment.yaml
            echo 'deployment发布内容'
            cat deploy/k8s-master/template/api-real-deployment.yaml

            envsubst < deploy/k8s-master/template/api-service.yaml > deploy/k8s-master/template/api-real-service.yaml
            echo 'service发布内容'
            cat deploy/k8s-master/template/api-real-service.yaml
          """
          withKubeConfig([credentialsId: "${k8s_crt_id}"]) {
            sh 'kubectl apply -f deploy/k8s-master/template/api-real-deployment.yaml'
            sh 'kubectl apply -f deploy/k8s-master/template/api-real-service.yaml'
          }
        }
        }
       }
    }
}

在harbor网站里创建一个项目对应harbor_project 与脚本相互对应,

如果不创建,镜像创建不成功

在下面这个网站里创建一个k8s_namespace 与上面的脚本相互对应,

如果不创建,发布到k8s会报错

然后还有一个Dockerfile文件

javascript 复制代码
FROM nginx
COPY dist/ /var/test/html/
COPY dockerConf/default.conf /etc/nginx/conf.d/
EXPOSE 80
EXPOSE 443

然后还要在dockerConf文件夹下创建一个default.conf文件

javascript 复制代码
server {
    listen 80;
    server_name "";
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript application/x-javascript text/css application/css application/xml application/xml+rss text/javascript application/x-httpd-php ima
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;
	access_log  /var/log/nginx/access.log;
	location / { 
                      root   /var/test/html/; 
                      index  index.html index.htm; 
                      if (!-e $request_filename) { 
                          rewrite ^(.*)$ /index.html?s=\$1 last; 
                          break; 
                      } 
               }
}

各种配置完之后,运行一下

接下来,成功会变成这样,如果失败了,会在具体的哪一步报错,根据错误信息去修改,有时候网速慢,会在下载依赖的时候就会报错

这就成了

相关推荐
李纲明39 分钟前
WordPress 定时发布不准点或备份/邮件从不跑:先分清 WP-Cron 触发与 DISABLE_WP_CRON,再查回环与系统 Cron
运维·性能优化·wordpress·定时任务·devdiy·wp-cron
Decay__1 小时前
01_MySQL 体系架构全解 —— 连接层、SQL 层、存储引擎层与 InnoDB 深入
运维·数据库·sql·mysql·架构
Linux_cy1 小时前
nginx 502 排查手册:九种原因分类、定位命令与检查顺序
linux·运维·服务器·网络·数据库·nginx·ssh
椒颜皮皮虾྅1 小时前
模型部署不再卡在环境上:DeploySharp 四大推理引擎与 Windows/Linux 离线交付实战
linux·运维·开发语言·人工智能·windows·计算机视觉·cuda
前端 贾公子2 小时前
第 6 章:MCP 服务器介绍与接入
运维·服务器·网络
Highcharts.js2 小时前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
-梅2 小时前
GitHub Actions 自动化:5 个真实运维提效案例
运维·自动化·github
syntaxsage2 小时前
Dive:Docker 镜像层可视化分析工具
运维·其他·docker·容器
java_logo2 小时前
Docker 部署 Samba:轻松搭建局域网文件共享
运维·docker·容器·文件共享·samba·smb·轩辕镜像
corey932 小时前
Linux 学习 - 第十四周作业
linux·运维·学习