OpenAIExpoDec 16, 2025, 2:30 PM

How to turn every pull request into an instantly installable preview

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Instantly installable pull request previews with Expo EAS Workflows

Key Points

  • Preview PRs via QR codes
  • Reuse compatible development builds
  • Automate build-or-update with EAS Workflows

Summary

This article explains how to turn every pull request into an install-ready preview using Expo EAS Workflows, development builds, and EAS Update. With expo-dev-client installed and compatible development builds available, the workflow publishes over-the-air updates that teammates can open in their dev client via a QR code. If native-layer changes are detected, the workflow first creates new development builds and then publishes the update so the PR remains the single source of truth for reviewing changes.

Key Points

  • Prerequisites: an Expo project, EAS CLI (logged in), expo-dev-client, and a linked GitHub repository.
  • Workflow responsibilities: compute native fingerprints, check for compatible Android/iOS/simulator builds, create dev builds when needed, publish an OTA update, and post a PR comment with build links and QR codes.
  • Compatibility check: fingerprints detect native-layer changes. If unchanged, updates apply instantly (no rebuild). If changed, the workflow creates new dev builds then publishes the update.
  • Setup commands and files: npx create-expo-app, npm install -g eas-cli, eas build:configure, npx expo install expo-dev-client, eas update:configure, and add .eas/workflows/create-dev-build-or-update.yml to trigger on pull_request.
  • Workflow building blocks: Fingerprint, Get Build, Build, Update, GitHub Comment — use EAS pre-packaged jobs to simplify automation.
  • Result: fast, predictable previews that let designers, QA, and product experience changes earlier via QR codes or dev-client selection.

Quick checklist

  • Install expo-dev-client and configure eas.json with development, preview, and production channels.
  • Connect your GitHub repo to the Expo project and enable the workflow to run on PRs.
  • Add the workflow YAML to .eas/workflows/ so PRs automatically publish preview updates or create dev builds when necessary.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

すべてのプルリクエストを即インストール可能なプレビューにする方法

概要

Expo の CI/CD(Workflows)、開発ビルド、そして OTA(EAS Update)を組み合わせることで、各プルリクエストを QR コードで開けるインストール準備済みのプレビューに変える方法を説明します。ブランチを切り替えたりアプリを手動で再ビルドしたりすることなく、新機能をレビューできるワークフローを目指します。

互換性のある開発ビルドがすでに端末にインストールされている場合、各プルリクエストはアプリ内で QR コードや Dev Client の選択から直接読み込めるプレビューになります。ネイティブ変更があれば最初に新しいビルドが作成され(そのビルドに対して更新が適用され)、レビュー方法は変わりません。開発サーバーは不要、特別なセットアップも不要で、デザイナー、QA、プロダクトが早期にフィードバックループに参加できます。

ワークフローの責務

ワークフローで自動化すべき主要な責務は次の通りです。

  • Android、iOS、iOS Simulator 用の互換性のある開発ビルドが存在するか判定する。
    • 互換性がない場合は必要に応じて新しい開発ビルドを生成する。
    • 互換性のあるビルドが既に存在する場合はビルドステップを省略して既存ビルドを再利用する。
  • 既存ビルドがあっても新しく作成した場合でも、開発ビルドをターゲットとした OTA アップデートを公開する。
  • プルリクエストにコメントを投稿し、次を含める:
    • 互換性のあるビルドへのリンク
    • 既に互換性のある開発ビルドを持っていれば即実行できるアップデートへの直接アクセス(QR コードでスキャン、または Dev Client から選択)

新しい Expo プロジェクトで EAS Workflows を始める

前提としていくつかの準備が必要です。チュートリアルでは新規プロジェクトから始めます。

  • プロジェクト作成:

    npx create-expo-app my-demo-app

  • EAS CLI をインストールし、Expo アカウントにログイン:

    npm install -g eas-cli

    eas login

  • プロジェクトを EAS Build 用に設定:

    eas build:configure

このコマンドはプロジェクトルートに eas.json を生成し、一般的なビルドプロファイルを設定します。また、プロジェクトを Expo にリンクして expo.extra.projectIdapp.json に追加します(詳しくは EAS Build のドキュメント参照)。

