Windows10 + Phoenix LiveView + VSCode + WSL2 + Docker プロジェクトを作成する手順

Phoenix では（デフォルトでは）PostgreSQL を使うのでコンテナを使いたいが、Windows からコンテナを使う場合、素朴なやり方だと Hot Reload 系が機能しない。
そのため、WSL2 からコンテナにつなげることで、 Hot Reload を機能させる。
また、VSCode の Remote Development を使うことで、コンテナのセットアップを簡単に行う。

重要なポイント

• 開発環境でコンテナを使う場合、VSCode の Remote Development を使うと楽。
  • ただし、 wsl2 中で Remote-Containers: Add Development Container Configuration Files... を実行するとエラーになる。
• 開発環境でコンテナを使う場合、プロジェクトがWindows 中にあると Hot reload 系が機能しない。そのため、プロジェクトを wsl2 中に作る必要がある。
  • 参考: https://levelup.gitconnected.com/docker-desktop-on-wsl2-the-problem-with-mixing-file-systems-a8b5dcd79b22

前準備

• Windows
  • wsl2 をインストールして設定する。
    • ディストリビューションは Ubuntu 22.4 にする。
    • 参考: https://qiita.com/zazaza/items/013ad0b0d06bd0bef326
  • VSCode をインストールして Remote Development を入れる。
  • Docker Desktop をインストールして設定する。

大まかな手順

1. Windows 中でプロジェクトを作成し、コンテナの設定をする。
2. WSL2 中でプロジェクトを作成し、Windows 中のプロジェクトにあるコンテナの設定を WSL2 の方にコピーする。
3. WSL2 中のプロジェクトからコンテナを作成する。
4. プロジェクトに Phoenix を入れる。

手順

ここでは、プロジェクトの名前を MyApp とする。

1. Windows 中にプロジェクトのディレクトリを作成し、 VSCode で開く。
   1. プロジェクトのディレクトリ my_app/ を作成する。
      1. セットアップ後は使わないので、適当な位置でいい。
   2. my_app/ で VSCode を開く (code my_app/).
2. コンテナの設定をする。
   1. VSCode で Command Palette (Ctrl + Shift + P) を開き、 Remote-Containers: Add Development Container Configuration Files... を実行する。
   2. Show All Definitions... -> Elixir, Phoenix, Node.js & PostgresSQL を選ぶ。
   3. .devcontainer/docker-compose.yml を編集する。
      1. services.db.environment.POSTGRES_DB を my_app_dev へ変更する。
      2. （任意）services.elixir.build.args を編集して Elixir 等のバージョンを変える。
   4. その他任意で設定を変更する。
3. WSL2 中にプロジェクトのディレクトリを作成し、 VSCode で開く。
   1. プロジェクトのディレクトリ my_app/ を作成する。
      1. /mnt/c/ 以下に作成すると Windows 中にプロジェクトを作ることになるので、別の場所に作る。
   2. my_app/ で VSCode を開く (code my_app/).
      1. このとき、 VSCode は WSL2 に接続されていなければならない。
         VSCode の左下にある緑のアイコンに WSL: Ubuntu-22.04 と書かれてないなら、アイコンをクリックして Reopen Folder in WSL -> Ubuntu-22.04 を選ぶことで、 WSL2 に接続した状態で VSCode を開ける。
         
4. Windows 中の my_app/.devcontainer/ を WSL2 中の my_app/.devcontainer/ へコピーする。
   1. Windows の \\wsl$\Ubuntu-22.04\ 以下に Ubuntu のディレクトリがあるので、そこへコピーする。
   2. コピーができないなら、Windows 中のプロジェクトをリモートリポジトリに push し、 WSL2 中のプロジェクトでそれを pull してもいい。
5. （任意）Windows 中の my_app/ はもう使わないので消す。
6. WSL2 に接続している VSCode で、Command Palette から、 Remote-Containers: Rebuild and Reopen in Container を実行する。
   1. 2022-08-16 時点、なぜか https://raw.githubusercontent.com/microsoft/vscode-dev-containers/v0.245.0/script-library/common-debian.sh のチェックサムが合わなかったため、このファイルをブラウザからダウンロードし、自前で SHA-256 チェックサムを計算して .devcontainer/Dockerfile の COMMON_SCRIPT_SHA を書き換えた。
7. Phoenix のプロジェクトを作る。
   1. mix phx.new . --app my_app を実行。
      1. --live オプションは今はいらない。
   2. （任意）./mix.exs の project 関数内にある compilers から :gettext を消す。
   3. mix ecto.create を実行。
   4. mix phx.server を実行して、ブラウザから localhost:4000 を読む。
   5. ./liv/my_app_web/templates/page/index.html.heex を適当に変更し、LiveReload が機能していることを確認する。
      1. heex を変更してもブラウザ上の表示が変わらないなら、 LiveReload は機能していない。プロジェクトが WSL2 中でなく Windows 中にあると思われる。
8. （任意）Tailwind CSS を入れる。
   1. 公式の記事を見てTailwind CSS を入れる。
9. （任意）Tailwind CSS に加えて daisyUI を入れる。
   1. my_app/assets に移動し、 npm i daisyui を実行する。
   2. my_app/mix.exs にある aliases 関数の setup に、 ~S{run -e 'System.cmd("npm", ["install"], cd: "./assets")' } を加える。
      setup: [...], -> setup: [..., ~S{run -e 'System.cmd("npm", ["install"], cd: "./assets")' }],