MacBook不要！VPS × Claude Code で作るローカル依存ゼロの開発環境【2026年版完全ガイド】

2019年9月18日

「ローカルに開発環境を作るのが面倒」「Windowsでの環境構築でいつもつまずく」「Docker for Macが遅すぎる」——このような悩みは、開発環境をリモートサーバーに移すことで根本から解決できます。

このガイドでは、2026年現在の最新ツール構成として VPS（仮想専用サーバー）× Claude Code × VSCode Remote SSH を組み合わせた、ローカルマシン非依存の開発環境を段階的に構築する方法を解説します。

フェーズ1〜3の3段階構成で、あなたの用途とスキルレベルに合わせて最適な環境を選べます。この構成を使えば、手元にあるのが古いWindows PCでも、Chromebookでも、さらにはスマートフォンだけでも、本格的な開発作業が可能になります。

筆者はこの構成を実際に日常の開発・ブログ運用に使用しており、特にClaude Codeとの組み合わせで作業効率が大幅に向上しています。

VPS × VSCode Remote × Claude Code の構成図

なぜローカル依存をなくすのか

開発環境をローカルに構築することには、根本的な問題が複数あります。

問題1: マシン依存によるセットアップコスト
新しいPCに買い替えるたびに、開発環境を一から構築しなければなりません。Node.js、Ruby、Python、Docker——これらを再セットアップする時間は生産性ゼロの時間です。

問題2: OSの壁
MacとWindowsで開発環境の構築方法がまったく異なります。チームにWindowsユーザーとMacユーザーが混在すると、「自分の環境では動く」問題が発生します。

問題3: ローカルリソースの限界
Docker for Macはディスクアクセスが遅く、webpackのビルドが重い、メモリが足りない——ローカルマシンのスペックが開発体験のボトルネックになります。

リモート開発環境がこれらをすべて解決します。

前提条件

このガイドを進める前に、以下の環境・知識が必要です。

  • ローカル環境: Windows / Mac / Linux（スペックは問わない）
  • 必要なもの: VPSアカウント（後述）、Visual Studio Code
  • 前提知識: SSH接続の基本、コマンドラインの基本操作

VPSの選定

本記事では以下のVPSサービスを対象としています。どちらもLinux（Ubuntu）ベースで、同様の手順で環境を構築できます。

  • エックスサーバー VPS — 国内最大手のサーバー会社が提供するVPS。サポートが充実しており、初心者にも安心。
  • シンVPS — 料金が安く、コストを抑えたい方向け。

推奨スペック（Claude Codeを動かす場合）:

用途 CPU メモリ ストレージ
個人開発・ブログ 2コア 2GB 50GB SSD
Claude Code + 複数プロジェクト 4コア 4GB〜8GB 100GB SSD

SWAPの重要性: メモリ2GBの場合、必ずSWAP領域を4GB以上追加してください。webpackやnodeのビルドはメモリを大量消費するため、SWAPなしでは途中で落ちます。

# SWAP領域を4GB追加するコマンド（VPS初期設定後に実行）
sudo fallocate -l 4G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

# 確認
free -h

全体の流れ

このガイドは以下の3フェーズで構成されています。フェーズ1から順に試し、自分のワークフローに合ったレベルで止めても構いません。

  1. フェーズ1: SFTPでファイル同期 — セットアップ30分
  2. フェーズ2: VSCode Remote SSHで直接接続 — セットアップ15分
  3. フェーズ3: code-server + Claude Codeでブラウザ完結開発 — セットアップ1時間

3フェーズの開発環境進化図

フェーズ1: SFTPでファイル同期

最もシンプルな構成です。ローカルでファイルを編集し、SFTPで自動的にサーバーに同期します。実行環境はサーバー側、編集はローカルというハイブリッド方式です。

フェーズ1: SFTPでファイル同期のアーキテクチャ

1-1. SSH公開鍵の設定

