【Day2】開発環境を構築する、、、はずでした

はじめに

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

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

今回は前回考えた開発環境を実際に構築していこうと思います。

↓ これまでの内容
【Day 0】アプリが完成するまで毎日投稿
【Day 1】開発環境を考える

アプリ要件

進捗管理もかねて、毎回アプリ要件を載せます。

• 主な機能
  • 【未】アップロードされた画像に自動でInstagramのサムネイルサイズに合わせたフレームを作成する
    • フレームは白色
    • フレームにはカメラのExif情報（カメラの機種、レンズ、F値、ISO、シャッタースピード）を記載する
  • 【未】キャプションを自動生成する
    • カメラのExif情報（カメラの機種、レンズ、F値、ISO、シャッタースピード）を記載して、機種とレンズについてはハッシュタグも記載する

開発環境構築

今回の開発環境はこちらになります。
VS Codeのdevcontainerを使って、

• フロントエンド
  • React
• バックエンド
  • Fast API
• 開発ツール
  • VS Code
  • Docker

この構成で開発環境を構築する方法をChat GPTに聞いてみたところ、以下のような回答と各種設定ファイルを作ってもらいました。

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

作ってもらった各種設定ファイルをベースに、自分が普段使っている設定なども入れて、最終的には以下のようなファイルになりました。

ディレクトリ構成

project-root/
├── .devcontainer/
│   ├── devcontainer.json
│   └── docker-compose.yml
├── frontend/
│   ├── Dockerfile
│   └── （Reactアプリのファイル）
├── backend/
│   ├── Dockerfile
│   └── （FastAPIのファイル）

devcontainer.json

{
  "name": "react-fastapi-dev",
  "dockerComposeFile": [
    "docker-compose.yml"
  ],
  "service": "frontend",
  "workspaceFolder": "/workspace",
  "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind",
  "shutdownAction": "stopCompose",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-toolsai.jupyter",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
      ]
    }
  }
}

docker-compose.yml

version: "3.8"

services:
  frontend:
    build:
      context: ../frontend
    volumes:
      - ../frontend:/app
    working_dir: /app
    command: npm run dev
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build:
      context: ../backend
    volumes:
      - ../backend:/app
    working_dir: /app
    command: uvicorn main:app --reload --host 0.0.0.0 --port 8000
    ports:
      - "8000:8000"

Dockerfile（フロントエンド）

FROM node:22.4.1-bookworm

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

Dockerfile（バックエンドエンド）

FROM python:3.1③-slim

WORKDIR /app
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt
COPY . .

実際にDevcaotainerを起動してみる

上記の設定ファイルを揃えた最小構成がこんな感じになりました！

この状態でDevcaotainerを起動してみます。

結果、エラーになりました。泣

[1680 ms] Start: Run: docker ps -q -a --filter label=com.docker.compose.project=react-image-generator_devcontainer --filter label=com.docker.compose.service=frontend
[1735 ms] Start: Run: docker inspect --type container 4f126d322687
[2011 ms] Start: Inspecting container
[2011 ms] Start: Run: docker inspect --type container 4f126d3226875759284da538c021d07c882c9034f7e8f825f0a86754eabece74
[2042 ms] Start: Run in container: /bin/sh
[2044 ms] Start: Run in container: uname -m
[2107 ms] Shell server terminated (code: 1, signal: null)
[2107 ms] Error response from daemon: container 4f126d3226875759284da538c021d07c882c9034f7e8f825f0a86754eabece74 is not running
[2080 ms] Start: Run in container:  (command -v getent >/dev/null 2>&1 && getent passwd 'root' || grep -E '^root|^[^:]*:[^:]*:root:' /etc/passwd || true)
[2080 ms] Stdin closed!
[2109 ms] Error: An error occurred setting up the container.
[2109 ms]     at u6 (/home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js:412:3947)
[2109 ms]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[2109 ms]     at async Y6 (/home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js:484:4015)
[2110 ms]     at async BC (/home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js:484:4957)
[2110 ms]     at async p7 (/home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js:665:202)
[2110 ms]     at async d7 (/home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js:664:14804)
[2110 ms]     at async /home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js:484:1188
[2116 ms] Exit code 1
[2119 ms] Command failed: /home/[USERNAME]/.vscode-remote-containers/bin/848b80aeb52026648a8ff9f7c45a9b0a80641e2e/node /home/[USERNAME]/.vscode-remote-containers/dist/dev-containers-cli-0.413.0/dist/spec-node/devContainersSpecCLI.js up --container-session-data-folder /tmp/devcontainers-413323ef-cf59-4a57-97ad-0d4a9ffd8a6e1748990698526 --workspace-folder /home/[USERNAME]/workspace/my_devcontainers/node/React-Image-Generator --workspace-mount-consistency cached --gpu-availability detect --id-label devcontainer.local_folder=\\wsl.localhost\Ubuntu-24.04\home\[USERNAME]\workspace\my_devcontainers\node\React-Image-Generator --id-label devcontainer.config_file=/home/[USERNAME]/workspace/my_devcontainers/node/React-Image-Generator/.devcontainer/devcontainer.json --log-level debug --log-format json --config /home/[USERNAME]/workspace/my_devcontainers/node/React-Image-Generator/.devcontainer/devcontainer.json --default-user-env-probe loginInteractiveShell --mount type=volume,source=vscode,target=/vscode,external=true --mount type=bind,source=/run/user/1002/wayland-0,target=/tmp/vscode-wayland-e5f58f20-66eb-4d2d-a59f-f739c3cb8157.sock --skip-post-create --update-remote-user-uid-default on --mount-workspace-git-root --include-configuration --include-merged-configuration
[2119 ms] Exit code 1

エラー原因について

Chat GPTに聞いてみたところ、どうやら権限周りで引っかかっているようです。

ファイル権限がWSLとDockerで整合性が取れてない？？

解決までは時間がかかりそうです。泣

おわりに

今日は開発環境を構築するつもりでしたが、うまくいかず失敗に終わってしまいました。

いきなり2つのサーバーのコンテナを作ろうとしたからうまくいかなかったのかな、、、

進捗がなくて悔しいですが、
明日からはもうちょっと構成をそぎ落としてスモールスタートで進めていきたいと思います！