VSCode Dev Containers でローカル環境を汚さない開発環境を構築する(リモート編)

Last updated at 2026-01-06Posted at 2026-01-06

はじめに

前回の
VSCode Dev Containers でローカル環境を汚さない開発環境を構築する #Docker - Qiita
の続きです。
この記事では、VSCode の Remote Dev Containers と SSH接続を組み合わせて、Mac/Windows から Linux サーバー上のコンテナで開発する環境を構築する方法を解説します。
実際私は、ローカルで VSCode Dev Containers を使って開発することは Linux機だけで、
Mac/Windows では今回のリモートを使って開発をしています。

この記事で書くこと

リモート開発環境が解決する開発の課題
Remote Dev Containers の仕組みと利点
Linux サーバーへの SSH 接続設定
Docker のインストールと設定
VSCode でリモートコンテナに接続する手順
つまずきやすいポイントと注意点

前提条件・対象読者

Mac または Windows を使用している開発者
Linux サーバー(VPS や自宅サーバー)を用意できる方
開発環境と本番環境の差異に悩んでいる方
どこからでも安全に開発環境にアクセスしたい方
SSH と Docker の基本的な知識がある方

背景・動機

開発環境の課題

従来の開発スタイルでは、以下のような問題がありました:

1. 開発環境と本番環境の差異

開発者: 「ローカル(Mac)では動いたのに、本番(Linux)でエラーが...」

典型的なケース:

OS の違い: Mac/Windows と Linux でファイルパスや改行コードが異なる
パッケージの違い: ライブラリのバージョンやバイナリの互換性問題
環境変数の違い: ローカルと本番で設定が異なる

2. ローカルマシンのスペック不足

React、Next.js などのビルドが遅い
Docker コンテナを複数起動すると重い
M1系 Mac でのアーキテクチャ問題(ARM vs x86)

3. どこでも開発したい

自宅の強力な PC で開発したい
外出先のノート PC からアクセスしたい
セキュアな接続が必要

Remote Dev Containers が解決すること

Remote Dev Containers を使うと:

✅ 環境の統一: Linux サーバー上で開発することで本番と同じ環境
✅ 高速化: 強力なサーバーマシンのリソースを活用
✅ どこでも開発: SSH 経由でどこからでもアクセス
✅ セキュリティ: VPN で暗号化された安全な接続

手順・解説

構成図

[開発PC: Mac/Windows]
    ↓ SSH
[Linuxサーバー: Ubuntu]
    ↓ Docker
[Dev Container: Node.js環境 他]

1. Linux サーバーの準備

サーバーの選択肢

クラウド VPS: AWS EC2 など
自宅サーバー: Linux Server をインストール
仮想マシン: VMware、VirtualBox で Linux を起動

今回は Ubuntu 22.04 LTS を想定します。

サーバーへの初回接続

# SSH でサーバーに接続
ssh username@server-ip-address

2. Docker のインストール(Linux サーバー側)

公式手順に従ってインストール

Ubuntu での Docker インストール手順:

# 古いバージョンの削除
sudo apt-get remove docker docker-engine docker.io containerd runc

# 必要なパッケージのインストール
sudo apt-get update
sudo apt-get install -y \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

# Docker の GPG キーを追加
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

# リポジトリのセットアップ
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# Docker Engine のインストール
sudo apt-get update
sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

sudo なしで Docker を実行できるように設定

# docker グループにユーザーを追加
sudo usermod -aG docker $USER

# グループ変更を反映(再ログインでも可)
newgrp docker

# 確認
docker run hello-world

重要: この設定により、sudo docker ではなく docker だけで実行できるようになります。

3. SSH キーの設定

ローカル PC で SSH キーペアを生成

# .ssh ディレクトリに移動
cd ~/.ssh

# SSH キーペアを生成
ssh-keygen -t ed25519 -C "your_email@example.com"

# ファイル名を指定(例: id_ed25519_devserver)
Enter file in which to save the key: id_ed25519_devserver
Enter passphrase (empty for no passphrase): [パスフレーズ入力]

公開鍵をサーバーにコピー

# 方法1: ssh-copy-id を使う(簡単)
ssh-copy-id -i ~/.ssh/id_ed25519_devserver.pub username@server-ip

# 方法2: 手動でコピー
cat ~/.ssh/id_ed25519_devserver.pub
# 出力された内容をコピー

