2020年2月22日

余裕できたので書くぞ〜〜〜無職は延々とドックフーディングできて最高という気持ちになった。

👨‍🔧バイト1: デプロイする人1

ちょっと前から手伝ってるモバイルWebアプリの開発。デプロイで詰まっていた。S3にホスティングするのだが、実はS3でWebアプリを公開するのが初めてで色々手間取った。NextJSから静的ビルドしたものをホスティングするのだが、ルーティングがうまくいかなかった。いわゆる /signin には繋がらなくて /sign.html にしたら繋がるが、リンクは *.htmlに貼られていないというやつである。これが、S3(もしくはCF)の問題なのか、NextJSのexportsの問題なのかが分からなかった。Netlifyだとrerloadの挙動を記述できるファイルがあってそれを書けばよいのだがS3でのデプロイは初めてだったので苦労した。

さらに厄介だったのがSafariだけ繋がらないという問題で、クッキーがつかないという問題で悩んでいた。それが原因で延々とsigninにリダイレクトされ、.htmlがなくてエラーページという流れになり辛い思いになった。これはSafariは同一ドメインからしか認証が通らない制限があってのことで、そのことを忘れていてバグを踏み続けていた(1週間は有効っていう話と混同していた。)。なのでAPIサーバーと同じサブドメインから入ることで解消できた。

普段はPCChromeで開発していて、今回のはスマホ専用のWebアプリでSafariでの疎通を早い段階でするとなったので踏み抜いてしまったバグだった。スマホWebの開発体験を上げるためにもちゃんと疎通テクニックをまとめようと思った。今日1日でだいぶん学んだ。

🖥趣味プログラミング: Nextjsコードリーディング

上の問題があって、その原因の切り分けも兼ねてNextjsのコードを読んだ。最初は next build と next export した結果を比較しようとしていたのだが、動的に差し込まれまくる webpackの断片が意味わからなさ過ぎて断念。CLIツールの中を読んで、どういう生成をしているのかを追っていった。結局、build/index.tsやexport/worker.ts というファイルが本丸なのだなと分かった。build/index.tsは結局は諸々の設定を受け取ってreact-domのSSRモジュールを呼び出して、JSXをHTMLに変換していて、その前にいろいろな設定をしていた。が、その設定はよく分からなくて、webpackの関数を呼び出したり、そのwebpackは独自のbabel-loaderが挟まっていたりでちゃんとは追いきれなかったがこの辺がファイルの分割やdyanim loadを担っているんだなってことはなんとなーくは雰囲気は感じ取れた。読んでみてフレームワークというよりコンパイラだなという認識を持った。時間さえかければ読み解いていけそうと楽観的に考えている。