React Native&ExpoをCloud9で誰も失敗しない開発環境構築 2020年4月

9846 ワード
reactnative cloud9 expo cloud9 テキストリンク

背景

最近、macユーザーの私と、WindowsユーザーとでReact Nativeを使用しているのですが、Windows(特にWindows 10 Home)での同一の環境構築は難しくて手に負えなかったため、クラウドIDEを使用することにしました。
環境構築プロはDocker使うといいと思います。

この記事の仮想対象先

  • AWSやCloud9を触ったことある人
  • React Native初心者

(過去の私を対象としてお送りします)

手順というか解説

  1. Cloud9の環境(Environment)を作る
  2. nvmを最新にする
  3. nodeを最新安定版にする
  4. npmがきれいか確認する
  5. npmを最新にする
  6. npmのgrobalにexpo-cliだけを入れる
  7. expoコマンドで操作していく
  8. expoで新規アプリを作り、スマホからアクセスしてみる
  9. 8は失敗するので、ポートを開放し、外部アクセス可能にする
  10. expo webでwebから見てみる

1. Cloud9の環境(Environment)を作る

AWSのアカウントを作成してください。また、クレカを登録してください。
Cloud9は無料ではありません。格安ですが。
料金-AWS Cloud9
アカウントにログインしたら、こちらからCluod9にアクセスし、、、

???「うわぁああああ エイゴだああああ」
僕「コワクナイヨー」
矢印から、 Create Environmentを選択し、


なんでもいいので名前を入力し、


たくさん設定がありますが、全部デフォルトでok

進めていくと、作成され、Cloud9のIDEが出てくるはずですね。

以後のステップは、このターミナルで行います。

2. nvmを最新にする

一言メモ: nvmとはNode Version Managerの略です。
「node.jsはバージョン依存度が高いため、バージョン管理ツールが必須です。」
「Cloud9ではnvmとNode.jsは既にプリインストールされています。」
Node Version Manager

$ nvm --version
0.31.7

現在のnvmを知りましょう。0.31.7だそうです。
最新は0.35.3ですので、更新しましょう。

$ cd ~/.nvm
$ git fetch
$ git pull origin master
$ source ~/.nvm/nvm.sh
$ nvm --version
$ cd ~/environment
$ nvm --version
0.35.3

0.35.3に更新できました。

3. nodeを最新安定版にする

$ node -v
v10.20.1

現在のnodeを知りましょう。10.20.1だそうです。
最新安定版は12.16.2ですので、更新しましょう。

$ nvm ls-remote 
#インストールできるものの確認。LTS = Long Term Suppot(安定版)
$ nvm install v12.16.2
$ nvm alias default v12.16.2 
#打たないと新しいターミナルでは古いのがdefaultのままになってしまうよ
$ node -v
v12.16.2

v12.16.2に更新できました。

4. npmがきれいか確認する

一言メモ: npmでインストールしたパッケージは、「グローバル」か「ローカル」かに入る。グローバルでインストールすると、
利点：実行ファイルがパスの指定なしで実行できる。(ローカルはできない)
例：

$ npm install hoge -g 
# -gはグローバルの略。これからも出てきます。つけないとローカル
$ hoge -v
# hogeパッケージのバージョンが出る

欠点：プロジェクト内のpackage.jsonに記載されない。(ローカルは記載される)
そのため、git等でプロジェクトを共有した際に、グローバルインストールのバージョンが管理外になるため同一の環境になる保証がない。
【npm】グローバルインストールは控えるべき

今の僕 「じゃあ何はグローバルにするの？」
1週間後の僕「〇〇-cliってパッケージだけは npm install -g していいよ」

それを踏まえて、

$ npm list -g

現在のグローバルにインストールされてるパッケージ一覧。
色々出てきますが、大事なのは直下がnpmのみであること。
確認できましたね。きれいですね。

5. npmを最新にする

$ npm -v
6.14.4

現在のnpmを知りましょう。6.14.4だそうです。更新しましょう。

$ npm update -g npm
6.14.4

更新されない！ わけではありません。6.14.4が最新でした。

6. npmのgrobalにexpo-cliだけを入れる

ようやくです。ちなみに上記の手順をスキップすると、symlink貼るところとかでエラーが起きることが多いです。他にもいろんなエラーがががががが

