【入門編】CursorとDockerを連携して爆速開発環境を構築する方法 – 軽量・高機能テキストエディタ生産性向上バイブル

こんにちは!開発現場を飛び回っていると、「ローカル環境の汚染」や「チームメンバー間での環境差異によるバグ」に頭を悩ませるシーンによく遭遇しますよね。

「自分のPCでは動いたのに、本番環境や同僚のPCでは動かない……」
このエンジニア永遠の悩みを美しく解決し、さらにAIの力で開発速度を何倍にも跳ね上げるのが、今回紹介する「Cursor × Docker」のコンテナ開発アプローチです。

この記事では、モダンなAI特化型エディタである「Cursor」をDockerコンテナの内部に完全に接続し、さらにDocker Composeを使って一瞬でローカル開発環境を立ち上げる手法を、初学者の方にも迷わないよう徹底的に優しく解説していきます。

これをマスターすれば、あなたの毎日のコーディング体験は劇的に、そして圧倒的に楽になりますよ。さあ、一緒に次世代の開発環境を手に入れましょう!

—

1. なぜ「Cursor × Docker」なのか?(アーキテクチャの理解)

まずは、「なぜわざわざDockerの中にCursorをつなぐのか」という本質を少しだけお話しさせてください。

通常、私たちはMacやWindowsといったホストOS上で直接エディタを動かし、Node.jsやPython、GoなどのランタイムをPCに直接インストールしがちです。しかし、これだとプロジェクトが増えるにつれてバージョン競合が起き、PCの中がカオスになってしまいます。

コンテナ開発の仕組み

Dockerを使うと、プロジェクトごとに独立した「ミニOS(コンテナ)」を作ることができます。Cursorの「Dev Containers」という強力な機能を使うと、「見た目は手元のCursorで操作しているのに、頭脳や実行環境(ターミナルやライブラリ)はすべてDockerコンテナの中にある」という状態を作れます。

[ あなたのPC (ホストOS) ]
┗ Cursor (UI/操作)
│ (SSH/ソケット通信)
▼
[ Docker コンテナ内部 ]
┣ ソースコード
┣ 開発言語・ライブラリ (Node.js, Python等)
┗ Cursor Server (コンテナ側で動く頭脳)

この構成の最大のメリットは、「PCに言語のランタイムを一切入れなくても、コンテナさえあれば完璧な環境で即座に開発・AIアシストが始められる」という点です。新しいメンバーが来ても、Dockerをインストールしてプロジェクトを開くだけで、3分で同じ環境が手に入ります。

—

2. 基礎セットアップ:環境の確認と拡張機能の導入

それでは、実際に手を動かしながら環境を整えていきましょう。

前提条件の確認

以下の2点がすでにインストールされている状態からスタートします。
1. Docker Desktop(起動しておいてください)
2. Cursor(公式サイトからインストールしたもの)

必須拡張機能(Dev Containers)のインストール

CursorはVS Codeのエコシステムを完全に継承しているため、VS Code用の拡張機能がそのまま使えます。コンテナに接続するためには「Dev Containers」という拡張機能が必須です。

1. Cursorを開く。
2. 左側メニューの拡張機能アイコン(四角いブロックのマーク、または `Ctrl + Shift + X` / `Cmd + Shift + X`)をクリック。
3. 検索窓に `Dev Containers` と入力し、Microsoft製の公式拡張機能を「Install」します。

これだけで、Cursorをコンテナに接続する準備は完了です。

—

3. Docker Composeで爆速開発環境を構築する

今回は、Webアプリケーションとデータベース(例:PostgreSQL)を同時に立ち上げる、実務で本当によく使われる「Docker Compose」環境を構築します。

プロジェクト用のフォルダを適当な場所(例: `cursor-docker-demo`)に作成し、その直下に以下の3つのファイルを作成してください。

① `docker-compose.yml` (コンテナの設計図)

プロジェクト全体のサービス(アプリとDB)を定義します。

version: ‘3.8’

services:
# アプリケーション用コンテナ
app:
build:
context: .
dockerfile: Dockerfile
volumes:
# ホスト側のソースコードをコンテナ内にリアルタイム同期(変更が即座に反映される)

  • .:/workspace

working_dir: /workspace
# コンテナを起動状態に維持するためのコマンド(無限スリープ)
command: /bin/sh -c “while sleep 1000; do :; do”
ports:

  • “3000:3000”

environment:

  • DATABASE_URL=postgres://user:password@db:5432/mydb

depends_on:

  • db

# データベース用コンテナ
db:
image: postgres:15-alpine
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: mydb
ports:

  • “5432:5432”

volumes:
# DBのデータを永続化(コンテナを消してもデータが消えないようにする)

  • pgdata:/var/lib/postgresql/data

volumes:
pgdata:

② `Dockerfile` (アプリ環境のレシピ)

Node.js環境をベースにした最小限のコンテナレシピを作ります。

軽量で安全なAlpine Linux上のNode.js環境を使用
FROM node:18-alpine

コンテナ内の作業ディレクトリを指定
WORKDIR /workspace

開発に便利な基本的なツール(gitなど)を入れておく
RUN apk update && apk add –no-cache git

③ `.devcontainer/devcontainer.json` (Cursorとコンテナを繋ぐ設定)

これが一番の魔法のファイルです。「どのDocker Composeファイルを使って、どのコンテナにCursorを入るか」を定義します。

プロジェクトフォルダの直下に `.devcontainer` というフォルダを作り、その中に `devcontainer.json` を配置します。