セキュリティのため、パスワード認証ではなく公開鍵認証を使います。

# ローカルで公開鍵を生成（すでにある場合はスキップ）
ssh-keygen -t ed25519 -C "your_email@example.com"

# 公開鍵をVPSにコピー
ssh-copy-id -i ~/.ssh/id_ed25519.pub user@your-vps-ip

~/.ssh/config に接続設定を追加しておくと便利です：

Host dev
  HostName your-vps-ip
  User ubuntu
  IdentityFile ~/.ssh/id_ed25519
  ServerAliveInterval 60
  ServerAliveCountMax 3

ServerAliveの設定は必須: 長時間接続を維持する開発作業では、接続が定期的に切れる問題が発生します。ServerAliveInterval を設定することでこれを防げます。

1-2. VSCodeにSFTP拡張機能を導入

VSCodeの拡張機能マーケットプレイスで「SFTP」（Natizyskunk製）を検索してインストールします。

プロジェクトルートに .vscode/sftp.json を作成します：

{
  "name": "My VPS",
  "host": "your-vps-ip",
  "protocol": "sftp",
  "port": 22,
  "username": "ubuntu",
  "privateKeyPath": "~/.ssh/id_ed25519",
  "remotePath": "/home/ubuntu/projects/myapp",
  "uploadOnSave": true,
  "syncOption": {
    "delete": false
  },
  "ignore": [
    ".git",
    "node_modules",
    ".DS_Store"
  ]
}

uploadOnSave: true の設定により、ファイルを保存するたびに自動的にサーバーへ同期されます。

1-3. SSHトンネルでローカルアクセス

サーバー上でアプリを起動した後、SSHトンネルを使ってローカルのブラウザからアクセスできます。

# ポート3000をローカルに転送（バックグラウンドで実行）
ssh -N -L 3000:localhost:3000 dev &

# ポート8080も転送したい場合
ssh -N -L 8080:localhost:8080 dev &

これでローカルブラウザから http://localhost:3000 でアクセスできます。

フェーズ1のメリット・デメリット

メリット デメリット
ローカルにソースが残るのでGitGUIツールが使える ファイルが二重管理になる
セットアップが簡単 SFTPの同期タイミングで差異が出ることがある
ローカルのスペックに依存しない ターミナル操作はSSHで別途必要

✅ フェーズ1完了の確認: ローカルでファイルを保存すると自動的にサーバーに同期され、http://localhost:3000 でアプリが確認できれば成功です。

フェーズ2: VSCode Remote SSHで直接接続

おすすめ度: ★★★★★

VSCode の Remote – SSH 拡張機能を使うと、ローカルのVSCodeからサーバー上のファイルを直接編集できます。ファイルの二重管理が不要になり、拡張機能もサーバー側で動作するためローカルスペックの影響を受けません。

フェーズ2: VSCode Remote SSH接続のアーキテクチャ

2-1. Remote – SSH拡張機能の導入

VSCodeの拡張機能マーケットプレイスで「Remote – SSH」（Microsoft製）をインストールします。

インストール後、左サイドバーに「リモートエクスプローラー」アイコンが追加されます。

2-2. サーバーに接続する

コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）を開き、Remote-SSH: Connect to Host を選択します。

~/.ssh/config に設定した dev を選ぶと、自動的にサーバーに接続されます。

初回接続時はVSCode Serverがサーバーにダウンロードされます（数分かかります）。

2-3. ポートフォワードの自動設定

VSCode Remote SSH の最大の便利機能が自動ポートフォワードです。

サーバー上でアプリを起動すると、VSCodeが自動的にポートを検知してローカルに転送します。

# サーバー上でアプリ起動
npm run dev
# → VSCodeが自動的にポート3000をフォワードする

ターミナルパネルの「ポート」タブにフォワードされたポートの一覧が表示され、そこからブラウザで直接開けます。

手動でSSHトンネルを張る必要がなくなります。

2-4. サーバー上での開発環境セットアップ

