This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

既存の EAS Workflows に web ビルドの EAS Hosting へのデプロイを追加し、Android と iOS のリリースと並行して配信する方法を学びます。

これまでの章で作ったワークフローは、Android と iOS を対象にしたものでした。これを拡張して、同じリリースに合わせて web ビルドも EAS Hosting へデプロイしてみましょう。

この章で学べること

• 静的な web ビルドを書き出すよう Expo プロジェクトを設定する
• preview.yml に web デプロイのジョブを追加して、本番以外の web ビルドを作成する
• production.yml に web デプロイのジョブを追加して、本番の web ビルドを作成する

EAS Hosting と deploy ジョブ

EAS Hosting は、Expo アプリの web ビルドをホスティング・デプロイするためのサービスです。各デプロイには固有の URL が割り当てられ、プロジェクトごとに 1 つの本番 URL があり、最後に本番としてデプロイした内容を配信します。

EAS Workflows の事前パッケージ済み deploy ジョブは、web のエクスポートを実行し、その出力を EAS Hosting にアップロードして、デプロイ先の URL をジョブの出力として返します。deploy ジョブには 2 つのパラメーターがあります。

静的エクスポートのために web.output を設定する

ワークフローに web デプロイのジョブを追加する前に、静的な web ビルドを書き出すよう Expo プロジェクトを設定する必要があります。app.json で web.output フィールドを static に設定します。

{
  "expo": {
    %%placeholder-start%%... %%placeholder-end%%
    "web": {
      "output": "static"
    }
  }
}

static は、EAS Hosting が配信できる静的な HTML・JavaScript・アセットファイルのディレクトリを生成するよう Expo CLI に指示します。Expo は single と server の出力にも対応していますが、static はどのホストでも配信できるプレーンなファイルを生成するので、ここではそれで十分です。

app.json を上のように設定したら、変更をコミットしてリポジトリの main ブランチにプッシュします。

web のプレビューデプロイを追加する

プレビューデプロイと本番デプロイを分けるのが prod: true の指定です。プレビューにはデプロイごとに固有の URL が割り当てられます。プレビューワークフローは第 3 章のステップ 1 で作成しました。そのワークフローに deploy_web ジョブを追加して、新しいプレビュービルドを作成するたびに新しい web デプロイも得られるようにしましょう。

name: Preview builds

jobs:
  # ... existing fingerprint, get-build, build_android, build_ios, notify jobs

  deploy_web:
    name: Deploy web (preview)
    type: deploy

3

ワークフローをテストする

続いて、次のコマンドでプレビューワークフローを手動で実行します。

Terminal

コピー

- eas workflow:run .eas/workflows/preview.yml

EAS ダッシュボードでは、プレビューワークフローの実行にビルドジョブと並んで deploy_web ジョブが表示されます。

Deploy web (preview) の下にある View Deployment リンクをクリックすると、デプロイされた web ビルドがブラウザーで開きます。

web の本番デプロイを追加する

第 6 章のステップ 1 の本番ワークフローは、新しい Git タグをプッシュしたときに実行され、ネイティブアプリのビルドまたはアップデートを行います。そのワークフローに deploy_web ジョブを追加して、アプリの新しいバージョンをリリースすると web 版も本番 URL 上で更新されるようにしましょう。

name: Deploy to production

on:
  push:
    tags: ['v*.*.*']

jobs:
  # ... existing fingerprint, get-build, build, update jobs ...

  deploy_web:
    name: Deploy web (production)
    type: deploy
    params:
      prod: true

まとめ

EAS Workflows を使いこなすための次のステップを学びましょう。