iOS シミュレータ用の専用ビルドプロファイルを追加

例として development-simulator プロファイルを eas.json に追加します(既存の設定の一部):

{
    "cli": { "version": ">= 16.28.0", "appVersionSource": "remote" },
    "build": {
        "development": {
            "developmentClient": true,
            "distribution": "internal",
        },
        "development-simulator": {
            "extends": "development",
            "ios": {
                "simulator": true
            }
        },
        "preview": { "distribution": "internal", },
        "production": { "autoIncrement": true, }
    },
    "submit": { "production": {} }
}

(上の JSON は抜粋例です)

開発ビルドの設定

このワークフローを最大限活用し、開発者や QA にとって良い体験にするには、開発ビルド(development builds)を使う必要があります。プロジェクトに expo-dev-client がインストールされていることを確認してください:

`npx expo install expo-dev-client`

expo-dev-client はデバッグビルドに便利な開発ツールやカスタマイズ可能なランチャー UI を追加します。この UI により、プルリクエストから作成された機能プレビューをアプリ内で直接読み込めます。更新が公開されれば、チームはローカルでプロジェクトを起動したり開発サーバーに接続したりすることなく、新機能をレビューできます。QR スキャンまたは開発ビルド内の選択から更新を読み込むだけです。

GitHub と連携してワークフローを自動化する

Workflows はターミナルから手動で起動できますが、GitHub に統合すると毎日の開発プロセスに自然に溶け込みます。例えば、コミットやプルリクエストを作成したときに自動でワークフローをトリガーできます。GitHub リポジトリと EAS プロジェクトをリンクする手順:

  • アプリの GitHub リポジトリを用意する
  • GitHub のプロジェクト設定に移動する
  • プロンプトに従って GitHub アプリをインストールする
  • Expo プロジェクトに該当するリポジトリを選択して接続する

EAS Update を内部リリース向けに設定する

EAS Update を設定すると、重要な修正や改善、新機能を即座にプッシュできます。また、開発者と QA の内部イテレーションを高速化するのにも最適です。まず次を実行します:

`eas update:configure`

このコマンドは次を行います:

  • expo-updates を依存関係としてインストール
  • eas.json のビルドプロファイルにチャンネル(channel)を追加
  • app.jsonupdates オブジェクトを追加

例:eas.json の抜粋(チャンネルを追加)

{
    "cli": { "version": ">= 16.28.0", "appVersionSource": "remote" },
    "build": {
        "development": { "developmentClient": true, "distribution": "internal", "channel": "development" },
        "development-simulator": { "extends": "development", "ios": { "simulator": true } },
        "preview": { "distribution": "internal", "channel": "preview" },
        "production": { "autoIncrement": true, "channel": "production" }
    },
    "submit": { "production": {} }
}

channel プロパティは EAS Update がどこにアップデートを公開するかを決めるために使われます。上記では development-simulator のチャンネルを削除して development を継承させています。詳細はドキュメントを参照してください。

互換性のあるビルド vs 互換性がないビルド

なぜ一部のアップデートが即適用でき、他は新しい開発ビルドが必要になるのかを理解することが重要です。これが高速イテレーションを可能にする理由です。

  • 各ネイティブビルドには「ネイティブフィンガープリント(native fingerprint)」があります。これはネイティブ層に影響するプロジェクトの部分のスナップショットです。
  • ワークフローではフィンガープリントを比較して、既存の開発ビルドが互換性を持つかどうかを判断します。

定義:

  • 互換性のあるビルド(Compatible build)= アップデートを即公開できる。再インストールや再ビルド、待ち時間なしで QA やチームメンバーが数分で機能を試せる。
  • 互換性がないビルド(Incompatible build)= 新しい開発ビルドが必要。ネイティブコードを持つライブラリを追加したり、アプリ設定を変更した場合に発生する。

ネイティブ層に変更がなければ既存の開発ビルドでプレビュー可能です。変更がある場合はワークフローが新しい開発ビルドを作成してからアップデートを公開し、同一プルリクエストの一部としてプレビューを継続できるようにします。