{
“name”: “Cursor Docker Development Environment”,

// 連携させるDocker Composeファイルの指定
“dockerComposeFile”: “../docker-compose.yml”,

// 接続先にしたいコンテナ名(docker-compose.ymlのサービス名)
“service”: “app”,

// コンテナ内で最初に開くワークスペースのパス
“workspaceFolder”: “/workspace”,

// コンテナ起動後にCursorに自動インストールしたい拡張機能
“customizations”: {
“vscode”: {
“extensions”: [
“dbaeumer.vscode-eslint”,
“esbenp.prettier-vscode”
]
}
},

// コンテナ接続完了後に自動実行したいコマンドがあればここに書く
“postCreateCommand”: “node -v && npm -v”
}

—

4. いざ接続!Cursorからコンテナに入る瞬間

ファイルが準備できたら、いよいよCursorをコンテナに接続します。ここが一番感動する瞬間です!

1. Cursorでプロジェクトフォルダ(`cursor-docker-demo`)を開きます。
2. 画面の右下(または左下)に、青いアイコン(>< のようなマーク)が表示されます。これをクリックしてください。 (※もし出ない場合は、`F1` キーを押して「Dev Containers: Reopen in Container」と入力して実行してください) 3. 上部にメニューが出てくるので、「Reopen in Container」を選択します。

【内部で起きていること】
Docker Desktopが裏側で自動的にイメージをビルドし、コンテナを立ち上げ、そのコンテナの中に「Cursorの頭脳(Cursor Server)」を自動インストールしています。初回は1〜2分かかりますが、2回目以降は一瞬で接続されます。

画面が再読み込みされ、左下の表示が `>< Container: app` に変わっていれば、大成功です!あなたはもう、完全なるコンテナ内部の安全な空間でコードを書く準備ができました。 ---

5. 動作確認:コンテナ環境でのHelloWorld & AI機能の活用

本当にコンテナ上で動いているか、そしてCursorの真骨頂であるAIアシスタントがどう機能するかを試してみましょう。

1. ターミナルでコンテナ内を確認する

Cursor内の統合ターミナル(“ Ctrl + ` “ または `Cmd + ` “)を開いてみてください。

node -v

と打つと、ご自身のPCにNode.jsが入っていなくても、コンテナ内のNode.js(v18系)のバージョンが返ってくるはずです。これがコンテナ開発の威力です!

2. 初期ファイルの作成とパッケージの初期化

ターミナルで以下を実行して、簡単なプロジェクトの土台を作ります。

package.jsonの作成
npm init -y

データベース操作のための軽量ライブラリをインストールしてみる
npm install pg

3. AI(Cursor)にSQLとAPIの実装を任せてみる

ここからがCursorの真骨頂です。新しいファイル `server.js` を作成し、Cursorの強力なAI機能(`Ctrl + K` または `Cmd + K` のインライン生成)を呼び出してみましょう。

`server.js` を開き、何もない状態で `Cmd + K`(または `Ctrl + K`)を押し、AIへの指示(プロンプト)を入力します。

> プロンプト例:
> `Expressを使って、PostgreSQL(接続情報は環境変数DATABASE_URL)に接続し、ユーザー一覧を返すAPIサーバーを書いて。ついでにエラーハンドリングもよろしく。`

AIが瞬く間に、以下のようなコードを自動生成してくれます。

const express = require(‘express’);
const { Pool } = require(‘pg’);

const app = express();
const port = 3000;

// PostgreSQLへの接続プール設定
// Docker Composeで定義した環境変数 `DATABASE_URL` を自動で読み込みます
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
});

app.use(express.json());

// ユーザー一覧取得API
app.get(‘/users’, async (req, res) => {
try {
const result = await pool.query(‘SELECT FROM users’);
res.json(result.rows);
} catch (err) {
console.error(‘データベースエラー:’, err);
res.status(500).json({ error: ‘サーバー内部でエラーが発生しました’ });
}
});

app.listen(port, () => {
console.log(`アプリケーションがポート ${port} で起動しました`);
});

どうでしょうか?
Dockerのネットワーク機能によって、`db` というホスト名だけでPostgreSQLコンテナと通信できていること、そしてCursorのAIが文脈を完全に理解して適切なコードを記述してくれたことに気づくはずです。

さらに、コードを選択した状態で `Ctrl + L`(または `Cmd + L`)を押せば、チャットパネルが開きます。
> 「このコードに、新規ユーザーを追加するPOSTエンドポイントを追加して、ついでに単体テストの書き方も教えて」

このように話しかけるだけで、コンテナ内の環境を汚すことなく、最高品質のコードを爆速で組み上げることができます。

—

まとめ:毎日のコーディングを劇的に楽にするために

お疲れ様でした!ここまでで、以下の素晴らしい環境があなたの手元に整いました。

1. ホストOSを汚さない、完全に独立したDockerによる開発環境
2. チーム全員が1コマンド(または1クリック)で全く同じ環境を再現できる再現性
3. そのコンテナ内部のコンテキストを完全に理解し、コード生成をサポートしてくれるCursorのAI

「環境構築に丸一日かかった……」なんていう不毛な時間は、今日で終わりにしましょう。
この「Cursor × Docker」のコンテナ開発スタイルをマスターすれば、新しい技術スタックへの挑戦も、日々の地道なコーディングも、驚くほど軽快で楽しいものに変わります。

明日からの開発が、あなたの手元で爆速に、そして最高に快適になることを心から応援しています!

タイトルとURLをコピーしました