開発環境の作り方｜Dev ContainerとCodeiumの活用

開発環境の作り方

SHARE

目次

こんな方へ特におすすめ

  • これから本格的なWebアプリ開発を始めたい方
  • 自分だけの快適な開発環境を整えたい方
  • チーム開発で「自分の環境だけ動かない…」を撲滅したい方
  • PCを買い替えてもすぐに開発を再開したい方

概要

こんにちは。サイオステクノロジーのはらちゃんです！今回5本目のブログ執筆です。

今回は、バックエンド(Python/FastAPI)とフロントエンド(Node.js/React)を分離したモダンなWebアプリケーション開発を想定し、VS CodeのDev Container機能を使って、誰でも同じ環境を再現できる開発環境を構築する手順を解説します。

Dev Containerという最適解

新しいプロジェクトを始めるたびに
「Pythonのバージョンは…？」
「Node.jsのバージョンは…？」
と環境構築で時間を取られていませんか？Dev Containerは、Dockerコンテナーの技術を使い、プロジェクトごとに隔離された最適な開発環境をコード（設定ファイル）で管理できるVS Codeの素晴らしい機能です。

これを使えば、新しいメンバーも数コマンドであなたと全く同じ開発環境を立ち上げることができます。今回は、無料のAIコーディング支援ツールCodeiumも導入し、より快適な環境を目指します。

発生しがちなエラーとその解決策も詳しく紹介するので、ぜひ最後までお付き合いください！

Step０：前提条件

  • VSCodeがインストールされている
  • Docker DesktopまたはRancher Desktopがインストールされている
  • (Windowsの場合) WSL2が有効になっている

Step１：プロジェクトの骨格を作る

まず、プロジェクト全体のフォルダ構成を整え、Dockerで各サービス（バックエンド、フロントエンド、DB）をどう連携させるかを定義するdocker-compose.ymlを作成します。

ディレクトリの作成

以下のようなフォルダ構成を作成します。.devcontainerフォルダの中にbackendとfrontend のサブフォルダを作るのがポイントです。

HaraSpace/
│
├── .devcontainer/
│   │
│   ├── backend/
│   │   └── devcontainer.json
│   │
│   └── frontend/
│       └── devcontainer.json
│
├── backend/
│   │
│   ├── Dockerfile
│   └── requirements.txt
│
├── frontend/
│   │
│   ├── Dockerfile
│   └── package.json
│
├── docker-compose.yml
│
└── wait-for-it.sh

docker-compose.ymlの作成

プロジェクトのルートに、3つのサービスを定義するdocker-compose.ymlを作成します。

