あなたはノートパソコンを閉じ、コーヒーショップまで歩き、タブレットでブラウザを開く。あなたの完全なVS Codeエディタがそこにあり、その隣ではターミナルでClaude Codeが動いている。あなたが管理するサーバー上でだ。ローカルのツールチェーンもなく、同期もなく、ノートパソコンが目覚めるのを待つこともない。
その組み合わせこそが、このガイドが構築するものだ。Code Server(ブラウザベースのVS Code)とClaude Code(AnthropicのAIコーディングCLI)を、単一のLinux VPS上に。どちらか一方を扱うチュートリアルはいくらでもあるが、両方を同じマシンで動かすと、VPSのコストで、しかも完全なroot権限付きで、どのデバイスからでも到達できるCodespaces風のAI支援IDEが手に入る。始める前に一点だけ明確にしておく。 コードサーバー ここでは、Coderのオープンソースプロジェクト(coder/code-server)を指すのであって、Microsoftの VS Code Serverでも、Coderの別のエンタープライズ向けプラットフォームでもない。それらは名前を共有し、絶えず混同されるので、いま確定させておく価値がある。
最後まで進めば、あなたが所有するVPS上で動く、HTTPSで保護され、接続の切断を生き延びるよう設定された、ブラウザベースのAI支援開発環境が手に入る。
短いバージョン
- スタック: Code ServerはブラウザのタブでVS Codeを提供し、Claude Codeは同じサーバーにAnthropicのAIコーディングアシスタントを加える。あなたはブラウザを備えたどのデバイスからでも、その全体に到達する。
- 実際のRAMの下限は4 GBであり、その理由はClaude Codeだ。 Code Server単体なら1 GBで動くが、Claude Codeは4 GB以上を必要とするので、組み合わせたスタックには少なくとも4 GBのRAM、2 vCPU、120 GBのストレージが要る。快適さを求めるなら8 GBを見込んでおくこと。
- インストールの順序は、認証のステップほど重要ではない。 両ツールのネイティブインストーラーはそれぞれ一行だ。ブラウザのないサーバーでClaude Codeを認証することこそ、ほとんどのセットアップが行き詰まる部分だ。ログインURLをローカルのブラウザにコピーするか、トークンまたはAPIキーを使う。
- Claude Codeは無料ではない。 それには有料のClaudeプラン(Pro、Max、Team、またはEnterprise)、あるいはAnthropicのAPIキーが必要だ。無料のClaude.aiプランにはそれが含まれていない。
必要なもの
始める前に、以下が揃っていることを確認してほしい。これらはそれぞれ後のステップで参照されるので、途中で不足に気づくよりも、いま確かめておく価値がある。
- Linux VPS 。下記のサイジングの下限を満たすもの。このガイド全体でUbuntu 22.04 LTSを使用する。コマンドはDebianや他のUbuntuリリースでもほぼ同一だ。
- 適切なサイズ: 少なくとも 4 GB RAM, 2 vCPU, and 120 GB of NVMe storage. 4 GBという最小要件はClaude Codeから来るのであって、Code Serverからではない(サイジングのセクションがその理由を説明する)。
- ドメイン名(任意だが推奨) 。本物の証明書付きのHTTPSが欲しい場合に。Code ServerはIPアドレス上で動かせるが、ドメインがあるとリバースプロキシのステップがすっきりする。
- 有料のClaudeプラン、またはAnthropicのAPIキー。 Claude CodeにはPro、Max、Team、またはEnterpriseのサブスクリプション、あるいはClaude Console(API)アカウントが必要だ。無料のClaude.aiプランにはClaude Codeへのアクセスが含まれていない。インストールのステップの前に、どれを持っているかを確認してほしい。それが、あなたがどう認証するかを決めるからだ。
- 基本的なSSHアクセス 。sudoが使えるユーザーでサーバーへ。
VPSを選ぶ
最初の決定はサイズであり、Code Serverについて見かけるよくある助言は、このスタックには当てはまらない。ほとんどのCode Serverのガイドは1 GBのRAMという最小値を挙げており、それはCode Server単体では正確だ。Claude Codeを加えた途端、その下限は移動する。
Claude Code自身のシステム要件はこう挙げている。 4 GB+ RAM (以下による: Claude Codeのセットアップドキュメント)。Code Serverはおよそ1 GBを必要とする。両方を動かし、さらにエディタの拡張機能、稼働中のプロジェクト、そしてエージェント的なClaude Codeのセッションが作業中に使うメモリを加えると、組み合わせたスタックの現実的な下限は次のとおりだ。
| リソース | 最小限 | 推奨 |
|---|---|---|
| RAM | 4 GB | 8 GB |
| vCPU | 2 | 4 |
| ストレージ | 120 GB NVMe | 240 GB NVMe |
| OS | Ubuntu 22.04 LTS | Ubuntu 22.04 LTS |
推奨の列は、複数の拡張機能をインストールしたり、大きなnode_modulesディレクトリを伴う大規模なプロジェクトをサーバーに置いたり、一度に多数のファイルに触れるエージェント的なタスクでClaude Codeを動かしたりする場合に、あなたがいたい場所だ。最小要件でもスタックは動く。推奨スペックはそれを快適に保つ。
お金と混乱を省いてくれる2つの点:
GPUは不要だ。 Claude Codeは作業をAnthropicのAPIに送るので、モデルの推論はすべてリモートで行われる。あなたは自分のサーバーでモデルを動かしているのではない。標準的なCPUのVPSが正しい選択であり、ここでGPUインスタンスに支払っても何も得られない。
自分に近いデータセンターを選ぶこと。 ブラウザIDEは、通常のウェブアプリとは違うかたちでネットワークのレイテンシに敏感だ。なぜなら、すべてのキーストロークとファイルの編集が、サーバーへのWebSocket接続を通って往復するからだ。サーバーがあなたの物理的に座っている場所に近いほど、エディタはよりローカルに感じられる。ほとんどの時間を一つの地域からコーディングするなら、それに最も近い場所を選ぶこと。
セクションの要点:Code Serverではなく、Claude Codeに合わせてサイズを決めること。Claude Codeの4 GBという要件があなたの下限を定める。両ツールがマシンを共有すると、Code Serverの1 GBという数字はもう当てはまらない。
Code Serverのインストール
このステップは、ブラウザのポート8080で到達できる、動作するVS Codeエディタを生み出す。Code Serverはパッケージのセットアップを代わりに処理してくれるインストールスクリプトを同梱している。
公式インストーラーを実行する:
curl -fsSL https://code-server.dev/install.sh | shスクリプトはあなたのディストリビューションを検出し、Code Serverをsystemdサービスとしてインストールする。完了したら、サービスを起動し、再起動後に復帰するよう有効化する:
sudo systemctl enable --now code-server@$USERCode Serverはデフォルトで127.0.0.1:8080にバインドし、初回実行時にランダムなパスワードを生成する。ログインにはそのパスワードが必要だ。それは生成された設定ファイルの中にある:
cat ~/.config/code-server/config.yaml想定される出力は次のようになる:
bind-addr: 127.0.0.1:8080
auth: password
password: 5f3a9c1b2e8d7460a1f2c3b4
cert: falseパスワードの値をコピーする。サーバーがブラウザで到達可能になったら、それをCode Serverのログイン画面で入力する。ただし、いまはまだ到達可能ではない。127.0.0.1(localhostのみ)にバインドされているからだ。これは意図的なものだ。Code Serverを安全に公開するのは後のステップで、ポート8080をインターネットに開くのではなく、リバースプロキシを通して行う。
注意:Code Serverはログイン試行にレート制限をかける。パスワードを何度か打ち間違えて一時的にロックアウトされたら、それはレート制限であって、壊れたインストールではない。少し待ってやり直すこと。
手動のインストールをまるごと省きたいなら、Cloudzyのマーケットプレイスには、Code Serverがすでにインストールされた状態でサーバーをプロビジョニングするワンクリックのCode Serverデプロイがある。いまホストを選んでいるなら、それがより速い道だ。上記の手動の手順はどのUbuntu VPSでも動くので、このガイドの残りはプロバイダーに依存しないままだ。
Claude Codeのインストール
このステップは、同じサーバーにAIコーディングアシスタントを加える。Claude Codeは単一のバイナリとしてインストールされ、ターミナルから動く。後にブラウザIDEの中で開くのと同じターミナルだ。
Anthropicが推奨する方法である、ネイティブインストーラーを使う:
curl -fsSL https://claude.ai/install.sh | bashインストールされたことを確認する:
claude --versionすでにNode.js 18以降を動かしていて、このツールをnpmで管理したいなら、その道も代替として存在する:
npm install -g @anthropic-ai/claude-codeThe native installer is the primary path in Anthropic's current documentation, and it auto-updates in the background. The npm package can also auto-update, but that depends on the npm global directory being writable; if it isn't, Claude Code shows a one-time notice instead of updating silently. Choose the native installer unless you have a specific reason to prefer npm.
Claude CodeはUbuntu 20.04以降、Debian 10以降、Alpine 3.19以降に対応しているので、上でサイズを決めたVPSはすでに条件を満たしている。それには有料のClaudeプラン、またはAnthropicのAPIキーが必要で、これは前提条件で確認済みだ。そして無料のClaude.aiプランにはそれが含まれていない。
権威あるインストールの参照先として、現行のドキュメントは次の場所にある: code.claude.com。(docs.anthropic.comへの古いリンクはそこへリダイレクトされる。code.claude.comのアドレスを直接使うこと。)
ヘッドレスサーバーでのClaude Codeの認証
実行する claude を初めて実行すると、ログインを完了するためにブラウザのウィンドウを開こうとする。SSH経由で到達するリモートサーバーには、開くべきブラウザがない。これは、ほとんどのサーバーのセットアップを止める唯一のステップであり、きれいな解決策が3つある。
直接的な方法:ログインURLをローカルのブラウザにコピーする。 次を実行するとき claude をサーバーで実行すると、ログインURLが表示される(自動で開かない場合は、 c を押してクリップボードにコピーする)。そのURLを自分のマシンのブラウザで開き、サインインして、認可を完了する。ブラウザがリダイレクトの代わりにログインコードを表示したら、そのコードをターミナルのPaste code here if promptedのプロンプトに貼り戻す。これはSSHセッションやコンテナでは通常のことだ。これがProまたはMaxのサブスクリプションにおける標準的な対話的な道だ。
永続的な方法:長寿命のトークン。 サーバーを定期的に再認証したくないなら、1年間有効なOAuthトークンを生成する:
claude setup-tokenこのコマンドは、一度だけOAuthの認可を案内し、トークンを表示する。それはトークンを保存してくれないので、コピーして環境変数として設定し、Claude Codeが実行のたびにそれを拾えるようにする:
export CLAUDE_CODE_OAUTH_TOKEN=your-token-hereそのexport行をシェルのプロファイル(例えば ~/.bashrc)に追加し、セッションをまたいで永続化させる。このトークンはあなたのサブスクリプションに対して認証し、Pro、Max、Team、またはEnterpriseのプランを必要とする。
APIキーの方法。 サブスクリプションではなくClaude Console(API)アカウントを使う場合は、代わりにAPIキーを設定する:
export ANTHROPIC_API_KEY=sk-ant-your-key-here請求で驚かないよう、正確を期して一点。APIキーはClaude Consoleを通じてトークン単位で課金され、それはProやMaxのサブスクリプションとは別の課金経路だ。サブスクリプションと ANTHROPIC_API_KEY の両方を設定している場合、承認されるとAPIキーが優先される。だからサブスクリプションを使うつもりなら、環境に迷子のAPIキーを残さないこと。
セクションの要点:ヘッドレスなマシンで認証する3つの道。ログインURLをローカルのブラウザにコピーする、claude setup-tokenを実行して長寿命のサブスクリプショントークンを得る、または直接のAPI課金のためにANTHROPIC_API_KEYを設定する。
HTTPSでCode Serverを安全に公開する
いまCode Serverはlocalhostにバインドされ、平文のHTTPを提供している。ポート8080をインターネットに開いて暗号化されていない接続でログインするのは避けたい。ネットワーク経路上の誰もがあなたのセッションを読めてしまうからだ。標準的な対処法は、Code Serverの前でHTTPSを終端するリバースプロキシだ。
このステップを形づくる一つの厳しい制約がある: Code ServerはWebSocketに依存する (以下による: Coderの要件)。エディタはサーバーとのライブな通信のために持続的なWebSocket接続を使うので、あなたのリバースプロキシはWebSocketのアップグレードを正しく転送しなければならない。だからプロキシの選択が重要になる。
CaddyまたはNginxを使う。 どちらもWebSocketのプロキシを確実にこなし、どちらも、手作業でのインストールを省きたいならCloudzyのマーケットプレイスのワンクリックアプリとして利用できる。Caddyの方が短い道だ。Let's Encryptの証明書を自動的に取得し更新するからだ。Code Server向けの最小限のCaddyfileはこうだ:
# /etc/caddy/Caddyfile
code.example.com {
reverse_proxy 127.0.0.1:8080
}それが設定のすべてだ。CaddyはWebSocketのアップグレードを検出し、追加のディレクティブなしにそれを転送し、code.example.com向けのHTTPSを自前でプロビジョニングする。 sudo systemctl reload caddy でCaddyをリロードし、 https://code.example.comにアクセスすれば、暗号化された接続でCode Serverのログイン画面に到達する。
Nginxを好むなら、設定はより長い。WebSocketのアップグレードヘッダーを明示的に設定し、証明書をCertbotで別途取得するからだ:
# /etc/nginx/sites-available/code-server
server {
listen 80;
listen [::]:80;
server_name code.example.com;
location / {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}注意:NginxとCaddyは、公式のCoderのドキュメントが文書化している2つのプロキシであり、どちらもここでの信頼できる選択肢だ。ApacheもCode Serverをプロキシできるが、そのWebSocketの転送には追加のモジュール設定(proxy_wstunnelとリライトルール)が必要で、それは公式のドキュメントが扱っておらず、それらのモジュールを見落としたセットアップは、切断されたエディタの接続をデバッグするはめに陥りがちだ。すでに他のサイト向けにApacheを動かしているなら、最も単純な道は、Apacheにそれをプロキシさせるよう設定するのではなく、Code Serverを別のvhost上のNginxまたはCaddyの背後に置くことだ。
セッションを生かし続ける
このサーバーでは2つの異なるものが動いており、あなたの接続が切れたときの振る舞いは異なる。閉じたノートパソコンの蓋のせいでエージェント的なClaude Codeの実行を1時間ふいにする前に、どちらがどちらかを知っておく価値がある。
Code Server自体は切断を生き延びる。あなたがそれをsystemdサービスとしてインストールしたからだ。ブラウザのタブを閉じても、SSHが切れても、Code Serverサービスは止まらない。通常の再接続では、同じブラウザIDEのセッションに戻る。ただし、非常に長い切断では、Code Serverの再接続の挙動によってはウィンドウのリロードが必要になることがある。
Claude Codeは違う。SSH経由の対話的なターミナルで claude を実行すると、それはそのターミナルセッションに結び付いている。そのターミナルを持つブラウザのタブを閉じるか、SSH接続を切ると、プロセスはそれとともに死ぬ。作業中だったなら、作業の途中で。対処法は、Claude Codeをターミナルマルチプレクサの中で動かし、セッションをあなたの接続から切り離して動かし続けることだ。
tmuxがこれの標準的なツールだ。以前に使ったことがないなら、3つのコマンドで必要なことがまかなえる:
# Start a new named session
tmux new -s claude
# Run claude inside it as normal, then detach without stopping it:
# press Ctrl-b, then d
# Reattach later, from any new SSH session:
tmux attach -t claude開始 claude をtmuxセッションの中で、Ctrl-bのあとにdでデタッチすると、エージェント的な実行はサーバー上で続く。再接続するたびに(お好みなら別のデバイスから) tmux attach -t claude でリアタッチすれば、同じライブなセッションに戻る。
注意:すでにscreenを使っているなら、それも同じように機能する(開始はscreen -S claude、デタッチはCtrl-aのあとにd、リアタッチはscreen -r claude)。どちらのツールも同じ問題を解く。知っている方を選ぶこと。
ブラウザIDEの中でClaude Codeを使う
両ツールがマシンに揃うと、ブラウザIDEからClaude Codeに到達する方法は2つある。統合ターミナルと、VS Codeの拡張機能だ。一方は今日、信頼できる。もう一方は、頼りにする前にテストが要る。
ターミナルの道は、構造上、機能する。 ブラウザでCode Serverを開き、その統合ターミナルを開き(Terminal > New Terminal、またはCtrl+`)、実行する:
claudeこれで、開いているプロジェクトと同じディレクトリで、ブラウザIDEの中で動く完全なClaude Code CLIが手に入る。これが頼りになる道だ。ターミナルはサーバー上の本物のシェルであり、Claude CodeはそのサーバーにインストールされたCLIなので、動く。上のtmuxのステップと組み合わせれば、セッションは切断を生き延びる。
VS Codeの拡張機能の道も可能だが、このセットアップにとってはターミナルの道の方が依然として安全なベースラインだ。AnthropicはClaude CodeのVS Code拡張機能を公開しており、その現行のドキュメントはOpen VSXからインストールできると述べている。これが重要なのは、Code ServerがMicrosoftのVS Code MarketplaceではなくOpen VSXを使うからだ。Code Serverの拡張機能ビューで「Claude Code」を検索してみるか、あなたのインスタンスに現れたなら、Open VSXから Anthropic.claude-code 拡張機能をインストールしてみること。拡張機能がきれいにインストールされない場合、あるいはIDEの統合がデスクトップのVS Codeとは違う振る舞いをする場合は、統合ターミナルに立ち返ること。CLIはどんなターミナルでも動き、このVPSのセットアップにとっては、それが信頼できる道だ。
自分だけのブラウザベースのAI IDEをデプロイする
これで全体像が手に入った。ブラウザで到達できるVS Codeエディタと、その隣のClaude Code。HTTPSで保護され、接続の切断を生き延びるよう設定され、あなたが管理するVPS上にある。
このうち純粋なセットアップの手間である唯一の部分は、最初だ。何か面白いことをする前に、サーバーをプロビジョニングしてCode Serverをインストールしておくこと。それを省きたいなら、私たちは ワンクリックのCode Serverデプロイ をCloudzyのマーケットプレイスで提供している。それはCode Serverがすでに動いた状態でVPSをプロビジョニングするので、あなたはまっすぐログイン画面に着き、Claude Codeのインストールと認証へ直接進む。日常的な通常の利用では、生の http://<server-ip>:8080 ログインを最終的な本番アクセスの道として扱うのではなく、それでも上に示したようにインスタンスをCaddyまたはNginxでHTTPSの背後に置くこと。
同じ Linux VPS はスタック全体(エディタ、AI CLI、リバースプロキシ)を、このセットアップが必要とするroot権限付きでホストする。そこから先は、上記のステップが、あなたとどのブラウザからでもAIとコーディングすることとの間に立ちはだかるすべてだ。
これを構築する前に、どのAIコーディングCLIに決めるかまだ天秤にかけているなら、私たちの OpenCode対Claude Code の比較と、より広範な エージェント的コーディングCLIの対決 が、そのトレードオフを扱っている。
よくある質問
Code ServerとClaude CodeにはどのVPSスペックが必要か?
組み合わせたスタックには、少なくとも4 GBのRAM、2 vCPU、120 GBのストレージが必要だ。4 GBという最小要件はClaude Codeによって決まるのであって、Code Serverによってではない(Code Server単体はおよそ1 GBで動く)。拡張機能とより大きなプロジェクトを伴う快適な利用には、8 GBのRAMと4 vCPUが推奨サイズだ。
Claude Codeは無料か?
いいえ。Claude Codeには有料のClaudeプラン(Pro、Max、Team、またはEnterprise)、あるいはClaude Consoleを通じたAnthropicのAPIキーが必要だ。無料のClaude.aiプランにはClaude Codeへのアクセスが含まれていない。
ブラウザのないサーバーでClaude Codeをどう認証するか?
claudeを実行し、表示されるログインURLをローカルのマシンのブラウザにコピーしてログインを完了し、プロンプトが出たらコードをターミナルに貼り戻す。永続的なサーバーには、claude setup-tokenを実行して1年間有効なOAuthトークンを生成し、それをCLAUDE_CODE_OAUTH_TOKENとして設定するか、Claude ConsoleのAPIキーで認証するためにANTHROPIC_API_KEYを設定する。
Claude CodeのVS Code拡張機能はCode Serverの中で動くか?
Claude CodeのCLIはCode Serverの統合ターミナルの中で完全に動き、これがこのブラウザIDEのセットアップでそれを使う最も信頼できる方法だ。VS Codeの拡張機能も試す価値がある。AnthropicがそれをOpen VSXからインストールできると述べており、Code ServerがMicrosoftのVS Code MarketplaceではなくOpen VSXを使うからだ。拡張機能がきれいにインストールされない場合、またはあなたのインスタンスで違う振る舞いをする場合は、代わりに統合ターミナルの道を使うこと。
これをiPadやスマートフォンから使えるか?
はい。Code Serverはブラウザベースなので、モダンなブラウザを備えたどのデバイス(iPadやスマートフォンを含む)でも、完全なIDEに到達する。そのデバイスを問わないアクセスこそ、ブラウザIDEが、接続にローカルのVS Codeのインストールを必要とするVS Code Remote SSHに勝る主な利点だ。
