React Nativeで開発したiOSアプリを、Appleを介さずに特定少数のユーザに配布する方法

## はじめに

iOSアプリの作成時、デモをユーザに使ってもらって意見もらいたい。みたいなニーズあると思います。
ただ、iOSアプリを配布するにはいろいろと面倒な手順を踏む必要があります。
https://qiita.com/mokkos/items/85540e95404df4a9c5a4

今回は、そんな面倒な手順を避けて、「とりあえず特定少数のユーザにiOSアプリを配布する方法」を紹介します。

(「iOSアプリを配布」と言っていますが、正確には別アプリを介したエミュレータ上で実行させる方法になります。)

## 利用するサービス

iOSアプリを配布するために、Expoを利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/f7eb028f-65ba-2b90-3c5f-5a38b6b877e2.png)


>Expoは、ユニバーサルなReactアプリケーションのためのフレームワークであり、プラットフォームでもあります。React Nativeとネイティブプラットフォームを中心に構築された一連のツールとサービスであり、同じJavaScript/TypeScriptコードベースからiOS、Android、Webアプリを開発、構築、デプロイし、迅速に反復することができます。
https://docs.expo.dev/

Reactアプリの開発・デプロイをサポートするプラットフォームです。

今回は、Expo上にReact Nativeアプリをデプロイし、それをiPhoneのExpoアプリを介して動作させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/019e7064-acaa-9f26-cb5e-6f053dd1c95a.png)

## 手順

1. Expoのプロジェクト作成
1. Expoへデプロイ
1. iPhoneのExpoアプリから、デプロイしたアプリを動作させる

### Expoのプロジェクト作成

expo-cliをグローバルインストールし、expoプロジェクトを作成します。※
※git bashだとうまく動作しないので、コマンドプロンプト使ってください！

```
npm install --global expo-cli

expo init my-project
```

下記が出力されるため、今回は「blank(TypeScript)」を選択

```
┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (4.11.0).                │
│   You are currently using expo-cli 4.10.0                               │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
? Choose a template: » - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank               a minimal app as clean as an empty canvas
>   blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

```

作成が完了したら、プロジェクトフォルダへ移動し、起動してみる。

```

cd my-project

expo start

```

すると、下記画面がブラウザで確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/d2814ff7-75a6-0dbc-eede-b6ccecb4b93a.png)

左ペインの「Run in web browser」を押下すると、アプリ画面が表示される。
(表示される内容は、プロジェクトフォルダ下のApp.tsxです。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/7b29a42a-cc83-c909-58c3-c7ea954ded1e.png)

ここまでで、配布したいiOSアプリの用意ができました。

次に、今用意したiOSアプリをExpoにデプロイします。

### Expoへデプロイ

先に下記からExpoアカウントを作成します。
https://expo.dev/

次に下記を実行し、Expoへログインします。

```
expo login
```

その後下記を実行し、ログインしているExpoアカウントに対して、プロジェクトをデプロイします。

```
expo publish
```

以上で、Expoへのデプロイが完了です。
デプロイしたプロジェクトは、出力されるURLから参照できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/e48b5c45-ce85-0b9f-a4e3-cdba0c8451c3.png)

### iPhoneのExpoアプリから、デプロイしたアプリを動作させる

Expo上にデプロイが完了したので、本題であるiPhoneでデプロイしたアプリを動作させます。

まずiPhoneに下記アプリをインストールします。
https://apps.apple.com/jp/app/expo-go/id982107779
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/3ac3344f-c736-a81a-6835-8ba12c0daf1f.png)

アプリを起動し、「Profile」>「Sign up for Expo」を押下してExpoアカウントを作成します。※
※このExpoアカウントは、開発者用ではなく配布したい対象ユーザのアカウントになります。
![iOS の画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/b5a58020-0f57-f192-0905-b30d1eea1533.png)

次に下記にアクセスし、今作成したExpoアカウントをプロジェクトに招待します。
https://expo.dev/settings/members

Member roleは適したものを選択しましょう。
今回だと「Viewer」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/7b130da2-76ad-f2ff-0b41-62584048e96e.png)

プロジェクトに参加すると、Expoアプリから参加しているプロジェクトを確認できます。
![iOS の画像 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/f08a0b1f-9f4a-eb7c-3e0b-9f57b436746a.png)

プロジェクトを選択し、「CLASSIC RELEASE CHANNELS」を選択すると、アプリを動作させることができます。
![iOS の画像 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/dbafd839-d501-36bd-8ccc-4a3f1ae29604.png)

![iOS の画像 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/0cfa1d34-d646-2714-be18-df08dbf2826a.png)


## おわりに
面倒な手順を避けて、「とりあえず特定少数のユーザにiOSアプリを配布する方法」を紹介しました。

ちなみに、Expoプロジェクトに招待できるユーザ数は最大100人なので、100人までならAppStore介さずアプリを配布できます。
https://docs.expo.dev/accounts/working-together/#adding-members

また、Expoは正式にApp Storeに登録したい場合もサポートしてるので、デモ版を本記事のように配布して、本番をAppStoreで配布する運用も可能かと思います。
https://docs.expo.dev/distribution/app-stores/