お詫び

結構レベルの高い話をしますが、ツールの使い方を知ってるかどうかぐらいだと思っているので、開発環境構築に苦しむフロントエンジニア向けの話として聞いてください。
デザイナーさんにDocker使えは酷な気がしています（もちろん、出来るのが理想です）

解説

タイトルに情報を詰め込みすぎてわけが分からなくなってますが、時系列に直すとこんな感じ。

1. gatsby clean && gatsby build && gatsby serve で画面が真っ白になった
2. gatsby develop でアクセスする開発環境には問題ない
3. npmかyarnかその辺りがなんかおかしくなったんだろうと思って（開発あるある）いったんアンインストール
4. macを使っているのでhomebrewで入れ直す。
   1. yarn global remove gatsby-cli 消す
   2. brew uninstall yarn 消す
   3. brew uninstall npm(node) 消す
   4. brew cleanup する
   5. brew doctor で変なのが残ってたら対応する。たぶんxcodeを再インストールする必要があるかも
5. 念の為プロセスを再起動（通常はターミナル。VSCode使ってたら丸ごと）
6. brew install yarn 入れる
7. yarn global add gatsby-cli 入れる
8. gatsby serve
9. ブラウザで開く

結果はダメでした…。
たぶんnodeだかnpm（こっちは致命的）のバージョンが変わった気がするので、nodebrew みたいなのでなんとかするしかないなぁ、と思って絶望していました。
そんな手間臭い事をするなら、最初からGatsbyが動いてるDockerコンテナ建ててその中でやればよくね？というのが本旨です。

手元で試した環境はMacですが、私は（数多あるゲームを快適に遊びたいために）Windowユーザーを自称して憚らないのでWindowsにも配慮したお話をしたい。
WindowsだとHyper-V使ったりWSLをサクッと初期化できますが、Macでそれをやると文鎮になりかねないらしいので、ターミナルの環境が汚れたぐらいで初期化はできません。
これだけでイケてない感が伝わってほしい。

諸注意

Hyper-V使う人はDockerである必要すらないです。
GUIが前提なのでちょっと手間ですがDocker for Windows使う人はGUIがメインだろうなので、この辺りは気にせずやります。
なお、Hyper-Vが使えない（Homeユーザー）場合はDocker for Windowsしか使えません。
Proしか持ってないので未検証ですが、Docker for Windowsが使えない場合はVagrant + VirtualBoxを試してみてください。

まずはDocker for Macを入れる

前述の通り、私はWindowsユーザーです。GUIじゃないとすぐにやる気をなくして横になる子です。
公式サイトからインストーラーを持ってきます。
ダウンロードしたりアプリケーションの移動に時間がかかりますが、気長に待ちましょう。
動いたらDockerhubのアカウントでログインして、おもむろにターミナルを起動して言われた通りにdocker run -d -p 80:80 docker/getting-started を実行しましょう。
完了後、Localになんか新しいコンテナが出来ているのを確認できるはず。
ターミナル側では、これでコンテナに入っているので後は煮るなり焼くなり。
おすすめは、gatsbyが最初から入っているコンテナを使うこと。設定要らずでサクッとcloneしよう。

問題発生！

おや、これは…？
[DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる(Qiita)](https://qiita.com/yuki_ycino/items/cb21cf91a39ddd61f484)

いまからVagrant入れるのダルい…。
[Webサイト高速化のための 静的サイトジェネレーター活用入門本](https://amzn.to/2N41D1Y)からラクするヒントを求める。



が、こういった本は解決方法は書いていないのであった。

反省

ログでこんなん出てたから、gatsby build に失敗してんだなーぐらいしか思ってなかった。
先述の通り、ちゃんと.cache消してたしないわけないじゃん！と思ってたらこれだ。
そもそも、gatsby develop は成功しているわけだからビルドに問題があったわけじゃないと気づくのが遅すぎたのも問題。

オチ

ブラウザのキャッシュも消しましょう。
普段使いのブラウザとは別に開発用のブラウザを使うのはフロントエンドエンジニアなら当たり前だよね〜、というでっかいブーメランを置いときます。

久しぶりにフロントエンド触って楽しい！！ってなってたらこんなオチとは。