uni-app CI/CD 集成

章节介绍

CI/CD（持续集成/持续部署）是现代软件开发中的重要实践，它可以帮助开发者自动化构建、测试和部署流程，提高开发效率和代码质量。对于 uni-app 这样的跨平台框架，CI/CD 尤为重要，因为需要为多个平台构建和部署应用。本章节将介绍 uni-app 应用的 CI/CD 集成方法，包括持续集成、自动化构建和部署流程。

核心知识点

1. CI/CD 基础概念

  • 持续集成（CI）：开发者将代码频繁集成到共享仓库，每次集成都会自动运行构建和测试，以尽早发现问题
  • 持续部署（CD）：将通过测试的代码自动部署到生产环境，实现快速交付
  • 持续交付：将通过测试的代码准备好部署到生产环境，但需要手动触发部署

2. 常用 CI/CD 平台

在 uni-app 开发中，常用的 CI/CD 平台包括：

  • GitHub Actions：GitHub 提供的 CI/CD 服务，与 GitHub 仓库无缝集成
  • GitLab CI/CD：GitLab 内置的 CI/CD 服务，功能强大且易于配置
  • Jenkins：开源的自动化服务器，支持自定义构建流程
  • Travis CI：托管式 CI 服务，易于配置和使用
  • CircleCI：现代化的 CI/CD 平台，提供快速的构建环境

3. 自动化构建流程

uni-app 应用的自动化构建流程通常包括以下步骤：

  1. 代码检出：从版本控制系统中检出代码
  2. 依赖安装：安装项目依赖
  3. 代码质量检查：运行代码 lint 和静态分析
  4. 单元测试：运行单元测试
  5. 构建应用：为不同平台构建应用
  6. 端到端测试：运行端到端测试（可选）
  7. 部署应用：将构建产物部署到目标平台

4. 多平台构建配置

由于 uni-app 需要为多个平台构建应用，CI/CD 配置需要考虑不同平台的构建需求：

  • Web 端：构建静态文件并部署到静态网站托管服务
  • 小程序：构建小程序代码包并上传到小程序平台
  • App 端：构建原生应用安装包并部署到应用商店

实用案例

案例：使用 GitHub Actions 实现 uni-app CI/CD

1. 配置文件结构

在项目根目录创建 .github/workflows 目录，并在其中创建 CI/CD 配置文件：

.github/
  workflows/
    ci-cd.yml

2. 基础 CI 配置

配置 GitHub Actions 实现代码质量检查和单元测试：

# .github/workflows/ci-cd.yml
name: uni-app CI/CD

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Lint code
        run: npm run lint
      - name: Run tests
        run: npm run test

3. 多平台构建配置

扩展配置文件，添加多平台构建功能：

# .github/workflows/ci-cd.yml
name: uni-app CI/CD

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]
  release:
    types: [ published ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Lint code
        run: npm run lint
      - name: Run tests
        run: npm run test

  build-web:
    needs: test
    runs-on: ubuntu-latest
    if: github.event_name == 'release'
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build web
        run: npm run build:h5
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/build/h5

  build-app:
    needs: test
    runs-on: ubuntu-latest
    if: github.event_name == 'release'
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build Android
        run: npm run build:app-android
      - name: Build iOS
        run: npm run build:app-ios
      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: app-packages
          path: ./unpackage/release

案例：使用 GitLab CI/CD 实现 uni-app 自动部署

1. 配置文件结构

在项目根目录创建 .gitlab-ci.yml 文件：

.gitlab-ci.yml

2. GitLab CI 配置

# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy

variables:
  NODE_VERSION: '16'

.test_job:
  stage: test
  image: node:$NODE_VERSION
  script:
    - npm install
    - npm run lint
    - npm run test

build_web:
  stage: build
  image: node:$NODE_VERSION
  script:
    - npm install
    - npm run build:h5
  artifacts:
    paths:
      - ./dist/build/h5
  only:
    - tags

build_app:
  stage: build
  image: node:$NODE_VERSION
  script:
    - npm install
    - npm run build:app-android
    - npm run build:app-ios
  artifacts:
    paths:
      - ./unpackage/release
  only:
    - tags

deploy_web:
  stage: deploy
  image: node:$NODE_VERSION
  script:
    - npm install -g surge
    - surge ./dist/build/h5 ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}
  dependencies:
    - build_web
  only:
    - tags

