React Native + Expo - GitHub連携でApp Store Connectに成果物をアップロードするまで

https://docs.expo.dev/get-started/create-a-project/

React Native + Expoベースで書いてみる。


pnpm dlx create-expo-app@latest --template default@sdk-55
...
✅ Your project is ready!

To run your project, navigate to the directory and run one of the following pnpm commands.

- cd hoge-app
- pnpm run android
- pnpm run ios
- pnpm run web


iOSで立ち上げる。

pnpm run ios


pnpm run iosのみで、mac os上ではiOSシミュレーターが立ち上がる。

(これはXcodeが事前にinstallされていたため...？)

スマートフォンにExpo Goをインストールした状態で、pnpm run iosを実行時に表示されるQRコードをスマートフォンのカメラで読み込むと実機確認も行えるらしい、が

Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundled 475ms node_modules/expo-router/entry.js (1505 modules)
ERROR Project is incompatible with this version of Expo Go

The project you requested requires a newer version of Expo Go.

How to fix this error:

Download the latest version of Expo Go from the App Store.

のようなエラーが発生。


スマートフォンにインストールしたExpo Goがsdk-55のバージョンに対応してないことが原因で発生している模様。

バージョンをsdk-54に落として再度pnpm dlx create-expo-app@latest --template default@sdk-54を実行してみるとエラーが発生しなくなった。


実際に開発をはじめるタイミングではボイラープレートを削除すると良い。

$ pnpm run reset-project


CI経由でApp Store Connectと連携する

https://docs.expo.dev/submit/ios/


開発したアプリケーションをApp Storeで公開するためにはApp Store Connectに成果物をアップロードする必要がある。

出てくるEASとはExpo Application Servicesのことで、CI/CDサービスを展開している。

.eas/workflows/hoge.ymlでEASのCI/CD機能を直接使う方法か、.github/workflow/hoge.ymlでGitHub Actionsのような他のCI/CDを経由してEASを使う方法の二通りがある。


手動でApp Store Connectに成果物をアップロードする


まずはlocalで検証するためにローカルにeas-cliをインストールする。あらかじめEAS上でアカウントを作成しておいて、eas loginは-bのブラウザーオプションで実行すると簡単。

pnpm add -g eas-cli
eas login -b


この時点でApple Developerのアカウント情報が求められる。規約に同意していない場合などは規約同意も必要。

eas build --platform ios --profile production


submitコマンドまでを実行することで、App Store Connect上にアプリケーションがアップロードされ、test flightをテストすることができる状態となる。

eas submit --platform ios


CI経由でApp Store Connectに成果物をアップロードする


eas credentials --platform ios

"App Store Connect: Manage your API Key"を選択する。

この状態で、EAS上のProject settingsからgithub repositoryを選択肢、GitHub Appを対象のrepositoryにインストールする。

以下のような.eas/workflows/submit-ios.ymlをrepository内に配置することでEAS経由でビルドを行うことができる。

name: Build and upload iOS

on:
push:
branches:
- main

jobs:
build_ios:
name: Build iOS
type: build
params:
platform: ios
profile: production

submit_ios:
name: Upload to App Store Connect
type: submit
needs:
- build_ios
params:
build_id: ${{ needs.build_ios.outputs.build_id }}
profile: production


EASの無料枠では、iOSのビルドは月15ビルドまでとなっているため、複数アプリ管理や頻繁な更新でこれをオーバーする場合はGitHub Actions上でのビルド&アップロードに寄せるという手もあるかもしれない。困らないうちはEAS workflowsだけで完結してしまったほうが設定が簡単。


npmコマンドの使い分け

$expo start --dev-client

JavaScript の開発サーバーを立ち上げるコマンド。Metro が 8081 で常駐し、React Native のコード変更を配信する。普段の UI 修正やロジック修正、hot reload を効かせたいときはこのコマンドを実行しつつhot reloadで十分。


$expo run:ios --no-bundler -d "<simulator-name>"

iOS ネイティブアプリをビルドして simulator にインストールするコマンド。Swift / Pod / native module / Expo config など、ネイティブ側の変更を反映したいときに必要。こちらは常駐せずにbuild と install が終われば終了する。

Related Articles