【Day3】まずはフロントだけ開発環境を構築する

はじめに

勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。

個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。

↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした

前回のあらすじ

開発環境として以下を構築してみようと思ったのですが、見事失敗してしまいました泣

React（frontend）＋ FastAPI（backend）をマルチコンテナで動かしつつ、DevContainerとしてVS CodeでReact開発を中心に行える構成

Chat GPTに聞いてみた感じでは、Docker側とWSL側のフォルダ周りの権限でうまく整合性がとれていなさそうでした。

今回の方針

一気にバックエンドのコンテナも作らず、まずはフロント側のDockerコンテナにDevcontainerでリモートアクセスすることを目指します！

やったこと

最終的に色々作り直して、全部Gitに上げました！！

• 今はここまでできる状態です
  • WSLでプロジェクトルートでcode .を実行することでVS Codeが立ち上がり、そのままDevcontainerでコンテナ内にアクセスできる
  • コンテナ内でGit操作ができる（リモートリポジトリへのpushもできる）
  • コンテナ内でnpm run devでWebサーバーを起動できる

.devcontainer.json

• 工夫ポイント
  • serviceを切り替えるだけで、frontendもbackendもリモートアクセスできるようになる。はず…！
  • ログインユーザーはdevuserに統一
    • フロントでもバックでもコンテナではrootではなく別ユーザーを作る想定
  • devuserですべてのファイルを触れるように"postStartCommand": "chown -R devuser:devuser /home/devuser/workspace",で所有者権限を変更
    • この権限周りにめちゃくちゃ詰まった。。。コンテナは基本的にroot所有でファイルを作るので、root以外のユーザーだとファイル操作ができなくなってしまう
  • "overrideCommand": true,と"runArgs": ["sleep", "infinity"],のオプションにより、リモートアクセスするコンテナではサーバー起動をしないようにした
    • Devcontainerでリモートアクセスするコンテナは開発用と割り切って、サーバー起動は手動で行う
    • 逆にリモートアクセスしないコンテナはコンテナ起動と同時にサーバーを起動させる

docker-compose.yml

• 工夫ポイント
  • context: ..にして、volumesに..:/home/devuser/workspaceと設定することで.devcontainer以下のフォルダ、つまり、.gitや.devcontainer自身もコンテナ内にマウントする
    • これにより、コンテナ内でgit操作できるし、コンテナ設定の変更→リビルドが容易になる！
  • node_modulesはDocker Volumeにする
    • これによりホットリロード高速化
    • （たぶんこれはコンテナ内でのNode開発のデファクトスタンダード？）

Dockerfile

• 工夫ポイント
  • 開発用に作成したdevuserにsudo権限を付与
  • よく使うエイリアスとかbashを便利にするコマンドは~/.bash_aliasesにあらかじめ書き込む
  • docker-compose.ymlでcontext: ..と設定したので、Dockerfile内での相対パスに注意！
    • このDockerfileで実行するコマンドはdocker-compose.ymlが存在する.devcontainerディレクトリの一個上、つまりプロジェクトのルートで実行されるので、ルートから見た相対パスを使う必要がある
    • だから、COPY frontend/package*.json ./ のコピー元はfrontend/がついている
  • CMDでサーバーが起動するようになっている
    • ただし、devcontainer.jsonでも説明したようにDevcontainerでリモートアクセスするときはサーバーが起動しないようにしている

おわりに

なんとかフロント側だけでも環境構築することができました、、、

コンテナでどうしても開発環境を作りたい、なんてこだわりがなければもっと早かったんだろうなぁ、、、と思ったり。
おかげで色々と勉強にはなりましたが、だいぶ長い道のりを歩んでしまいました。

めちゃくちゃChat GPTに聞いたし、ググったし、大変でした。。。こういう詰まったところをもっと丁寧に書くべきなんだろうけど、なかなか切羽詰まったときに１から証跡を残すのは難しいなぁ

そんでもって、本当にChat GPTがいない世界が考えられない。。。ありがとうChat GPT

次回はバックエンド側の開発環境を構築してみます。
どちらかというと先に開発したいのはバックエンド側だからな～～～　がんばろ！