這篇文章會分享的是使用 Expo + Github action 實現自動 eas update 和 eas build,主要目的是學會使用 Github action。
https://expo.dev/accounts/%5Baccount%5D/settings/access-tokens
要使用 expo cli, eas cli 做任何操作都需要經過身份驗證,也就是說需要登入 expo 帳號密碼,但還有一種更安全和方便的方式是使用 access token 來驗證身份。
點擊上方的連結後選擇帳號:
接著點擊右上方的 Create token
將這個 EXPO_TOKEN 保存起來,接下來會用到。
因為後面需要使用 Github action workflow 來 eas update 和 eas build,所以會需要將剛剛生成的 EXPO_TOKEN 存到 repo 的 Secrets 裡面,這樣一來執行 workflow 的時候才能從 secrets 中獲取到 EXPO_TOKEN,從而進行下一步動作。
到倉庫的 Settings - Secrets and variables - Actions 新增 secret
EAS_ACCESS_KEY
: EXPO TOKEN(剛剛前面申請的)Github Action 是 Github 的 CI/CD(流程自動化) 服務,一般來說會在根目錄底下新增 .github/workflows
資料夾,並且用 YAML 檔來描述自動化流程。
想瞭解更多 Action 的內容可以參考官方文檔:https://docs.github.com/en/actions
創建 .github/workflows
資料夾,並新增 main.yml
:
name: preview # Action 的名字,會顯示在側邊欄
on:
push:
branches:
- main # 監聽是否 push 到 main 這個分支,是的話就會執行 action
jobs: # 一個 action 裡面可以有多個 job
build: # 這邊的 `build` 就是其中一個 job 的名稱
runs-on: ubuntu-latest
steps:
# 使用 actions/checkout 操作來拉取程式碼
- name: 🏗 Checkout Code
uses: actions/checkout@v3
# actions/setup-node 設置 Node.js 版本
- name: 🏗 Setup Node
uses: actions/setup-node@v3
with:
node-version: 18.x
# expo-github-action 是 expo 官方為方便用 Github Action 實現流程自動化而創建,
# 包含了安裝/更新 eas cli、用 expo access token 進行身份驗證
- name: 🏗 Setup EAS
# 直接用 uses 關鍵字執行 expo github action 就不需要再自己去寫這些流程
uses: expo/expo-github-action@v8
with:
eas-version: latest
token: ${{ secrets.EAS_ACCESS_KEY }}
# 安裝應用依賴套件
- name: 📦 Install dependencies
run: npm install --legacy-peer-deps
# 創建 update
# 設置 auto 的話 expo branch 就會是執行 action 的 branch
- name: 🚀 Create update
run: eas update --auto --non-interactive
# 使用 eas build 來 build 應用
# 這邊 build 的是 Android & iOS, 使用 preview profile
# build iOS 需要先設置 credentials (eas credentials)
- name: 🚀 Build Android App
run: eas build --platform All --profile preview --non-interactive
如果你的專案中還沒有 eas.json
請使用 eas build:configure
指令生成,如果不想用 preview
profile 的話可以自行新增一個或者也可以自行修改名稱。
eas.json
{
"cli": {
"version": ">= 3.9.1"
},
"build": {
"development": {
"channel": "development",
"developmentClient": true,
"distribution": "internal",
"ios": {
"resourceClass": "m-medium"
}
},
"preview": {
"channel": "preview",
"distribution": "internal",
"ios": {
"resourceClass": "m-medium"
}
},
"production": {
"channel": "production",
"ios": {
"resourceClass": "m-medium"
}
}
},
"submit": {
"production": {}
}
}
對 eas.json 這些設置不瞭解的話可以看官方文檔:https://docs.expo.dev/build/eas-json/
為了能夠使用 eas update 指令更新,我們需要先進行設置
eas update:configure
輸入指令後會提示你需要將紅框處這段貼到 app.config.js
或者 app.json
中:
建議將 projectId 存在環境變數中,而不是直接寫在檔案裡面。
// app.config.js
module.exports = ({ config }) => {
return {
...config,
extra: {
eas: {
projectId: process.env.PROJECT_ID,
},
},
updates: {
url: `https://u.expo.dev/${process.env.PROJECT_ID}`,
},
runtimeVersion: {
policy: 'sdkVersion',
},
};
};
如果不知道怎麼在應用中使用環境變數,可以看我前幾天發的文章:【DAY18】React Native - 環境變數的管理(env)
記得有用到的環境變數都要寫進 yaml 中:
sed -i "s@.env@@g" .gitignore
代表在 .gitignore 中註釋 .env,如果不在 .gitignore 中註釋掉 .env 的話 eas build 時是無法吃到環境變數的。# .github/workflows/main.yml
name: preview
on:
push:
branches:
- main
jobs:
init:
runs-on: ubuntu-latest
env:
PROJECT_ID: ${{ secrets.PROJECT_ID }}
steps:
# 略...
- name: 🏗 Set Variables
run: |
echo "PROJECT_ID=${PROJECT_ID}" >> .env
sed -i "s@.env@@g" .gitignore
# .env
PROJECT_ID=
將分支合併到 main 分支觸發自動化構建:
如果在開 pull request 時提示「There isn’t anything to compare... entirely different commit histories.」,需要先 pull main 分支並加上
--allow-unrelated-histories
:git pull origin main --allow-unrelated-histories git push origin <Your_branch_name>
在倉庫的 Actions 可以查看正在執行中的 workflows
eas build 時如果在 build 成功後卻 workflow 失敗且遇到下方這個 error:
Input is required, but stdin is not readable. Failed to display prompt: Install and run the Android build on an emulator?
就代表需要在 eas build 後面加上 --non-interactive
eas build --platform all --profile <profile_name> --non-interactive