サーバーに接続した状態で、ターミナルから開発環境をセットアップします。

# Node.js (nvm経由)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
source ~/.bashrc
nvm install 22
nvm use 22
node --version  # v22.x.x

# Ruby (rbenv経由)
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
source ~/.bashrc
rbenv install 3.3.0
rbenv global 3.3.0

# Docker
curl -fsSL https://get.docker.com | sh
sudo usermod -aG docker $USER

フェーズ2のメリット・デメリット

メリット デメリット
ファイル同期が不要、サーバー上のファイルを直接編集 ローカルにVSCodeのインストールが必要
ポートフォワードが自動 VSCodeが使えない環境では開発不可
Dockerがサーバーで動くため速い ネットワーク遅延が大きい場所では快適さが落ちる
拡張機能もサーバー側で動作

✅ フェーズ2完了の確認: VSCodeのステータスバー左下に SSH: dev と表示され、サーバー上のファイルを直接編集・保存できれば成功です。

フェーズ3: code-server + Claude Code でブラウザ完結開発

究極の構成: ブラウザさえあればどこでも開発できる

code-server はVSCodeをサーバー上で動かし、ブラウザ経由でアクセスできるようにするツールです。さらに Claude Code をサーバーにインストールすることで、AIによるコーディング支援もサーバー上で完結します。

この構成の最大のメリットは、ローカルにインストールするものが何もない点です。ブラウザとSSHクライアントさえあれば、スマートフォンからでも開発できます。

フェーズ3: code-server + Claude Code ブラウザ完結構成

3-1. code-serverのインストール

# code-serverのインストール（最新版は公式を確認）
curl -fsSL https://code-server.dev/install.sh | sh

# サービスとして起動設定
sudo systemctl enable --now code-server@$USER

# 設定ファイルの場所
cat ~/.config/code-server/config.yaml

デフォルトの設定ファイルは以下のようになっています：

bind-addr: 127.0.0.1:8080
auth: password
password: your-generated-password
cert: false

セキュリティ上の注意: bind-addr は必ず 127.0.0.1 にしてください。外部に直接公開すると危険です。SSHトンネル経由でアクセスします。

3-2. SSHトンネルでアクセス

# ローカルからcode-serverにアクセスするためのトンネル
ssh -N -L 8080:127.0.0.1:8080 dev

ブラウザで http://localhost:8080 を開くと、ブラウザ上でVSCodeが動作します。

3-3. Claude Code のインストールと設定

Claude Codeはサーバー上でも動作します。Node.js（v18以上）が必要です。

# Node.jsがインストール済みであることを確認
node --version  # v18以上であること

# Claude Codeのインストール
npm install -g @anthropic-ai/claude-code

# バージョン確認
claude --version

APIキーを環境変数に設定します：

# ~/.bashrc または ~/.zshrc に追加
export ANTHROPIC_API_KEY="sk-ant-..."
source ~/.bashrc

3-4. 複数プロジェクトの並行開発

Claude Codeの強力な点は、複数インスタンスを同時に起動できることです。

VPS上で複数のターミナルセッション（tmux推奨）を使い、プロジェクトごとにClaude Codeを起動することで、並行して複数のプロジェクトを進められます。

# tmuxのインストール
sudo apt install -y tmux

# 新しいセッションを作成（プロジェクト1用）
tmux new-session -d -s project1 -c ~/projects/project1

# プロジェクト2用のセッション
tmux new-session -d -s project2 -c ~/projects/project2

# セッション一覧
tmux ls

# セッションへのアタッチ
tmux attach -t project1

各tmuxセッション内でClaude Codeを起動すれば、複数のAIエージェントが並行してそれぞれのプロジェクトを処理します。

# project1のセッションで
claude  # Claude Codeを起動

# project2のセッションで（別ウィンドウ）
claude  # 別のClaude Codeインスタンスを起動

3-5. Nginxでのリバースプロキシ設定（オプション）

