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

## 背景
最近、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](https://aws.amazon.com/jp/cloud9/pricing/)
アカウントにログインしたら、[こちら](https://ap-northeast-1.console.aws.amazon.com/cloud9/home/product)からCluod9にアクセスし、、、
<img width="1218" alt="スクリーンショット 2020-04-20 12.13.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/5ccfaf0b-0b44-1ad9-8b9f-b8867a012c7b.png">
???「うわぁああああ エイゴだああああ」
僕「コワクナイヨー」
矢印から、 Create Environmentを選択し、

<img width="973" alt="スクリーンショット 2020-04-20 12.16.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/2d6b5aaa-cd36-aabb-a185-9fe912abd33c.png">
なんでもいいので名前を入力し、

<img width="1006" alt="スクリーンショット 2020-04-20 12.17.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/a26bb192-f0d8-6b89-c87a-c07f1d8cb7cf.png">
たくさん設定がありますが、全部デフォルトでok

進めていくと、作成され、Cloud9のIDEが出てくるはずですね。
<img width="1223" alt="スクリーンショット 2020-04-20 12.19.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/cc095fb6-f66c-eb38-a996-b599378e85c1.png">

以後のステップは、このターミナルで行います。
<img width="1226" alt="スクリーンショット 2020-04-20 12.21.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/6bfe620d-098d-74ef-c75a-d060120d262e.png">


### 2. nvmを最新にする
一言メモ: nvmとはNode Version Managerの略です。
「node.jsはバージョン依存度が高いため、バージョン管理ツールが必須です。」
「Cloud9ではnvmとNode.jsは既にプリインストールされています。」
[Node Version Manager](https://qiita.com/blackcat5016/items/026c469ef5fe7f6974d6)


```
$ 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】グローバルインストールは控えるべき](https://mosapride.com/index.php/2018/02/06/post-681/)

今の僕 「じゃあ何はグローバルにするの？」
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の細かい挙動の違いまとめ] (https://qiita.com/ggg-mzkr/items/152d222d688fdfef5142)

```
$ 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から読み取って
…
あれ、エラーだ
![86928.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/847a6c28-e399-6baf-c7f4-87cdd1022c23.jpeg)


### 9. 8は失敗するので、ポートを開放し、外部アクセス可能にする
それもそのはず。開発環境を外部に公開してないのだから、Cloud9で起動しているEC2と同じネットワーク内に居ないと怒られてしまう。エラーは単に接続エラーだけど。
Cloud9はデフォルトでは、8080番ポートをweb用に公開しているのみなので、Expoでよく使う19000~19006くらいまでのポートを外部公開しなければ、スマホからアクセスできません。
ということで、EC2へアクセスしてください。
![スクリーンショット 2020-04-20 11.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/a61641fc-5516-221f-ee17-1f9753ad1b2a.png)
その後、セキュリティグループを選択。
「aws-cloud9-あなたのCloud9のEnvironment名-~~」を選択(画像だと一番上)

インバウンドルールの設定で以下のように追加します。
![スクリーンショット 2020-04-20 11.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/1ec054b3-1963-e4bd-84c2-0c21236538ad.png)
19000-19006ポートを、任意のところからアクセス出来るようにしています。

次に、EC2のインスタンスを確認し、外部IPを確認します。
![スクリーンショット 2020-04-20 11.31.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/ff849b9d-f5ca-7ee1-487c-b64e20f73ff9.png)
これが仮に 10.10.10.10だとすると、
[exp://10.10.10.10](exp://10.10.10.10)
という文字列を作成してください。

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

![86927.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/ab211684-e45d-4f60-ac05-79811e4cd959.jpeg)

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

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

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

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

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

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

![スクリーンショット 2020-04-20 12.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77708/c2105e57-b1bf-08ff-ed64-36ec80a66e71.png)
chromeでは警告が表示されますが、詳細→〇〇にアクセスする をクリック

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

[【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】](https://note.com/cube0529/n/n4a130029dfe1)
初心者はこれおすすめです。

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

### お役に立ちましたか？
いいねとストックで教えて下さい。もしくは彼女をください。