Contents
前提条件とインストール手順
このセクションでは、Dev Container を利用するために最低限必要なツールとそのインストール方法を示します。
Docker と VS Code がそれぞれ最新の安定版であることが前提ですので、バージョン番号は「公式サイトで提供されている最新版」と表記しています。
必要なソフトウェア
| ツール | 用途 | 推奨インストール形態 |
|---|---|---|
| Docker Engine / Docker Desktop | コンテナの実行基盤 | macOS・Windows は Docker Desktop、Linux は Docker Engine（apt/yum でインストール） |
| Visual Studio Code | エディタ兼 IDE | 公式サイトからダウンロードし、最新版を使用 |
| Remote‑Containers 拡張機能 | VS Code とコンテナの連携 | VS Code の拡張マーケットプレイスで Remote - Containers をインストール（バージョンは「最新」） |
インストール手順（共通）
- Docker の導入
- 公式サイトから OS に合ったインストーラを取得し、画面の指示に従ってインストールします。
-
ターミナル/コマンドプロンプトで
docker versionを実行し、サーバとクライアント両方が表示されれば成功です。 -
VS Code の導入
- 公式サイトから最新の VS Code をダウンロードしてインストールします。
-
起動後に「ヘルプ」→「バージョン情報」を確認し、
1.90.x以上であることを確かめます。 -
Remote‑Containers 拡張機能の追加
- VS Code の左サイドバーから拡張機能ビューを開き、検索欄に
Remote - Containersと入力してインストールします。 - インストール完了後は再起動するか、コマンドパレットで Reload Window を実行してください。
ポイント：Docker Desktop の設定画面で「Use the WSL 2 based engine（Windows のみ）」や「Enable Kubernetes」など不要なオプションは無効化しておくとリソース消費が抑えられます。
Rails プロジェクト作成と .devcontainer ディレクトリ構築
この章では、Rails アプリ本体の生成から Dev Container 用設定ファイルを配置するまでの流れを示します。
rails-new は公式 CLI ではなく、コミュニティが提供しているテンプレートスクリプトであるため、本稿では標準 rails new コマンドをベースに説明します。
rails‑new スクリプトの取得とプロジェクト生成
「rails-new」は非公式のラッパーです。信頼性を担保するには、公式ドキュメントが示す rails new に必要なオプションだけ付与して実行します。
|
1 2 3 4 5 6 7 8 9 |
# 1. Rails 本体（7 系）をインストール（バージョンは「最新」） gem install rails # 2. プロジェクト作成（DB は PostgreSQL、bundle の自動実行はスキップ） rails new myapp --skip-bundle --database=postgresql # 3. 作業ディレクトリに移動 cd myapp |
--skip-bundleにより Gemfile の解決をコンテナ起動後のpostCreateCommandに委譲します。- この時点で
Gemfile.lockは空になるため、ローカル環境とコンテナ環境の差異が生じません。
.devcontainer ディレクトリ配下の構成
このディレクトリは VS Code が自動的に認識し、Dev Container のビルド・起動設定を保持します。
以下に最低限必要な 3 ファイルと補助ファイルの配置例を示します。
|
1 2 3 4 5 6 7 8 9 10 |
myapp/ ├─ .devcontainer/ │ ├─ devcontainer.json # VS Code 用メタ情報 │ ├─ Dockerfile # ベースイメージとツールチェーン │ └─ docker-compose.yml # アプリ・DB サービス定義 ├─ .vscode/ │ └─ launch.json # デバッグ設定（任意） ├─ app/ … └─ Gemfile |
- devcontainer.json は「どのサービスを開発コンテナとして扱うか」や「拡張機能の自動インストール」を宣言します。
- Dockerfile では Ruby 本体に加えて Node.js（LTS）と Yarn を追加し、フロントエンド資産のビルドを可能にします。
- docker-compose.yml は Rails アプリコンテナ (
app) と PostgreSQL コンテナ (db) のネットワーク・永続化設定を行います。
Dockerfile と docker‑compose の設定詳細
この章では、実際に動作する Dockerfile と compose ファイルの記述ポイントを解説します。
冗長なインストールや競合リスクが生じないよう、Node.js は nodesource リポジトリからのみ取得し、apt-get install nodejs は省きます。
Dockerfile（Ruby・Node/Yarn 環境構築）
導入文：公式 Ruby イメージに必要なパッケージと Node.js/LTS を追加するだけで、Rails 開発に必要なツール一式が揃います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
# .devcontainer/Dockerfile FROM ruby:3.2-bullseye # 基本的なビルドツールと PostgreSQL クライアントをインストール RUN apt-get update && \ apt-get install -y --no-install-recommends \ build-essential \ libpq-dev \ curl && \ rm -rf /var/lib/apt/lists/* # Node.js LTS (v20) と Yarn の導入（nodesource 経由のみ） RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \ apt-get install -y nodejs && \ corepack enable && \ corepack prepare yarn@1.22 --activate # Bundler を最新安定版に更新 RUN gem update --system && \ gem install bundler -v "~> 2.4" # VS Code が自動的にマウントする作業ディレクトリを指定 WORKDIR /workspace # 権限を vscode ユーザー（UID 1000）へ変更（ローカルでのファイル権限問題回避） RUN groupadd -g 1000 vscode && \ useradd -m -u 1000 -g vscode vscode && \ chown -R vscode:vscode /workspace |
- ポイント
apt-get install nodejsを二度書かないことでパッケージ競合を防止。corepackによる Yarn のインストールは公式が推奨する手順です。- 最後の
chownはコンテナ内で生成されるファイルがホスト側でも正しい所有者になるようにしています。
docker‑compose.yml（アプリ・DB の連携）
導入文：Rails コンテナ (app) と PostgreSQL コンテナ (db) を同一ネットワーク上に配置し、環境変数で接続情報を統一します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
# .devcontainer/docker-compose.yml version: "3.9" services: app: build: context: . dockerfile: Dockerfile command: sleep infinity # コンテナが終了しないように保持 volumes: - ..:/workspace:cached # プロジェクトルートをマウント ports: - "3000:3000" environment: RAILS_ENV: development DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB} env_file: .env # 環境変数は外部ファイルで管理 depends_on: - db db: image: postgres:16-alpine restart: unless-stopped environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: ${POSTGRES_PASSWORD} POSTGRES_DB: ${POSTGRES_DB} volumes: - pgdata:/var/lib/postgresql/data ports: - "5432:5432" volumes: pgdata: |
- 環境変数管理
POSTGRES_PASSWORDとPOSTGRES_DBは.envファイルに定義し、.gitignoreで除外します（後述）。DATABASE_URLの構築は Rails が自動的に認識できる形にしています。
devcontainer.json の必須項目
導入文：VS Code がコンテナ起動時に参照するメタ情報を記述し、拡張機能の自動インストールや初回コマンド実行を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "name": "Rails Dev Container", "dockerComposeFile": ["docker-compose.yml"], "service": "app", "workspaceFolder": "/workspace", "extensions": [ "rebornix.ruby", // Ruby 用 LSP とデバッグサポート "esbenp.prettier-vscode" ], "postCreateCommand": "bundle install && rails db:create", "remoteUser": "vscode" } |
postCreateCommandはコンテナが起動した直後に実行され、Gem のインストールと DB 初期化を自動化します。remoteUserにより権限問題を回避し、作業は非 root ユーザーで行われます。
VS Code でコンテナ起動・アプリ実行・デバッグ
この章では、VS Code 上で Dev Container を立ち上げ、Rails サーバを起動し、ブレークポイント付きデバッグを行う手順を解説します。
各操作は GUI とショートカットの両方で実行できるように記載しています。
コンテナの起動手順
- VS Code で myapp フォルダを開く。
- コマンドパレット（
Ctrl+Shift+P/⇧⌘P）で Dev Containers: Reopen in Container を選択。 - 初回は Docker がイメージビルドとコンテナ作成に数分かかりますが、2 回目以降はキャッシュが利用されて数秒で完了します。
ヒント：起動中のログは VS Code の「出力」タブ → 「Dev Containers」で確認できます。
アプリの起動とブラウザでの確認
コンテナ内ターミナル（VS Code が自動的に接続）で以下を実行します。
|
1 2 3 4 5 6 |
# 初回だけ DB を作成（2 回目以降は不要） rails db:create # サーバ起動（0.0.0.0 でバインドすることでホストからアクセス可能） rails server -b 0.0.0.0 -p 3000 |
ブラウザで http://localhost:3000 にアクセスすると、Rails のウェルカムページが表示されます。
VS Code デバッグ構成（launch.json）
導入文：Ruby 標準のデバッガー rdbg を利用すれば、ブレークポイント付きでサーバやテストを実行できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// .vscode/launch.json { "version": "0.2.0", "configurations": [ { "name": "Rails Server (Debug)", "type": "Ruby", "request": "launch", "program": "${workspaceFolder}/bin/rails", "args": ["server", "-b", "0.0.0.0"], "useBundler": true, "cwd": "${workspaceFolder}" }, { "name": "Rails Test (Debug)", "type": "Ruby", "request": "launch", "program": "${workspaceFolder}/bin/rails", "args": ["test"], "useBundler": true, "cwd": "${workspaceFolder}" } ] } |
- デバッグは VS Code の左サイドバーから「実行とデバッグ」を開き、上記構成のいずれかを選択すれば開始できます。
- テスト実行時にブレークポイントが有効になるため、失敗したテストケースをその場で調査できます。
トラブルシューティングとベストプラクティス
ここでは、開発中によく遭遇するエラーとその対処法、さらにチームでの環境共有に役立つ設定例をまとめます。
代表的なエラーと対処法
| エラー | 主な原因 | 推奨対策 |
|---|---|---|
| Docker Engine が起動しない | Hyper‑V/WSL2 の無効化、古い Docker Desktop | Docker Desktop を最新版に更新し、OS 再起動。Windows は「仮想マシンプラットフォーム」機能を有効化 |
| ポート 3000 が競合 | ホスト側で別プロセスが同ポート使用中 | docker-compose.yml の ports を "3001:3000" に変更し、ブラウザは localhost:3001 へ |
| Gemfile.lock の所有者が root | コンテナ起動時に root がファイルを書き出す | Dockerfile の最後で chown -R vscode:vscode /workspace を実行。postCreateCommand 前に sudo chown -R $(id -u):$(id -g) . |
| DB 接続エラー (PG::ConnectionBad) | DATABASE_URL が正しく設定されていない |
.env に POSTGRES_PASSWORD と POSTGRES_DB を記述し、compose で env_file: .env を指定。docker compose exec app env | grep DATABASE_URL で確認 |
環境変数管理と .gitignore の設定
機密情報（DB パスワード等）はリポジトリに含めず、.env ファイルでローカルだけ管理します。
以下は推奨する .gitignore と .env の例です。
|
1 2 3 4 5 6 7 8 9 |
# .gitignore (プロジェクトルート) .bundle/ log/ tmp/ node_modules/ vendor/bundle/ *.sqlite3 /.devcontainer/.env # 機密情報は除外 |
.devcontainer/.env のサンプル（実際のリポジトリには含めない）
|
1 2 3 4 |
# .devcontainer/.env (例) POSTGRES_PASSWORD=secure_password_123 POSTGRES_DB=myapp_development |
docker-compose.ymlのenv_file: .env行で自動的に読み込まれ、DATABASE_URLも${POSTGRES_PASSWORD}形式で参照できます。- CI 環境（GitHub Actions 等）では、シークレット変数を同名で設定し、
.envの代わりに環境変数として渡すだけで同一構成が利用可能です。
チームへの共有手順
- リポジトリをクローン
bash
git clone https://github.com/your-org/myapp.git
cd myapp - VS Code でフォルダを開く → 自動的に「Reopen in Container」バナーが表示されるので実行。
- 初回起動後、
postCreateCommandが走りbundle installとrails db:createが完了するまで待つ。
ベストプラクティス：
.devcontainerディレクトリは必ずバージョン管理し、Dockerfile・compose の変更は Pull Request でレビューすることで、環境のブレを防げます。
まとめ
- Docker と VS Code（Remote‑Containers）さえ導入すれば、Rails 開発に必要な Ruby / Node.js / PostgreSQL がすべてコードベースで再現可能です。
- 冗長なインストールは排除し、Node.js は nodesource のみから取得することで依存競合を防止しました。
- 環境変数は
.envファイルに集約し.gitignoreで除外すれば、機密情報の漏洩リスクも低減できます。 devcontainer.jsonのpostCreateCommandと VS Code デバッグ設定 (launch.json) により、コンテナ起動からコード実行・ブレークポイントまでシームレスに行えます。
この手順をプロジェクトのテンプレートとして保存すれば、新規メンバーが数分で同一環境を構築でき、開発スピードと品質の向上につながります。 Happy coding!