これが EAS Update がコラボレーションに強力な理由の一つです。多くの機能開発(UI の磨き込み、ロジック調整、文言、スタイリング、ナビゲーション変更)はネイティブビルドを必要としないため、ビルド待ち時間をほぼ無視して視覚的かつ対話的に反復できます。

ワークフローが互換性をチェックしてアップデートを公開する流れ

作成するワークフローは次の手順で自動的に判断します:

  • Android、iOS、iOS シミュレータのフィンガープリントをチェック
  • 最速のパスを選択する:
    • 互換性があれば既存の開発ビルドを再利用
    • 必要な場合のみ新しい開発ビルドを生成
    • 常にプレビュー用のアップデートを配信

これにより、チームは可能な限り即座にワーク・イン・プログレス(WIP)をテストでき、必要なら自動的に再ビルドされます。

EAS Workflow ファイルを作成してビルドを生成またはアップデートを公開する

EAS のワークフローはすべて .eas/workflows ディレクトリに置きます。これによりワークフロー定義をコードと一緒にバージョン管理できます。

例のディレクトリ構成:

/
└── .eas/
    └── workflows/
        └── create-dev-build-or-update.yml
├── app/
├── eas.json
└── .. (他のファイル)

この例では create-dev-build-or-update.yml というワークフローを作成します。ローカルでディレクトリとファイルを手動作成するか、プロジェクトルートから次のコマンドで生成できます。

  • macOS:

    mkdir -p .eas/workflows && touch .eas/workflows/create-dev-build-or-update.yml

  • Windows:

    mkdir .eas\workflows && type nul > .eas\workflows\create-dev-build-or-update.yml

ワークフローファイルは YAML で記述します。GitHub Actions を使ったことがあるなら構文に馴染みがあるはずです。EAS Workflows は完全にカスタムなジョブを定義できますが、一般的なタスクをカバーする事前作成ジョブ(pre-packaged jobs)も多数用意されています。

このワークフローで使う主なジョブ:

  • Fingerprint
  • Get Build
  • Build
  • Update
  • GitHub Comment

以下はワークフローの例(抜粋)。YAML 構造は GitHub Actions に似ていますが、EAS 固有のジョブを使っています。

name : Create development builds or update
on :
  pull_request :
    branches : [ "*" ]
jobs :
  # Calculates a fingerprint of your project.
  # Used in determining compatibility between the native layer and JavaScript layer of your app
  # We will check this against the existing builds to see if we need to create a new build
  fingerprint :
    name : Fingerprint
    type : fingerprint
    environment : development

  # Checks for an existing android build according to the fingerprint
  get_android_build :
    name : Check for existing android build
    needs : [ fingerprint ]
    type : get-build
    environment : development
    params :
      fingerprint_hash : ${{ needs.fingerprint.outputs.android_fingerprint_hash }}
    profile : development

  # Checks for an existing ios build according to the fingerprint
  get_ios_build :
    name : Check for existing ios build
    needs : [ fingerprint ]
    type : get-build
    environment : development
    params :
      fingerprint_hash : ${{ needs.fingerprint.outputs.ios_fingerprint_hash }}
    profile : development

  # Checks for an existing ios simulator build according to the fingerprint
  get_ios_simulator_build :
    name : Check for existing ios simulator build
    needs : [ fingerprint ]
    type : get-build
    environment : development
    params :
      fingerprint_hash :

(ここでソースは途中まで示されていますが、この後は各 get_* ジョブの出力を評価して、既存ビルドを再利用するか新規に build ジョブを実行するかを分岐させ、最終的に update ジョブで OTA を公開し、github-comment ジョブで PR にビルド/アップデート情報と QR コードやリンクを投稿する流れになります。)


このガイドは、チームがプルリクエストごとに迅速にプレビューを提供し、デザイナー、QA、プロダクトとのフィードバックループを早めるための実践的な手順を示しました。必要であれば、ワークフロー YAML の詳細サンプルや、updatebuild ジョブの具体的な設定例を追加で提供できます。