久し振りにネタが出来たので書きます。
趣旨
expoでスマホアプリを作る事になったのですが、
ある程度できて他の人に確認をして貰った時に
エラーが起きたのはいいけどエラー内容が全く分かりませんでした。
アプリはapkで渡していてブラックボックスでした。
という事でその人とも見える形でなんとかしたくて
二人ともアクセス可能なlinuxサーバを立ててそこで
metro bundlerを起動してwebで確認しよう、
っていうのが今回の趣旨です。
通常だとexpoの開発は自分のPCでexpo startして
動かしながら状態を確認しますが、
今回の場合はexpo開発者ではない人にも状況が
確認できるようにする必要がありました。
が、中々そういう事をしようとする人がいないらしく
ネットで調べても答えを見付けるのにひどく苦労しました。
結論
まず先に結論を書きます。
expo start
の前に
export EXPO_DEVTOOLS_LISTEN_ADDRESS=linux機のIP
とします。
デフォルト設定だと19002ポートはローカルホストからしかつながりません。
ここがハマりポイントです。
つまり各自のPCではなく二人が同時にアクセスできるように共通のサーバで
起動した場合デフォルトではそのサーバ内からしか19002につながらないんです。
これはlsof -i:19002で状況の確認ができます。
デフォルトの起動方法だとlocalhost:19002 (LISTEN)と出てきます。
EXPO_DEVTOOLS_LISTEN_ADDRESSを設定するとlsofの結果が
*:19002 (LISTEN)に変わります。
ちなみにこの設定が分かったのはDOCKER経由でやろうとした人が
同じようにハマってdockerファイルにこう書けば解決するよ！
みたいな記事を見たからです。
その設定だとEXPO_DEVTOOLS_LISTEN_ADDRESSは実機のIPではなく
0.0.0.0を設定してました。
なので「linux機のIP」と書いていた部分はもしかしたら0.0.0.0で
いけるのかもしれません。
以下、試行錯誤
1. enforce問題
最初にデフォルトの状態でexpo startして自分のPCからアクセスした時に
19001も19002も接続できませんでした。
これは色々調べた結果、CentOSだったのでenforceの問題っていうのが
調べたらわかりました。
（expoに限った問題じゃないのでexpo以外で調べて出てきました）
とりあえず解除して動かしてみたところ19001は接続できるようになりました。
が、19002が接続できません。
2. websocket問題
19002に直接接続できないならnginxでリバプロ立てればいけるんじゃないか？
って事で試しました。
結果はダメでした。
リバプロ自体はちゃんと機能しています。
ただ、真黒な画面が表示されるだけでそこから進展がありません。
chromeの開発ツールで通信を眺めつつ調べているとどうもwebsocketを
使っているんじゃないか？ってとこに行きつきました。
という事でnginxでのwebsocket対応というのを調べてやってみましたが
やはり真黒な画面から進みませんでした。
これに関しては確証はなく推測になりますが
websocketだと入口だけリバプロが機能してるけど
websocket通信部分がnginx経由ではなく直結してしまってて
それでダメなんじゃないかな？って思いました。
もしかしたら最初に書いた結論と関係があるかもしれなくて
接続元がローカル以外を弾いてるけどwebsocketだと接続元が
自分のPCになってそれで弾かれるのかと。
でも、これを書いている時点で気付いたのですが仮にそうだとすると
nginxの設定で実はイケてたのかもしれません。
nginxの設定は「proxy_set_header Host $host;」としていました。
この$hostがサーバ自身にしていればもしかしたらリバプロで
イケていたのかもしれません。
が、結局nginxダメだこりゃってなってリバプロ方法を捨てました。
他にもはまってた気がするけど大きなところではこれくらいですね。
一番のハマり処はなんといってもローカルからしかつながらない！ですね。