CI/CD是XP中最重要的实践之一。 从一开始就建立CI/CD可以帮助更早的发现和修复问题,更快的进入市场。 在Saeloun,我们确保在项目开始时就设置好。
让我们开始为Exporeact-native应用程序设置CI/CD。 首先,我们将设置CI流程,使其在我们创建的每个分支上运行,然后我们将设置CD流程,具体到develop 或main 分支,因为我们需要为合并到develop 或main 的最新变化创建构建。
持续集成
- 由于我们使用的是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构建仪表板上下载它。
