如何使用Github Actions为Expo React Native应用程序设置CI/CD工作流程

443 阅读4分钟

CI/CDXP中最重要的实践之一。 从一开始就建立CI/CD可以帮助更早的发现和修复问题,更快的进入市场。 在Saeloun,我们确保在项目开始时就设置好。

让我们开始为Exporeact-native应用程序设置CI/CD。 首先,我们将设置CI流程,使其在我们创建的每个分支上运行,然后我们将设置CD流程,具体到developmain 分支,因为我们需要为合并到developmain 的最新变化创建构建。

持续集成

  • 由于我们使用的是Github Actions,我们需要在项目根部的.github/workflows 文件夹中创建一个ci.yml 文件。
  • 添加工作流的名称和我们需要触发工作流的行动。
name: CI
on: push
  • 由于工作流是由Job组成的,我们需要添加一个名字为lint-and-test 的Job,因为我们将对代码进行润色并运行测试案例。 此外,我们还需要指定在我们的工作流中处理作业的机器的类型。
name: CI
on: push

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
  • 由于Job是由一系列步骤组成的,我们需要添加步骤来缓存和安装节点模块,最后运行lint和测试案例。 所以,这就是我们最终的ci.yml 文件的样子。
name: CI
on: [push]

jobs:
  lint-and-test:
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Find yarn cache location
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: JS package cache
        uses: actions/cache@v1
        with:
          path: $(( steps.yarn-cache.outputs.dir ))
          key: $(( runner.os ))-yarn-$(( hashFiles('**/yarn.lock') ))
          restore-keys: |
            $(( runner.os ))-yarn-

      - name: Install Node Modules
        run: yarn install

      - name: Run Lint
        run: yarn lint

      - name: Run tests
        run: yarn test  

一旦我们添加了这个文件并推送了代码,Github Actions将运行工作流程,我们可以在Github Actions标签上看到结果。

Continuos部署

要开始使用Continuos部署,我们需要首先从expo.dev创建一个EXPO_TOKEN ,并将其添加到GitHub项目的设置中,以便Expo允许GitHub Actions创建一个构建。

  • 导航到expo.dev/settings/ac…
  • 点击 "Create "来创建一个新的访问令牌。
  • 复制生成的令牌。
  • 浏览github.com/your-userna…用你的项目信息替换 "你的用户名 "和 "你的repo名称"。
  • 点击 "New repository secret"
  • 把秘密的名字定为 "EXPO_TOKEN",然后把访问令牌作为值粘贴进去。

完成后,在项目根目录下创建eas.json 文件。 这个文件指定了不同的配置文件,可以用来为不同的环境创建构建,例如在我们的例子中,我们为开发构建创建了一个preview 配置文件。 它还指定了我们需要使用的打包类型,credentialsSource 来签署构建,以及distribution 通道。

在我们的案例中,credentialsSource 被设置为远程,这意味着Expo会自动创建证书来签署应用程序。

{
  "cli": {
    "version": ">= 0.52.0"
  },
  "build": {
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "credentialsSource": "remote"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

现在我们准备创建一个GitHub Actions工作流程来创建一个构建。

  • 在项目根部的.github/workflows 文件夹中创建一个cd.yml 文件。
  • 添加工作流的名称和行动,以及我们需要触发工作流的分支名称。
name: build
on: 
 push:
  branches:
    - develop
  • 添加作业build ,并将ubuntu-latest 作为一个运行器机器。
  • 添加一个步骤,从项目的设置中获取EXPO_TOKEN
  • 添加一个步骤来设置ENV。
  • 添加一个步骤来安装expo。
  • 增加缓存和安装节点模块的步骤。
  • 最后,添加一个步骤来创建一个构建。

下面是我们最终的build.yml

name: build
on: 
 push:
  branches:
    - develop

jobs:
  build:
    name: EAS build
    runs-on: ubuntu-latest
    steps:
      - name: Check for EXPO_TOKEN
        run: |
          if [ -z "$(( secrets.EXPO_TOKEN ))" ]; then
            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
            exit 1
          fi

      - name: "Set ENV"
        run: echo "$(BASE_URL)"     
        env:
          BASE_URL: https://exampleapp.com    

      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: 16.x
          cache: yarn

      - name: Setup Expo
        uses: expo/expo-github-action@v7
        with:
          expo-version: latest
          eas-version: latest
          token: $(( secrets.EXPO_TOKEN ))

      - name: Find yarn cache
        id: yarn-cache-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Restore cache
        uses: actions/cache@v2
        with:
          path: "$(( steps.yarn-cache-path.outputs.dir ))"
          key: "$(( runner.os ))-yarn-$(( hashFiles('**/yarn.lock') ))"
          restore-keys: "$(( runner.os ))-yarn-"

      - name: Install dependencies
        run: yarn install --immutable

      - name: Publish build
        run: eas build --platform android --profile preview 

从命令中可以看出 发布构建命令可以看出,我们正在使用上面提到的preview profile创建一个android构建。

现在,一旦我们把这个文件推送到开发分支,GitHub Actions就会运行这个工作流,并触发在Expo平台上创建构建。 一旦构建完成,我们可以随时从Expo构建仪表板上下载它。