React Native + Expo アプリをDeploy(ネイティブビルド)する

この記事は、「[【連載】初めてのReact Native + Expo開発環境構築入門](https://qiita.com/hitotch/items/5142fff638c7805d84d5)」の子記事です。環境などの条件は、親記事をご覧ください。

---

　今回は、Expoで作ったアプリを、Androidのネイティブアプリとしてビルド（Deploy）します。
　この記事では、[前々回](https://qiita.com/hitotch/items/f563ec8a60f05bb7edd8)までで作成途中のHello Worldアプリ（請求書アプリモックアップ）をDeployします。[公式ドキュメントはこちら](https://docs.expo.io/versions/latest/distribution/building-standalone-apps/)。

　なお、expo-cliがグローバルインストールされていることを前提とします。インストールしたかわからない場合は、[この連載の初回](https://qiita.com/hitotch/items/ea4de1ed408a9ca14fce)を御覧ください。

# WSLをオンにし、Ubuntuを入れる

　Windowsの場合は、まず内部的にLinuxが使える状態にしなくてはいけません。ExpoではUbuntuを推奨していますので、以下の手順で入れます。

　まず、**コントロールパネル→プログラム→Windows機能の有効化または無効化→Windows Subsystem for Linux**をオンにします。再起動を要求されたら再起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/b932330c-9b0b-cb5e-1616-7cf681e040bd.png)

　Microsoft Storeを開けて、Ubuntuを検索し、選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/fc392bf2-622f-2201-a1dd-5fc44f3f5135.png)

　Getボタンをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/a9c95052-5c64-6b1d-cca2-8787c6f487a8.png)

　ダウンロードが進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/11e45280-0dbd-0911-4419-7777a8435011.png)

　終わったらLaunch。または、スタートメニューからでも開始できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/e2e9d325-0a1c-7f2d-e46a-3d00c1effa88.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/1b6000cb-151b-dc64-e29b-a64fdc498688.png)

　Ubuntu初回起動で、インストーラーが走ります。少し待ちます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/9cfff690-1390-3731-8212-035bb0c37a9a.png)

　ユーザー名とパスワード（2回）を設定し、コマンドプロンプトになったらOKです。（以下の画面では大文字でユーザー名を入力しようとして1度怒られています。小文字で入れましょう。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/bf32caba-d637-a169-38ad-454e1e82961f.png)

# app.jsonにビルド情報を設定

　AndroidおよびiOS用にビルド情報を設定します。Visual Studio Codeでプロジェクトを開いて、以下の情報を入れます。通常であればAndroidとiOSの部分だけ追記すればよいはずです。
　**"com.yourcompany.yourappname"**部分は、会社のWeb URLの逆（example.comならcom.example）を入れて、さらにアプリのslugを入れるとよいでしょう。ただし、Androidのpackage名には**ハイフンが使えない**ので、ハイフンはアンダースコアに置き換えましょう。（- → _）

```json:app.json
 {
   "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug",
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname"
    },
    "android": {
      "package": "com.yourcompany.yourappname"
    }
   }
 }
```

# ビルドを開始する

　Visual Studio CodeのPowerShellで、ビルドを実行します。

```
expo build:android -t apk
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/7d9198c2-f389-5b0c-229c-b0655a580a5b.png)

　keystoreをアップロードするか聞かれるのですが、とりあえずここではExpoに任せる（**Let Expo handle the process!**）を選択します。

# ビルドエラーが出る場合

　以下のようなエラーが出て、ビルドが止まってしまう場合があります。[こちら](https://forums.expo.io/t/error-connect-econnrefused-127-0-0-1-19001/12535/2)でもレポートされています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/f82d9fde-f4ba-b4f1-adf7-8eb3c1153f98.png)

　この場合、別でPowerShellを立ち上げて、expo start してから、Visual Studio CodeのPowerShellに戻ってきてもう一度ビルドしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/1c7f4e55-992c-5ce9-f387-a7573cd79f7f.png)

# ビルド中・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/8eb24b61-9faa-0e7c-8880-8ca73de374f4.png)

そのうち、PowerShellではタイムアウトになってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/a6b40e3d-700e-3d7b-37ec-b614d65dd119.png)

　しかし、ビルドはExpoサーバーで続いています。ビルド中の状況は、Expo.ioにログインすることで、Web上で見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/d358c33d-2614-eb92-1cbf-ef39368b51c2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/449e2208-c528-ab5c-4461-480ccded5e7e.png)


ビルドIDをクリックすると、CLIの出力を直接見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/50e81f50-65cf-f553-cb43-465a9e41795f.png)

終わるまでひたすら待ちます。。。

# ビルド完了

　ビルドが完了すると、Expo側で以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/4c4593b6-1348-b765-017b-0eee19883766.png)

　Downloadボタンから、APKがダウンロードできるので、そのままAndroid実機にインストールできます！