<h1 id="%E6%9C%AC%E8%A8%98%E4%BA%8B%E3%81%AE%E5%86%85%E5%AE%B9">
<a class="header-anchor-link" href="#%E6%9C%AC%E8%A8%98%E4%BA%8B%E3%81%AE%E5%86%85%E5%AE%B9" aria-hidden="true"></a> 本記事の内容</h1>
<p>iOS/Androidアプリを、ほとんど同じコードで開発できてしまうフレームワークであるReact Native。そしてそれを支える便利なツールチェーンであるExpo。また、環境構築での悩み・ストレスを吹っ飛ばしてくれるDocker。</p>
<p>どれも便利すぎて大好きな技術ですが、、、「<strong>これらを組み合わたら(ほとんど)コマンド1つでゼロからアプリ開発環境ができるんじゃね!?</strong>」と思い、やってみました!! (需要が有るかはさておき...)</p>
<h1 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> サンプルコード</h1>
<p><a href="https://github.com/Hibagon1go/react_native_expo_docker_sample" target="_blank" rel="nofollow noopener noreferrer">こちら</a>に上げています。</p>
<p>試す場合は以下のコマンドを順に実行してみて下さい。(<a href="https://expo.dev/client" target="_blank" rel="nofollow noopener noreferrer">Expo Go</a>は前提としています。端末はホストPCと同じネットワーク内で)</p>
<ol>
<li><code>git clone https://github.com/Hibagon1go/react_native_expo_docker_sample.git</code></li>
<li><code>cd react_native_expo_docker_sample</code></li>
<li><code>make expo_sample</code></li>
<li><code>expo init your_app_name</code></li>
<li><code>cd your_app_name</code></li>
<li><code>expo start</code></li>
<li>ホストPCと同じネットワーク内の端末で、Expo Goアプリからアプリを起動</li>
</ol>
<h1 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h1>
<p>Dockerさえ入っていればOKです！</p>
<h1 id="%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%86%85%E5%AE%B9">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%86%85%E5%AE%B9" aria-hidden="true"></a> コードの内容</h1>
<ul>
<li><a href="https://qiita.com/wf-yamaday/items/2ad9f230ce0a230d88c0" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/wf-yamaday/items/2ad9f230ce0a230d88c0</a></li>
<li><a href="https://qiita.com/hidenoritoki/items/9cd972ba102d12faec0e" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/hidenoritoki/items/9cd972ba102d12faec0e</a></li>
</ul>
<p>基本的には上記2つの記事を見て、いいとこ取りをしました。<br>
ここではポイントを3つ程、ご紹介したいと思います。</p>
<h2 id="1.-ip%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#1.-ip%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 1. IPアドレスの設定</h2>
<p>通常Expoでアプリを開発する際は、ホストPCでexpoサーバーを動かし、そこに端末のExpo Goアプリからアクセスしてアプリを動かします。<br>
アクセスの方法は、端末が、自分と同じネットワークの中からexpoサーバーが走っているホストを探します。つまり、<strong>端末とexpoサーバーのローカルIPアドレス(のネットワーク部分)が同じ</strong>である必要があります。</p>
<p>さて今回は、ホストPCのdockerコンテナ上でexpoサーバーが動かし、そこに端末からアクセスしたいわけです。もちろん今回も、端末とexpoサーバーは同じネットワークに存在しなければなりません。<br>
しかし何も設定せずにやろうとすると、端末からexpoサーバーにアクセスできません。コンテナはホストPCのIPアドレスを知らず、<strong>コンテナ自身の(ホストPCとは関係のない)IPアドレスでexpoサーバーが走る</strong>ので、端末とexpoサーバーは同じネットワークにいないことになってしまいます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/25efca6ed63f-20211205.png" alt loading="lazy" class="md-img"><br>
(↑↑コンテナ自身のIPアドレスは172.22.0.2であると確認)</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4898aa8a7572-20211205.png" alt loading="lazy" class="md-img"></p>
<p>(↑↑何もしないと、コンテナ自身のIPアドレス172.22.0.2でexpoサーバーが走っているのがわかります)</p>
<hr>
<p>そこで、コンテナにホストPCのローカルIPアドレスを知らせ、expoサーバーをそこで動かしてやるようにします。具体的には、dockerコンテナの中に、<strong>環境変数</strong><code>REACT_NATIVE_PACKAGER_HOSTNAME</code><strong>としてホストPCのローカルIPアドレスを設定</strong>します。この環境変数は、<a href="https://github.com/Hibagon1go/react_native_expo_docker_sample/blob/main/.env" target="_blank" rel="nofollow noopener noreferrer">.envファイル</a>に書いておくと<code>docker-compose up</code>時に勝手に読み込んでくれます。</p>
<p>また、ローカルIPアドレスは、移動することなどで変化し、その度に調べて書き直すのは大変なので、ローカルIPアドレスの取得処理を<a href="https://github.com/Hibagon1go/react_native_expo_docker_sample/blob/main/get-local-ip-addr.sh" target="_blank" rel="nofollow noopener noreferrer">シェルスクリプト</a>に書いて、自動で.envファイルに書き込まれるようにすると便利です。ただし、参考した記事によると、これは<strong>macOS依存の記述</strong>のようなので注意してください。</p>
<p>これで、無事にホストPCのローカルIP(192.168.2.104)でexpoサーバーが動きます🎉</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/dc6d8dc3947f-20211205.png" alt loading="lazy" class="md-img"></p>
<h2 id="2.-%E3%83%9D%E3%83%BC%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#2.-%E3%83%9D%E3%83%BC%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 2. ポートの設定</h2>
<p>次はポートの設定です。基本的には、ホストとコンテナの間でポートがマッピングされていればOKで、docker-compose.ymlファイルに<a href="https://github.com/Hibagon1go/react_native_expo_docker_sample/blob/8a75fbb06a0750073a2006be3347b9d643718c0f/docker-compose.yml#L11-L14" target="_blank" rel="nofollow noopener noreferrer">このように</a>記述すれば良いです。</p>
<div class="code-block-container"><pre><code>ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
</code></pre></div><p>しかし、参考にした記事のように <code>docker-compose build</code>し、<code>docker-compose run</code>してコンテナの中に入り、そこでexpoサーバーを立ち上げて端末からアクセスしようとすると、うまくいきません。<br>
なぜだー、、と思ったんですが、<a href="https://docs.docker.jp/compose/reference/run.html" target="_blank" rel="nofollow noopener noreferrer">docker runの公式ドキュメント</a>や<a href="https://qiita.com/sekitaka_1214/items/3b5cfdd15fafb74789fa" target="_blank" rel="nofollow noopener noreferrer">こちらの記事</a>を読んで、<code>docker-compose run</code><strong>時には、</strong> <strong>docker-compose.ymlで記述しているポート情報は反映されない</strong>ことを知りました。(他のコンテナとのポートの競合の防止とかなんとか)</p>
<p>ということで、親の顔より見た<code>docker-compose up</code>を使い、<a href="https://github.com/Hibagon1go/react_native_expo_docker_sample/blob/8a75fbb06a0750073a2006be3347b9d643718c0f/Makefile#L4-L5" target="_blank" rel="nofollow noopener noreferrer">このようなコマンド</a>にすると、無事想定通りに動きました🎉</p>
<h2 id="3.-makefile%E3%81%A7%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%891%E7%99%BA!!">
<a class="header-anchor-link" href="#3.-makefile%E3%81%A7%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%891%E7%99%BA!!" aria-hidden="true"></a> 3. Makefileでコマンド1発!!</h2>
<p>最後に、今までの手順を一つのコマンドで一気にやってくれるようにMakefileを作成します。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">Makefile</span></div>
<pre><code>    expo_sample:
	    chmod +x ./get-local-ip-addr.sh
	    ./get-local-ip-addr.sh
	    docker-compose up -d
	    docker-compose exec expo_sample bash --login
	    