$ npm install expo-cli -g

hapi(パッケージ名)の周りでいくらかwarnが出ました。きっとそのうちupdateで直るでしょう。

optionalをskipしてるのは正常。マシン依存のものをスキップしてくれてる。(mac専用のコマンドとかパッケージとか、そういうのをスキップ)

私は出ませんでしたが、もしerrorが出てたら、それは良くないです。
この先に進むのは非常によろしくないです。ググってなんとか解決を目指してください。

7. expoコマンドで操作していく

僕「expoとnpmとyarnと、なにが違うんだ？？」
1週間後の僕「npmとyarnはほぼ一緒。今回はyarnは入れてない。expoはcreate-react-native-app(パッケージ名)が進化した先。
expoコマンドは結構便利で、expo install パッケージ名 も出来るようになるぞ。
ちなみに expo install コマンドでは内部で npm install コマンドを叩いてるから、一緒だ。」
npmとyarnの細かい挙動の違いまとめ

$ nvm install(もしくは i) ~~ は
$ expo install ~~ で同じくインストール出来るので、今後はこっちを使用する。

8. expoで新規アプリを作り、スマホからアクセスしてみる

$ cd ~/environment
$ expo init sample(アプリ名)
blankを選択
エラーが起きずに終わったなら、
$ cd sample
$ npm start と見せかけて
$ expo start が良い(npmを使うのは基本なしにするって約束だ)

さて、出てきたQRコードを
AndroidならExpo AppのQRスキャンから読みとって
iOSなら普通のカメラAppから読み取って
…
あれ、エラーだ

9. 8は失敗するので、ポートを開放し、外部アクセス可能にする

それもそのはず。開発環境を外部に公開してないのだから、Cloud9で起動しているEC2と同じネットワーク内に居ないと怒られてしまう。エラーは単に接続エラーだけど。
Cloud9はデフォルトでは、8080番ポートをweb用に公開しているのみなので、Expoでよく使う19000~19006くらいまでのポートを外部公開しなければ、スマホからアクセスできません。
ということで、EC2へアクセスしてください。

その後、セキュリティグループを選択。
「aws-cloud9-あなたのCloud9のEnvironment名-~~」を選択(画像だと一番上)

インバウンドルールの設定で以下のように追加します。

19000-19006ポートを、任意のところからアクセス出来るようにしています。

次に、EC2のインスタンスを確認し、外部IPを確認します。

これが仮に 10.10.10.10だとすると、
exp://10.10.10.10
という文字列を作成してください。

  • Android
    • コピーして、Expoアプリから、クリップボードから起動をしてください。
  • iOS
    • LINEとかslackに貼り付けて、タップすることでアクセス出来るようになります。

大勝利。
後は各々お好きに開発してください。

10. expo webでwebから見てみる

$ expo web

でwebを使って確認出来るようになります。
certificateのエラーが起こりますが、コンパイルと起動は無事に出来るはずです。
sudoつけてやってくれと言われますが、無視します。(後述)

起動したらポート番号を教えてくれるはずなので、(私の環境では19006を指定していました)
先程取得した、インスタンスの外部IPを使って、
10.10.10.10:19006
とブラウザのURLに打ち込んでみますが、やはりエラーが。

この問題はSSL系の問題です。Let's Encrypt等を使えばなんとかなるのかもしれません(未確認)
Let's Encryptを使ってEC2にSSL証明書の発行から自動更新まで行う

それはそうと、自分で作ってるものなので、危険性を理解してレッツトライ。
https://10.10.10.10:19006
と、httpsを明示的に記載してアクセスしてください。


chromeでは警告が表示されますが、詳細→〇〇にアクセスする をクリック

大勝利。
後は各々お好きに開発してください。

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】
初心者はこれおすすめです。

他に知ったことメモ

  • EC2でsudo系を使おうとするときはだいたい何かがおかしい。
  • Cloud9で容量足りなくなることはなかなかないが、足りなくなったらEC2のボリュームからボリュームの変更で増やして、インスタンスの再起動をかけろ。
  • npm installによく付きがちな--saveは現在は何も意味がない。昔の名残。(今は内部で、--saveがついてたときにしてた処理もしている)

お役に立ちましたか？

いいねとストックで教えて下さい。もしくは彼女をください。