GitHub Actions を使って環境毎に eas build する

GitHub Actions を使って環境毎に eas build する

はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【GitHub Actions を使って環境毎に eas build する】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

  • 手動でビルドするなんて面倒くさいことはできない
  • ブランチごとに環境変数を使い分けたい

チャレンジ内容

  • pushしたブランチごとに定義してある環境変数が読み込まれビルドされる

前提知識

  • CI側で使いたい環境変数はEASに登録せずにCI側で登録する
  • ビルド時に読み込ませたいsecretは事前にEASのProjectに登録しておく必要がある
  • EASは1つのProjectで複数環境のsecretを登録できない
    • 環境毎にProjectを作成しsecretを登録しておく必要がある

やり方

前提

  • ExpoのProfileにdevelopment(任意の名前)を作成する
    • ここのProfileで定義した名前をEASとActionsで利用します

EASの設定について

‣
環境毎にProjectを作成する
  • EAS上でprojects→All projects→Createで作成できます
‣
作成したProjectにsecretを登録する
  • projects→Configure→Secrets→Createで作成できます

GitHubの設定について

‣
EAS側で発行したEXPO_TOKEN をsecretとして登録します
  • Settings→Secrets→Actions→New Repository Secret
‣
Github Actions の設定
  • .github/workflows/development(任意の名前).yml
name: development(任意の名前)
on:
  push:
    branches:
      - feature/*
env:
  SLUG: development(任意の名前)
jobs:
  build:
    name: Install and build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16.x'
          cache: npm
      - name: Setup Expo
        uses: expo/expo-github-action@v7
        with:
          expo-version: 5.x
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Build on EAS
        run: npx eas-cli build --platform all --profile development(任意の名前) --non-interactive --no-wait

Expoの設定について

‣
app.json
‣
Projectを作成した直後のapp.json
  • app.jsonでは可変的な対応ができないためoverrideさせる必要がある
{
  "expo": {
    "name": "アプリ名",
    "slug": "アプリ名",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}
‣
app.config.js
‣
最小の構成でapp.config.jsを作成したのが下記
  • envsはci側で設定された環境変数を読み込んでいます
    • ビルドするタイミングでどのProjectにビルドするのかを決めるのに利用しています
  • extra ではEASに設定したsecretを読み込んでいます
    • 利用する時は下記のようにします
      • ...
import Constants from 'expo-constants';
...
<>{Constants.manifest?.extra?.appEnv}</>
...
import 'dotenv/config';

module.exports = () => {
  const envs = {
    expo: {
      slug: process.env.SLUG,
    },
  };

  return {
    expo: {
      owner: 'EASのアカウント名',
      name: 'アプリケーションの名前',
      slug: envs.expo.slug,
      extra: {
        appEnv: process.env.APP_ENV,
      },
      android: {
        package: '逆ドメイン名',
        versionCode: 1,
      },
      ios: {
        bundleIdentifier: '逆ドメイン名',
      },
    },
  };
};

まとめ

  • EASのProjectは環境毎に作成する
  • EAS上でEXPO_TOKEN をsecretを発行する
  • GithubにEXPO_TOKEN をsecretとして登録する
  • Github Actionsを作成する
  • Expoにapp.config.jsを作成する

さいごに

CI/CDが絡んだ情報がほとんどなかったので実際にどういう風に実現したのかについて書いてみました

関連記事

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています

image
GitHubXInstagram

©ゆとりちゃれんじ