案例：使用 Jenkins 实现 uni-app 自动化构建

1. Jenkins 配置

  1. 安装 Jenkins：根据官方文档安装 Jenkins
  2. 安装插件：安装 Node.js 插件、Git 插件等必要插件
  3. 配置 Node.js：在 Jenkins 全局工具配置中添加 Node.js 安装

2. Jenkins 流水线配置

创建 Jenkins 流水线项目，并配置 Jenkinsfile：

// Jenkinsfile
pipeline {
    agent any
    
    tools {
        nodejs 'Node16'
    }
    
    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }
        
        stage('Install Dependencies') {
            steps {
                sh 'npm install'
            }
        }
        
        stage('Lint') {
            steps {
                sh 'npm run lint'
            }
        }
        
        stage('Test') {
            steps {
                sh 'npm run test'
            }
        }
        
        stage('Build') {
            parallel {
                stage('Build Web') {
                    steps {
                        sh 'npm run build:h5'
                    }
                }
                
                stage('Build App') {
                    steps {
                        sh 'npm run build:app-android'
                        sh 'npm run build:app-ios'
                    }
                }
            }
        }
        
        stage('Deploy') {
            when {
                branch 'main'
            }
            steps {
                sh 'echo "Deploying to production..."'
                // 部署命令
            }
        }
    }
    
    post {
        success {
            echo 'Build succeeded!'
        }
        failure {
            echo 'Build failed!'
        }
    }
}

实用案例

案例：uni-app 多平台自动构建与部署

1. 项目配置

  1. package.json 配置：
{
  "scripts": {
    "dev:h5": "uni-app dev:h5",
    "build:h5": "uni-app build:h5",
    "dev:mp-weixin": "uni-app dev:mp-weixin",
    "build:mp-weixin": "uni-app build:mp-weixin",
    "dev:app-plus": "uni-app dev:app-plus",
    "build:app-plus": "uni-app build:app-plus",
    "lint": "eslint --ext .vue,.js,.jsx,.cjs,.mjs src/ --fix --ignore-path .gitignore",
    "test": "jest"
  }
}

2. GitHub Actions 完整配置

# .github/workflows/ci-cd.yml
name: uni-app CI/CD

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]
  release:
    types: [ published ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Lint code
        run: npm run lint
      - name: Run tests
        run: npm run test

  build-mp-weixin:
    needs: test
    runs-on: ubuntu-latest
    if: github.event_name == 'release'
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build WeChat Mini Program
        run: npm run build:mp-weixin
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: mp-weixin
          path: ./dist/build/mp-weixin

  build-h5:
    needs: test
    runs-on: ubuntu-latest
    if: github.event_name == 'release'
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build H5
        run: npm run build:h5
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/build/h5

  build-app:
    needs: test
    runs-on: ubuntu-latest
    if: github.event_name == 'release'
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build App
        run: npm run build:app-plus
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: app-plus
          path: ./unpackage/release

学习目标

通过本章节的学习，你应该能够：

  1. 了解 CI/CD 的基础概念和重要性
  2. 掌握常用 CI/CD 平台的选择方法
  3. 学会配置 uni-app 应用的自动化构建流程
  4. 学会实现多平台构建和部署
  5. 理解如何通过 CI/CD 提高开发效率和代码质量

章节总结

本章节介绍了 uni-app 应用的 CI/CD 集成方法，包括持续集成、自动化构建和部署流程。CI/CD 是现代软件开发中的重要实践，它可以帮助开发者自动化构建、测试和部署流程，提高开发效率和代码质量。对于 uni-app 这样的跨平台框架，CI/CD 尤为重要，因为需要为多个平台构建和部署应用。

在实际开发中，建议开发者根据项目需求选择合适的 CI/CD 平台，并配置完整的构建和部署流程。通过 CI/CD，开发者可以实现代码的自动构建、测试和部署，减少手动操作，提高开发效率和代码质量。同时，CI/CD 也可以帮助开发者在开发过程中及时发现和修复问题，确保应用的稳定性和可靠性。

« 上一篇 uni-app 自动化测试 下一篇 » uni-app 开发规范
↑