移动端H5流水线部署

移动端H5流水线部署

需求:

在已部署好《imom移动端打包部署 - iMOM开发者门户》的基础上，部署相关的移动端H5流水线

1. 添加移动端运行环境

2. 创建流水线

3. 编辑流水线的jenkins file配置

pipeline {
  agent {
    kubernetes {
      inheritFrom 'nodejs base'
      containerTemplate {
        name 'nodejs'
        image 'node:14.19.0'
      }

      label 'nodejs'
      defaultContainer 'nodejs'
    }

  }
  stages {
    stage('拉取代码') {
      agent none
      steps {
        script {
          if (env.TAG == ''||env.TAG ==null ) {
        env.TODAY = sh(script: 'date +%Y%m%d', returnStdout: true).trim()
            env.TAG= "${env.TODAY}.${BUILD_NUMBER}"
          }
          echo '当前appCode='+env.appCode
        }

        container('nodejs') {
          git(url: 'http://YOUR_IP:36681/saiyi/imom-mes-app.git', credentialsId: 'devops', branch: 'dev', changelog: true, poll: false)
  
          sh '''
          ls
          ls | grep -vE '^(Dockerfile|deploy)' | xargs rm -rf
          npm cache clean --force
          if [[ "$cliId" == "dme" ]]; then
            npm install -g sie-cli@1.12.3-alpha.1 --registry=http://YOUR_IP:36689/repository/npm-group/
            cliCmd="sie-cli"
          else
            npm install -g @imom/mobile-cli@0.1.2-alpha.18 --registry=http://YOUR_IP:36689/repository/npm-group/
            cliCmd="imom-cli"
          fi
          $cliCmd -V
          $cliCmd init -auto 是 -n uni-template -dme -appCode $appCode -site $site -checkUpdateHost $checkUpdateHost -tenantId $tenantId -updateMode 0 -rememberUsersLimit 3
          # tail -f /dev/null
          mv uni-template/* .
          rm -rf uni-template
          '''
  
        }

      }
    }

    stage('安装依赖') {
      agent none
      steps {
        container('nodejs') {
          sh '''ls

yarn config set ignore-engines true
sed -i "s|http://192.168.181.114:8081|http://YOUR_IP:36689|g"  yarn.lock
yarn install --registry=http://YOUR_IP:36689/repository/npm-group/
ls

cd src
yarn install --registry=http://YOUR_IP:36689/repository/npm-group/

cd ../
'''
        }

      }
    }

    stage('构建项目') {
      agent none
      steps {
        container('nodejs') {
          sh '''
          cat package.json
          yarn run build:h5:trqdev
          ls
          '''
        }

      }
    }

    stage('打包镜像') {
      agent none
      steps {
        script {
          if (env.tag == '' ) {
            env.TAG=env.BUILD_NUMBER
          }
        }

        container('nodejs') {
          sh '''ls
        docker build -f Dockerfile -t $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$TAG .'''
          withCredentials([usernamePassword(credentialsId : 'harbor' ,passwordVariable : 'DOCKER_PASSWORD' ,usernameVariable : 'DOCKER_USERNAME' ,)]) {
            sh '''echo "$DOCKER_PASSWORD" | docker login $REGISTRY -u "$DOCKER_USERNAME" --password-stdin
docker push  $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$TAG'''
          }

        }

      }
    }

    stage('发布部署') {
      agent none
      steps {
        container('nodejs') {
          withCredentials([  kubeconfigFile( credentialsId: env.KUBECONFIG_CREDENTIAL_ID,  variable: 'KUBECONFIG') ]) {
            script {
                sh """
                sed -i 's/^\\([[:space:]]*\\)namespace:[[:space:]]*[^ ]\\+/\\1namespace: \$IMOM_NAMESPACE/' deploy/develop_dev.yaml
                sed -i '/nodePort:[[:space:]]\\+[0-9]\\+/d' deploy/develop_dev.yaml
                sed -i 's/harbor-key/default-secret/g' deploy/develop_dev.yaml
                envsubst < deploy/develop_dev.yaml | kubectl apply -f -
                """
            }

          }

        }

      }
    }

  }
  environment {
    DOCKER_CREDENTIAL_ID = 'harbor-id'
    KUBECONFIG_CREDENTIAL_ID = 'kubeconfig-key'
    REGISTRY = '192.168.100.133:5000'
    DOCKERHUB_NAMESPACE = 'private'
    IMOM_NAMESPACE = 'imom'
    APP_NAME = 'app-ui'
    PROJECT_NAME = 'common'
    PROFILES_ACTIVE = 'dev'
  }
}

确保代码工程有部署相关的文件:

yarn install安装依赖前，需要将yarn.lock文件的仓库地址修改，防止从赛意内网nexus上下载依赖包:

sed -i 's|http://192.168.181.114:8081|http://YOUR_IP:36689|g"yarn.lock

构建项目使用以下的命令，确保与运行环境上的配置一致:

yarn run build:h5:trqdev

4. 使用流水线

勾选所需的业务包, 点击"生成AppCode", 复制生成的appCode

运行app-ui流水线，输入appCode:

等待流水线运行完成, 观察到app-ui 工作负载已被更新:

确保已部署好public-ui工作负载, 并配置好VITE_MOBILE_PATH和VITE_BASE_URL

VITE_MOBILE_PATH: 移动端H5的外网访问路径

VITE_BASE_URL: public-ui 的后端接口请求路径

确保已部署好app-ui工作负载, 已配置好VITE_BASE_URL

VITE_BASE_URL: app-ui 的后端接口请求路径

华为mbm平台加入移动端H5菜单入口:

文根路径为:

imom-public/devops/#/mobile

5. 使用移动端H5