docker-compose.yml
services:
  backend:
    build:
      context: .
      dockerfile: backend/Dockerfile
      target: development # 開発用ステージを指定
    command: ["wait-for-it.sh", "db:3306", "--", "uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
    volumes:
      - ./backend:/workspace/backend
    ports:
      - "8000:8000"
    depends_on:
      - db

  frontend:
    build:
      context: .
      dockerfile: frontend/Dockerfile
      target: development # 開発用ステージを指定
    # --hostフラグでコンテナ外からのアクセスを許可
    command: ["npm", "run", "dev", "--", "--host"]
    volumes:
      - ./frontend:/workspace/frontend
    ports:
      - "3001:3000"
    depends_on:
      - backend

  db:
    image: mysql:8.0
    ports:
      - "3307:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=your_root_password
      - MYSQL_DATABASE=sql_app_db
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:

wait-for-it.sh ファイルの準備

GitHubからダウンロードし、プロジェクトのルートディレクトリ（docker-compose.ymlと同じ場所）に配置するのが一般的です。

Step２：各サービスの設計図を書く

次に、バックエンドとフロントエンドそれぞれのコンテナー環境の設計図となる Dockerfile を作成します。今回は、開発用と本番用で設定を分ける「多段ビルド」という手法を採用します。

バックエンド

現在の既定である、Python 3.12をベースイメージとして使用します。

backend/Dockerfile
# ---- 1. 全ステージで共通のベース ----
FROM python:3.12-slim as base
WORKDIR /workspace/backend
ENV PYTHONPATH "${PYTHONPATH}:/workspace/backend"

# wait-for-it.shをコピーして実行権限を付与
COPY wait-for-it.sh /usr/local/bin/wait-for-it.sh
RUN chmod +x /usr/local/bin/wait-for-it.sh

# 依存関係をインストール
COPY backend/requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

# ---- 2. 開発用ステージ ----
FROM base as development
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

# ---- 3. 本番用ステージ ----
FROM base as production
# (ここに本番用の設定を記述...)

同じディレクトリに必要なライブラリを記述します。

backend/requirements.txt
fastapi
uvicorn[standard]
pymysql

フロントエンド

Node.js 22をベースに使います。VS Codeとの相性を考慮し、alpine ではなく slim イメージを使うのが安定動作の鍵です。

frontend/Dockerfile
# ---- 1. ベースステージ (依存関係のインストール) ----
FROM node:22-slim as base
WORKDIR /workspace/frontend
COPY frontend/package*.json ./
RUN npm ci

# ---- 2. 開発用ステージ ----
FROM base as development
COPY frontend/ ./
EXPOSE 3000
CMD ["npm", "run", "dev", "--", "--host"]

# ---- 3. 本番用ステージ ----
FROM base as production
# (ここに本番用の設定を記述...)

フロントエンドも同じディレクトリに必要なライブラリを記述します。

手動でpackage.jsonを作成するよりも、Vite (ヴィート) ⚡ というツールを使ってプロジェクトの雛形を自動生成するのが現在の主流で、簡単かつ確実です。

frontend ディレクトリの中で以下のコマンドを一度実行するだけで、ReactやVueなどに最適化された最低限のpackage.jsonが自動的に作成されます。

まず、frontend ディレクトリに移動します。

bash
cd frontend

次に、Viteの作成コマンドを実行します。

bash
npm create vite@latest . -- --template react

このコマンドを実行すると、いくつかの質問をされますが、基本的にはEnterキーを押していけばOKです。

Step 3：VS Codeとコンテナーを繋ぐ設定

最後に、VS Codeに対して「どちらのコンテナーに接続して開発作業を行うか」を教えるための devcontainer.json を作成します。

バックエンド

backend/Dockerfile
{
  "name": "Backend Container",

  // 使用するdocker-compose.ymlのパスを、このファイルからの相対パスで指定
  "dockerComposeFile": [
    "../../docker-compose.yml"
  ],

  // docker-compose.ymlに定義したサービスの中から、接続したいサービス名を指定（最重要）
  "service": "backend",

  // コンテナに接続したときに開く作業フォルダ
  "workspaceFolder": "/workspace/backend",

  "customizations": {
    "vscode": {
      // Python開発に特化した拡張機能を追加
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance",
        "charliermarsh.ruff" // Python用の高速Linter
      ]
    }
  }
}

フロントエンド

frontend/Dockerfile
{
  "name": "Frontend Container",

  // 使用するdocker-compose.ymlのパス
  "dockerComposeFile": [
    "../../docker-compose.yml"
  ],

  // 今度は'frontend'サービスに接続するよう指定
  "service": "frontend",

  // フロントエンド用の作業フォルダを指定
  "workspaceFolder": "/workspace/frontend",

  "customizations": {
    "vscode": {
      // フロントエンド開発に特化した拡張機能を追加
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "Codeium.codeium"
      ]
    }
  },

  // フロントエンドのポートをフォワーディング
  "forwardPorts": [3001]
}

これで準備完了です！VS Codeでプロジェクトフォルダを開き、左下の緑色のアイコン >< をクリックして「コンテナーで再度開く (Reopen in Container)」を選択すると、バックエンドとフロントエンドのどちらで作業を開始するか選べるようになります！

ハマりどころを徹底解説！よくあるエラーと解決策

環境構築にはエラーがつきものです。今回私が遭遇した主なエラーとその解決策を共有します。