</code></pre>
</div><p>ホストPCのローカルIPを取得、.envに書き込み、コンテナを立ち上げて接続するという感じです。<br>
<code>make expo_sample</code>で実行できます。</p>
<p>コンテナに入れたら、<code>expo init your_app_name</code>でexpoアプリの雛形を作り、<code>cd your_app_name</code>の後、<code>expo start</code>でexpoサーバーを走らせます！そして、端末からExpo Goを用いてアクセスし、アプリを動かせます🎉</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f5df244e9571-20211205.jpeg" alt width="250" loading="lazy" class="md-img"></p>
<p>なお、ローカルにファイルをマウントしているので、ローカルでコードを変更したら、ちゃんとアプリもホットリロードされるはずです！</p>
<h1 id="%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8B%E7%82%B9">
<a class="header-anchor-link" href="#%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8B%E7%82%B9" aria-hidden="true"></a> 気になる点</h1>
<p>コンテナ内でサーバーを走らせているせいか、<code>expo init</code>や<code>expo start</code>の動作が少し重いような気がします。これはPCのスペックにもよるのかもしれませんが。</p>
<p>また、ローカルIPアドレス取得シェルスクリプトをmacOS以外にも使えるよう書けるといいなあと思います()</p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p>Dockerを用いて、コマンドをほぼ叩かずともexpoの開発環境を作れました！需要があるかわかりませんが、ぜひ参考になればと思います。<br>
なお、記事の内容に誤りや不備がございましたら、指摘していただけるとありがたいです🙇‍♂️</p>
<h1 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h1>
<p>弊社では、現役東大生の家庭教師がかんたんに見つかる家庭教師個人契約アプリ<a href="https://kateapp.page.link/ZE" target="_blank" rel="nofollow noopener noreferrer">カテアプリ東大生</a>を開発、運営しています。ぜひインストールしてみてください！<br>
UIUXでアドバイスなどあればぜひお願いします！</p>


ExpoをDocker上で動かしたい！ | React Native+Expo+Docker

Discussion