SSHトンネルではなく、ドメイン経由でHTTPS接続したい場合はNginxとLet’s Encryptを使います。

server {
    listen 443 ssl;
    server_name code.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/code.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/code.yourdomain.com/privkey.pem;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

# Let's Encrypt証明書の取得
sudo certbot --nginx -d code.yourdomain.com

フェーズ3のメリット・デメリット

メリット デメリット
ブラウザのみで完全な開発環境が使える 初期セットアップに1時間程度かかる
スマートフォンからでも開発可能 code-serverはVSCode公式の一部拡張機能が使えない
複数プロジェクトを並行開発できる サーバーの月額費用が発生する
Claude Codeとの組み合わせで生産性が大幅向上
PCを変えても環境が変わらない

✅ フェーズ3完了の確認: ブラウザで http://localhost:8080 を開き、ターミナルで claude コマンドが起動すれば成功です。

応用編: Androidスマートフォンから開発する

フェーズ3まで構築が完了すると、Androidスマートフォンからでも開発作業が可能になります。

AndroidスマートフォンからVSCode(code-server)にアクセスした画面

Termuxを使ったSSHトンネル

# Termux（Android）でのセットアップ
pkg install openssh

# SSHトンネルを張る（VPSのIPアドレスに接続）
ssh -N -L 8080:127.0.0.1:8080 -i ~/.ssh/id_ed25519 ubuntu@your-vps-ip

ChromeブラウザでVSCode(code-server)を開き、VimキーバインドやソフトキーボードのCtrlキー拡張を入れると、スマートフォンでも実用的な開発が行えます。

GitHub Codespacesとの比較

項目 自前VPS構成 GitHub Codespaces
コスト 月1,000〜3,000円（VPS代） 月60時間まで無料（その後課金）
カスタマイズ 自由 Devcontainerで設定
常時起動 可能 アイドル時に停止
Claude Code 任意のバージョン 対応
データ永続性 VPSが続く限り永続 リポジトリと連動

トラブルシュート

症状 原因 解決策
SSH接続が途中で切れる keepaliveが未設定 ~/.ssh/config に ServerAliveInterval 60 を追加
webpackのビルドが途中で落ちる メモリ不足 SWAP領域を4GB追加する
code-serverが重い サーバースペック不足 メモリ4GB以上のプランにアップグレード
ポートフォワードが自動で張られない Remote SSH設定の問題 VSCodeの「ポート」タブで手動追加
Claude Codeのレスポンスが遅い APIレート制限またはネットワーク サーバーのリージョンを日本に変更
Androidからアクセスできない SSHトンネルが確立していない Termuxでトンネルが起動しているか確認

まとめ

このガイドでは、ローカルマシンに依存しない開発環境を3つのフェーズで解説しました。

  • フェーズ1（SFTP同期）: SFTPプラグインで自動同期。セットアップが簡単でローカルの編集ツールをそのまま使える
  • フェーズ2（VSCode Remote SSH）: VSCodeのRemote SSH拡張で直接サーバー接続。ポートフォワードが自動で快適
  • フェーズ3（code-server + Claude Code）: サーバー上でVSCodeとClaude Codeを動かし、ブラウザ完結の究極構成

2026年現在、Claude Codeの登場により「どのマシンで作業するか」よりも「どのサーバーでAIと協働するか」が重要になっています。VPSに一度環境を構築しておけば、手元のPCが変わっても、出先でスマートフォンしかなくても、同じ環境で継続して開発できます。

まずはエックスサーバーVPSで試してみてください。 費用対効果が高く、複数プロジェクトを並行して動かす用途にも十分なスペックが手頃な価格で入手できます。

個人開発やブログ用途なら → レンタルサーバー エックスサーバー

VPS（仮想専用サーバー）で本格的な開発環境を → エックスサーバー

関連記事

Mac,PC関連,ツール,開発

Posted by GENDOSU