エラー1：wait-for-it.sh: not found や Dockerfile の変更が反映されない

  • 原因
    Dockerが古いイメージキャッシュを使い回している可能性があります。
  • 対処法
    VS Codeのコマンドパレット(Ctrl+Shift+P or Cmd+Shift+P)から Dev Containers: Rebuild and Reopen in Container を実行し、イメージを強制的に再構築します。

エラー2：port is already allocated (ポートが既に使用されている)

  • 原因
    以前のコンテナーが完全に停止しておらず、ポートを掴んだままになっています。
  • 対処法
    プロジェクトルートでターミナルを開き、docker compose down コマンドを実行して関連コンテナーをすべて停止・削除します。

エラー3：Exit code 137 (メモリ不足)

  • 原因
    Docker (特にRancher Desktop) に割り当てられたメモリが不足し、コンテナーがOSに強制終了させられています。
  • 対処法 (Rancher Desktopの場合):
    Windowsのユーザーフォルダ(C:\Users\<ユーザー名>)に .wslconfig というファイルを作成します。
    以下の内容を記述して保存します。(PCの搭載メモリに合わせて 8GB の部分を調整)
    PowerShellで wsl --shutdown を実行し、Rancher Desktopを再起動して設定を反映させます。

PowerShell
notepad .wslconfig

もしファイルがまだ存在しない場合、「新しいファイルを作成しますか？」と聞かれるので、「はい」をクリックしてください。メモ帳が起動します。


開いたメモ帳に、以下の内容をコピーして貼り付けてください。

[wsl2]
memory=8GB
processors=4

  • memory=8GB: WSL全体で使用できるメモリの上限を8GBに設定します。PCの搭載メモリの半分程度を目安に、6GBや12GBなどに調整してください。この設定が最も重要です。
  • processors=4: WSLが使用できるCPUコア数を4に設定します。PCのCPU性能に合わせて調整すると、より快適になります（省略しても構いません）。

この設定を有効にするには、WSLを完全にシャットダウンする必要があります。

PowerShellのウィンドウに戻り、以下のコマンドを打ち込んでEnterキーを押してください。

PowerShell
wsl --shutdown

コラム：Codeiumとは…

Codeiumは、AIを活用してコーディングを支援するツールです。無料で始められる手軽さと強力なコード補完機能で、GitHub Copilotの代替としても注目されています。

  • AIによるコード自動補完
    入力中のコードの続きを予測して、関数全体や定型文などを数行にわたって提案してくれます。
  • AIとのチャット
    エディタ内でAIチャットが利用できます。コードの解説、リファクタリング、テストコードの生成、デバッグの補助など、コーディングに関する様々な質問や依頼を自然言語で行えます。
  • 70以上の言語に対応
    PythonやJavaScriptといった主要な言語はもちろん、C++、Java、Goなど、70種類以上のプログラミング言語に対応しており、幅広い開発プロジェクトで利用できます。
  • 多くのエディタに対応
    Visual Studio Codeをはじめ、JetBrains製IDE（IntelliJ IDEA, PyCharmなど）、Vim/Neovim、Jupyter Notebookなど、普段使っている開発環境に拡張機能として簡単に追加できます。
  • プライバシーとセキュリティ
    Codeiumは、ユーザーのコードをAIの学習データとして保存しない仕組みを採用しています。そのため、企業の機密情報や個人のプロジェクトでも安心して利用できます。

まとめ

お疲れ様でした！今回は、バックエンドとフロントエンドを柔軟に切り替えながら開発できる、再現性の高いDev Container環境が完成しました。

最初は設定ファイルが多くて戸惑うかもしれませんが、一度この環境を構築してしまえば、あとは設定ファイルをGitで管理するだけで、チームメンバー全員が数分で全く同じ開発環境を手に入れることができます。

Githubに今回紹介した開発構成をプッシュしているのでそちらもご活用ください。

環境差異による不毛なトラブルから解放され、本来集中すべきアプリケーション開発に時間を使えるようになります。ぜひDev ContainerとCodeiumを活用して、快適な開発ライフを送ってください！

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

1人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

Microsoft Entra IDのユーザーパスワードを一括…

次の記事

AI協働開発の落とし穴回避！3ヶ月で実証した計画ドキュメントの…