サーバー側で:

# .ssh ディレクトリを作成
mkdir -p ~/.ssh
chmod 700 ~/.ssh

# authorized_keys に公開鍵を追加
echo "コピーした公開鍵" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

SSH 設定ファイルの作成

ローカル PC の ~/.ssh/config を編集:

Host devserver
    HostName server-ip-address
    User username
    IdentityFile ~/.ssh/id_ed25519_devserver
    ServerAliveInterval 60
    ServerAliveCountMax 3

これにより、ssh devserver だけで接続できます。

4. VSCode 拡張機能のインストール

VSCode に以下の拡張機能をインストール:

Remote - SSH (Microsoft 公式)
- 拡張機能 ID: ms-vscode-remote.remote-ssh
Dev Containers (Microsoft 公式)
- 拡張機能 ID: ms-vscode-remote.remote-containers

5. VSCode で SSH 接続

リモートホストに接続

コマンドパレット: Ctrl/Cmd + Shift + P
「Remote-SSH: Connect to Host...」と入力
devserver を選択(または username@server-ip を入力)
新しい VSCode ウィンドウが開く

確認方法:

VSCode 左下に緑色で「SSH: devserver」と表示される
ターミナルを開くと Linux サーバーのシェルが表示される

プロジェクトフォルダを開く

# サーバー上でプロジェクトディレクトリを作成
mkdir -p ~/projects/my-remote-project

VSCode で:

「File」→「Open Folder...」
/home/username/projects/my-remote-project を選択

6. Dev Container の設定

.devcontainer/devcontainer.json を作成

プロジェクトルートに .devcontainer フォルダを作成:

mkdir .devcontainer

.devcontainer/devcontainer.json:

{
  "name": "Remote Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }
  },
  
  "forwardPorts": [3000, 5173],
  
  "postCreateCommand": "npm --version && node --version",
  
  "remoteUser": "node"
}

Dev Container で開く

コマンドパレット: Ctrl/Cmd + Shift + P
「Dev Containers: Reopen in Container」を選択
コンテナのビルドと起動を待つ

確認:

VSCode 左下に「Dev Container: Remote Node.js Development @ ssh://devserver」と表示される
ターミナルがコンテナ内のシェルになる

7. アプリケーションの作成と実行

Next.js アプリを作成

npx create-next-app@latest . --typescript --tailwind --app
npm run dev

ポートフォワードの確認

VSCode の「ポート」タブで、3000 がローカル PC に転送されていることを確認。

ブラウザで http://localhost:3000 にアクセスすると、リモートサーバー上で動いている Next.js アプリが表示されます!

8. Docker Compose を使った複数サービス連携も可能

実行結果 & コツ

開発フローの確認

ローカル PC で VSCode を開く
Remote-SSH で Linux サーバーに接続
Dev Container で開く
コードを編集 → 自動保存
ブラウザで localhost:3000 にアクセス
リモートサーバー上で実行中のアプリが表示される!

つまずきポイントと回避策

1. SSH 接続がタイムアウトする

症状: 「Could not establish connection to "devserver"」

解決策:

# ~/.ssh/config に追加
Host *
    ServerAliveInterval 60
    ServerAliveCountMax 3

2. Docker デーモンに接続できない

症状: 「Cannot connect to the Docker daemon」

原因: Docker グループへの追加が反映されていない

解決策:

# 一度ログアウトして再ログイン
exit
ssh devserver

# または
newgrp docker

3. ポートフォワードが機能しない

症状: localhost:3000 にアクセスできない

解決策:

VSCode の「ポート」タブを確認
ファイアウォールの確認(サーバー側)
アプリケーションが 0.0.0.0 でリッスンしているか確認:

# Next.js の場合
npm run dev -- --hostname 0.0.0.0

4. コンテナビルドが遅い

原因: イメージのダウンロードに時間がかかる

解決策:

# サーバー側で事前にイメージをプル
docker pull mcr.microsoft.com/devcontainers/typescript-node:20

Remote Dev Containers の注意点

1. ネットワーク依存

インターネット接続が必須
回線が不安定だと操作が遅延

2. ローカルファイルシステムとの違い

ファイルはリモートサーバー上に保存
Git でバージョン管理することを推奨
重要なデータは定期的にバックアップ

3. リソース管理

サーバーのディスク容量に注意
不要なコンテナ・イメージは定期的に削除:

docker system prune -a

4. 拡張機能の同期

ローカル PC にインストールした拡張機能は自動的にリモートには入らない
devcontainer.json の extensions で指定する

開発のコツ

1. Git でコード管理

# サーバー上で Git 設定
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

# SSH キーを GitHub に登録
ssh-keygen -t ed25519 -C "your@email.com"
cat ~/.ssh/id_ed25519.pub
# GitHub の Settings → SSH keys に登録

2. 定期的なスナップショット

スナップショットのとれる環境なら定期的に取得しておくと安心。

3. 複数プロジェクトの管理

~/projects/
  ├── project-a/
  │   └── .devcontainer/
  ├── project-b/
  │   └── .devcontainer/
  └── project-c/
      └── .devcontainer/

各プロジェクトで独立したコンテナ環境を構築。

まとめ(気づき)

学んだこと

Remote Dev Containers の威力: 本番環境と同じ Linux 環境で開発できる
SSH + Docker の組み合わせ: 強力なリモート開発環境を実現
ポートフォワードの自動化: ローカルのように使える
チーム開発への応用: .devcontainer を共有することで環境統一

Remote Dev Containers のメリット

✅ 本番環境との一致: Linux で開発することで環境差異を解消
✅ ハイスペック活用: 自宅の強力な PC やクラウドサーバーのリソースを活用
✅ どこでも開発: VPN で外出先からも安全にアクセス
✅ クリーンなローカル PC: 開発ツールをインストール不要
✅ 柔軟な環境切り替え: プロジェクトごとに異なるコンテナ環境

ハマりポイントの振り返り

SSH キーの設定: パーミッション(700, 600)を正しく設定する
Docker グループ: 再ログインしないと反映されない
ポートフォワード: 自動で転送されるが、ファイアウォールに注意

次に伸ばすべきポイント

マルチステージビルド: 本番用イメージの最適化
CI/CD 連携: GitHub Actions
モニタリング: サーバーリソースの監視

実務での活用シーン

この Remote Dev Containers 環境は以下のような場面で特に有効です:

本番環境に近い開発: Linux 本番環境と同じ環境で開発
ハイスペックマシンの活用: クラウドや自宅サーバーのパワーを利用
リモートワーク: 外出先から安全に開発環境にアクセス
チーム開発: 全員が同じ環境で作業
マルチプロジェクト: プロジェクトごとに完全に分離された環境

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

VSCode Dev Containers で ローカル環境を汚さない開発環境を構築する(リモート編)

はじめに

この記事で書くこと

前提条件・対象読者

背景・動機

開発環境の課題

1. 開発環境と本番環境の差異

2. ローカルマシンのスペック不足

3. どこでも開発したい

Remote Dev Containers が解決すること

手順・解説

構成図

1. Linux サーバーの準備

サーバーの選択肢

サーバーへの初回接続

2. Docker のインストール(Linux サーバー側)

公式手順に従ってインストール

sudo なしで Docker を実行できるように設定

3. SSH キーの設定

ローカル PC で SSH キーペアを生成

公開鍵をサーバーにコピー

SSH 設定ファイルの作成

4. VSCode 拡張機能のインストール

5. VSCode で SSH 接続

リモートホストに接続

プロジェクトフォルダを開く

6. Dev Container の設定

.devcontainer/devcontainer.json を作成

Dev Container で開く

7. アプリケーションの作成と実行

Next.js アプリを作成

ポートフォワードの確認

8. Docker Compose を使った複数サービス連携 も可能

実行結果 & コツ

開発フローの確認

つまずきポイントと回避策

1. SSH 接続がタイムアウトする

2. Docker デーモンに接続できない

3. ポートフォワードが機能しない

4. コンテナビルドが遅い

Remote Dev Containers の注意点

1. ネットワーク依存

2. ローカルファイルシステムとの違い

3. リソース管理

4. 拡張機能の同期

開発のコツ

1. Git でコード管理

2. 定期的なスナップショット

3. 複数プロジェクトの管理

まとめ(気づき)

学んだこと

Remote Dev Containers のメリット

ハマりポイントの振り返り

次に伸ばすべきポイント

実務での活用シーン

VSCode Dev Containers でローカル環境を汚さない開発環境を構築する(リモート編)

8. Docker Compose を使った複数サービス連携も可能