Jenkins上面使用pnpm打包

问题

前端也想用Jenkins的CI/CD工作流。

步骤

Jenkins安装NodeJS插件

NodeJS
安装完成,记得重启Jenkins。

全局配置nodejs

全局nodejs配置

Jenksinfile

pipeline {
  agent any

  tools {nodejs "18.15.0"}

  stages {
    stage('Check tool version') {
      steps {
        sh '''
            node -v
            npm -v
            npm config ls
        '''
      }
    }
    stage('Build Preparation') {
        steps {
            sh '''
                corepack enable pnpm
                pnpm i
            '''
        }
    }
    stage('Build') {
        steps {
            script {
                if (env.BRANCH_NAME.startsWith('develop')){
                    sh '''
                        pnpm run build:dev
                    '''
                } else if (env.BRANCH_NAME.startsWith('uat')){
                    sh '''
                        pnpm run build:uat
                    '''
                } else {
                    echo 'Skipping pnpm run.'
                }
            }
        }
    }
    stage('S3 Sync') {
        steps {
            script {
                if (env.BRANCH_NAME.startsWith('release')){
                    sh '''
                         aws s3 sync ./dist/ s3://prod-web-xxxx/ --exclude "xxxx/*" --exclude "h5/*" --delete
                    '''
                } else if (env.BRANCH_NAME.startsWith('uat')){
                    sh '''
                        aws s3 sync ./dist/ s3://uat-web-xxxx/ --exclude "xxxx/*" --exclude "h5/*" --delete
                    '''
                } else {
                    echo 'Skipping S3 Sync.'
                }
            }
        }
    }
    stage('CDN invalidation') {
        steps {
            script {
                if (env.BRANCH_NAME.startsWith('release')){
                    sh '''
                         aws cloudfront create-invalidation --distribution-id XXXX --paths '/*'
                    '''
                } else if (env.BRANCH_NAME.startsWith('uat')){
                    sh '''
                        aws cloudfront create-invalidation --distribution-id xxxx --paths '/*'
                    '''
                } else {
                    echo 'Skipping CDN invalidation.'
                }
            }
        }
    }
  }
}


这里的18.15.0必须与上一步中Jenkins安装的NodeJS名称一致。这里还涉及到将文件上传到s3桶和刷新CDN的过程。

创建Jenkins多分支项目

创建入口页面
创建多分支流水线
设置git源
这里设置git源复制一点点,最后,保存应用。

S3同步部署文件权限(可选)

我这里用的是AWS云,所以,这里需要对运行的Jenkins需要设置相关权限。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "ListObjectsInBucket",
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::dev-xxx"
            ]
        },
        {
            "Sid": "AllObjectActions",
            "Effect": "Allow",
            "Action": "s3:*Object",
            "Resource": [
                "arn:aws:s3:::dev-xxx/*"
            ]
        }
    ]
}

CloudFront刷新权限(可选)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "cloudfront:CreateInvalidation",
            "Resource": "arn:aws:cloudfront::xxxxxxx:distribution/xxxxxxx"
        }
    ]
}

总结

到这里Jenkins打包前端的工程就结束了。aws cli挺好用的,要是Jenkins出个官方插件就好了。

参考

使用Jenkins与Docker结合进行打包具有以下优势: 1. 环境一致性:使用Docker进行打包可以确保在不同的环境中应用程序的一致性。Docker容器提供了一个隔离的运行环境,可以将应用程序和其依赖项打包为一个独立的容器镜像。这样,不管是在开发、测试还是生产环境中运行,都可以保证环境的一致性,避免由于环境差异导致的问题。 2. 可移植性:Docker容器提供了跨平台和可移植的打包格式。你可以在开发机上构建Docker镜像,然后将镜像推送到共享的镜像仓库,供其他团队成员或部署服务器使用。这样可以简化部署过程,减少由于环境配置不一致导致的问题。 3. 快速部署:使用Docker进行打包可以加快应用程序的部署速度。Docker容器可以快速启动和停止,并且容器化的应用程序相对轻量级,可以快速进行扩展和复制。这使得在持续集成和持续交付(CI/CD)流程中能够更快地部署新版本的应用程序。 4. 资源隔离:使用Docker可以实现资源的有效隔离和管理。每个Docker容器都有自己的资源限制和隔离环境,这样可以避免应用程序之间的相互影响。此外,可以通过Docker的资源管理功能,对容器进行限制和调整,以满足应用程序的性能需求。 5. 可伸缩性:使用Docker可以轻松实现应用程序的水平扩展。通过使用容器编排工具(如Docker Compose或Kubernetes),可以根据负载情况对应用程序进行动态扩容和缩容,以满足业务需求。 总的来说,Jenkins与Docker结合使用可以提供更加一致、可移植、快速、可扩展和可管理的打包和部署流程,从而提高开发团队的效率和应用程序的稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值