Jenkins上面使用pnpm打包

问题

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

步骤

Jenkins安装NodeJS插件

安装完成,记得重启Jenkins。

全局配置nodejs

Jenksinfile

json 复制代码
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源复制一点点,最后,保存应用。

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

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

json 复制代码
{
    "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刷新权限(可选)

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

总结

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

参考

相关推荐
TracyCoder1232 小时前
ElasticSearch深入解析(三):Elasticsearch 7的安装与配置、Kibana安装
大数据·elasticsearch·jenkins
奋斗者职场日记4 小时前
Jenkins流水线管理工具
运维·jenkins
john_Asura5 小时前
Vue3 自定义指令完全指南
前端·javascript·vue.js·npm·html
秋秋秋秋秋雨17 小时前
linux安装单节点Elasticsearch(es),安装可视化工具kibana
linux·elasticsearch·jenkins
DolphinScheduler社区20 小时前
白鲸开源与亚马逊云科技携手推动AI-Ready数据架构创新
人工智能·科技·开源·aws·白鲸开源·whalestudio
傻小胖20 小时前
发布一个npm包,更新包,删除包
前端·npm·node.js
去伪存真21 小时前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
DN金猿1 天前
使用npm install或cnpm install报错解决
前端·npm·node.js
muzidigbig1 天前
开发并发布一个属于自己的包(npm)
npm·开发npm包步骤·npm包使用es6模块导入
YuShiYue1 天前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm