サーバーで AI を動かすメリットとは？ VPS で使う code-server

ハック！でAI編集部AIにより執筆2026年10月12日読了約18分

ブラウザで開いた code-server の画面。上のエディタに app.js、下のターミナルで Claude Code が作業している

この記事でわかること

手元の PC で動かす場合との違い(閉じても続く・スマホで見られる)
code-server を VPS に入れる公式の手順と、外から使う 2 つの方法
守り方のチェックリストと、費用の考え方・向かない作業

確認した環境: code-server 4.141.0(Code 1.141.0)/ Claude Code 2.1.296 / 撮影は編集部の検証用のサーバー(Ubuntu 26.04)/ 2026年10月12日に確認

AI のコーディングの道具は、手元の PC だけでなく、借りたサーバー(VPS)の上でも動かせます。この記事では、サーバーで動かすと何が変わるのかを、ブラウザで使える VS Code「code-server」を例に、編集部が試した結果で説明します。VPS に入れる流れ、守り方、費用の考え方もまとめました。

サーバーで動かすと、何が変わるか

Claude Code や Codex などの道具は、ファイルを読んだり、ターミナル(文字で命令を入力する画面)でコマンドを実行したりしながら作業します。手元の PC で動かすと、その作業は PC の中で行われます。サーバーで動かすと、作業はサーバーの中で行われ、手元の端末はブラウザで画面を見て指示を出すだけになります。

左にパソコン・スマホ(ブラウザで開く)、中央に VPS の code-server(VS Code と同じエディタ、ターミナルで Claude Code などを動かす、プロジェクトのファイル)、右に AI のモデル(Anthropic の API など)が並び、手元と VPS の間は HTTPS または SSH の転送、VPS と AI の間は HTTPS でつながる図 — サーバーで AI を動かすときのつながり方。ファイルも AI の道具も VPS の上で動き、手元の端末はブラウザで画面を開く撮影・作図: 編集部

手元の PC で動かす場合と比べると、次のような違いがあります。

PC を閉じても作業が続く: 手元の PC で動かすときは、PC をつけたままにする必要があります。Claude Code の公式のドキュメントも、PC の電源が切れる場合はクラウドで動く方法を使うよう案内しています。サーバーで動かせば、PC を閉じても作業はサーバーの中で続きます。
スマホやタブレットから続きを見られる: code-server はブラウザで開くので、スマホのブラウザからも同じ画面を開けます。
同じ環境をどこからでも使える: code-server の公式の説明にも、「どの端末からでも、同じ開発の環境で書ける」ことが利点として挙げられています。
CPU とメモリを選べる: 借りるサーバーの大きさを選べます。Claude Code の要件はメモリ 4 GB 以上です。
回線と電池: 公式の説明では、テスト・ビルド・ダウンロードなどをサーバーで速く行えること、重い処理がサーバーで動くので、外出先でも端末の電池が持つことが挙げられています。

PC を閉じたとき、スマホ・タブレット、作業の環境、CPU とメモリ、回線、電池、費用と手間の 7 つについて、手元の PC で動かす場合と、サーバー(VPS)で動かす場合を比べた表 — 手元の PC とサーバーの違い。緑の欄は、サーバーで動かすと有利になる点撮影・作図: 編集部

試してみた: ブラウザを閉じても、作業は続く

編集部の検証用のサーバーで code-server を動かし、ターミナルで Claude Code に依頼してから、ブラウザを閉じてみました。題材は、連載「Claude Code 入門」でも使っている、やることリストのアプリ(todo-app)をコピーしたフォルダです。

パソコンのブラウザで依頼する

code-server の中のターミナルで claude と入力して起動し、次のように頼みました。閉じている間に作業が進むかを見るため、わざと 1 分待ってもらう依頼にしています。
テキスト
```
sleep 60 で 1 分待ってから、app.js の行数を数えて教えてください(ブラウザを閉じても作業が続くかの試験です)
```
パソコンの幅のブラウザで開いた code-server。① サーバーのファイルを開いたエディタ ② ターミナルの Claude Code に送った依頼 ③ 作業中の表示(1 分待つコマンドを実行している)撮影・作図: 編集部
すぐにブラウザを閉じる

依頼を送ってから 8 秒後に、ブラウザのタブを閉じました。このとき Claude Code は、まだ 1 分待っている途中です。
スマホと同じ幅のブラウザで開き直す

約 2 分後に、スマホと同じ幅(390 ピクセル)にしたブラウザで開き直し、ログインしました。横のパネルを閉じて、ターミナルを広げると、作業の報告が表示されていました。

スマホと同じ幅で開き直した code-server。① 送った依頼 ② 閉じている間に書かれた報告(app.js は 55 行) ③ 作業が終わった時刻(午前 1 時 53 分)撮影・作図: 編集部

Claude Code の会話の記録で時刻を確かめると、ブラウザを閉じたのが 1 時 52 分 21 秒、1 分待つコマンドが終わったのが 1 時 53 分 17 秒、報告を書いたのが 1 時 53 分 20 秒でした。コマンドの実行も報告も、ブラウザを閉じている間に行われています。

code-server とは

code-server は、VS Code をサーバーで動かし、ブラウザから使えるようにするソフトウェアです。公式の説明は「Run VS Code on any machine anywhere and access it in the browser.」(どのマシンでも VS Code を動かし、ブラウザからアクセスする)です。

作っているところ: Coder 社が開発を支えている、MIT ライセンスのオープンソース(誰でも無料で使え、中身が公開されているソフトウェア)です。
版: 2026年10月12日の時点の最新は 4.141.0(10 月 8 日公開)で、VS Code 1.141.0 をもとにしています。
画面: VS Code と同じ画面が、ブラウザの中に表示されます。この記事の画面は、英語の表示のままです。

拡張機能は Open VSX から入れる

Microsoft の拡張機能のマーケットプレイスは、Microsoft 以外の VS Code から使うことが禁じられています。そのため code-server は、Open VSX という別の拡張機能の一覧を使います(公式の FAQ)。

Claude Code の拡張機能「Claude Code for VS Code」は Open VSX に登録されていて、code-server の拡張機能の画面で検索すると表示されました。2026年10月12日の時点の版は 2.1.296 です。

Claude Code for VS Code、Anthropic、ダウンロードの数と評価、説明の文、Install のボタンが表示されている — code-server の拡張機能の画面で「Claude Code」を検索して開いたところ。① 名前と発行元(Anthropic)。Install のボタンから入れられる撮影・作図: 編集部

ほかの道具の拡張機能は、次のとおりでした(2026年10月12日に Open VSX で確認)。

Codex: Open VSX にあります。ただし、Open VSX の最新の版は 9 月 11 日に公開されたもので、Microsoft のマーケットプレイスにある版より古くなっています。
GitHub Copilot: Open VSX に登録されていません。code-server の拡張機能の画面で「GitHub Copilot」と検索しても、GitHub の公式の拡張機能は出てきませんでした。名前の似たほかの作者の拡張機能は出てくるので、入れる前に発行元を確かめてください。

公式の FAQ には、Live Share と Remote 系(SSH・Containers・WSL)の拡張機能も使えないと書かれています。

VS Code の公式の方法との違い

VS Code にも、サーバーで作業する公式の方法があります。

Remote - SSH: 手元に入れた VS Code から、SSH でサーバーにつなぎます。サーバーのメモリは 1 GB が必要で、2 GB・CPU 2 コア以上が勧められています。
Remote Tunnels: 手元とサーバーの両方で、同じ GitHub か Microsoft のアカウントでサインインしてつなぎます。外向きの接続だけを使い、待ち受けのポート(外からの接続を受け付ける口)を作りません。1 つのサーバーにつなげるのは、一度に 1 人です。

code-server は、自分のサーバーに置いて、Microsoft や GitHub のアカウントを使わずにブラウザから使えるのが違いです。公式の FAQ は、code-server を「自分で運用する、無料のオープンソース」と説明し、パスワードの認証を持つことなどを違いとして挙げています。一方で、Microsoft のマーケットプレイスの拡張機能が必要なら、VS Code の Web 版(code serve-web)のほうが向くこともあると書いています。

VPS に入れる流れ

公式の手順(code-server の「Install」と「Setup Guide」)に沿って、Linux の VPS に入れる流れを説明します。始める前に、次のことを確かめます。

OS: code-server は、Linux ならどのディストリビューション(Ubuntu・Debian など、Linux の種類)でもよいとしています。配布しているのは amd64 と arm64 の 2 種類です。
大きさ: code-server だけなら、最低でもメモリ 1 GB・CPU 2 コアが勧められています。Claude Code も動かすなら、Claude Code の要件のメモリ 4 GB 以上を選びます。
ログイン: 手元の PC から、SSH でログインできること。

SSH でサーバーにログインする

手元の PC のターミナルから、VPS の会社に案内された方法でログインします。
インストールの内容を確かめる

公式のインストール用のプログラム(install.sh)は、--dry-run を付けると、実際には入れずに何をするかだけを表示します。
ターミナル
```
curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
```
--dry-run を付けて動かした画面。① 実行したコマンド ② 入れるもの(Ubuntu では deb のパッケージ) ③ 入れたあとに、サーバーの起動のたびに動かすためのコマンド撮影・作図: 編集部

編集部は管理者(root)で動かしたため、dpkg の行に sudo が付いていません。
インストールする

内容に問題がなければ、--dry-run を外して動かします。
ターミナル
```
curl -fsSL https://code-server.dev/install.sh | sh
```
起動して、サーバーを再起動したあとも動くようにする

画面の③の案内どおりに、systemd(サーバーの常駐のプログラムを管理する仕組み)に登録します。
ターミナル
```
sudo systemctl enable --now code-server@$USER
```
設定ファイルを確かめる

最初に起動したときに、~/.config/code-server/config.yaml ができます。公式の FAQ に載っている初期の中身は次のとおりです。
YAML
```
bind-addr: 127.0.0.1:8080
auth: password
password: mew...22 # Randomly generated for each config.yaml
cert: false
```
bind-addr の 127.0.0.1 は、そのサーバーの中からの接続だけを受け付けるという意味です。auth: password はパスワードでログインすること、password は自動で作られた長いパスワード、cert: false は HTTPS(暗号化した通信)を使わないことを表します。

編集部の環境で code-server を起動したときの表示。① 127.0.0.1 で待ち受けている ② 認証(パスワード)が有効 ③ HTTPS は使っていない。ほかのサービスとぶつからないよう、ポートの番号は 3297 に変えている。時刻は世界標準時撮影・作図: 編集部
外から使う方法を選ぶ

127.0.0.1 で待ち受けているので、このままでは手元の PC から開けません。次の章の 2 つの方法のどちらかで、つなぎます。
ブラウザで開いて、ログインする

パスワードの画面が出たら、設定ファイルの password の値を入れます。

code-server のログインの画面。① パスワードの欄。パスワードは設定ファイルに書かれている撮影・作図: 編集部
ターミナルで Claude Code を入れて、ログインする

code-server のメニューからターミナルを開き、Claude Code の公式のインストールのコマンドを動かします。
ターミナル
```
curl -fsSL https://claude.ai/install.sh | bash
```
claude と入力して起動し、案内に沿ってログインします。サーバーでは、ブラウザから Claude Code に自動で戻れないことがあります。そのときは、ブラウザに表示されたコードを、ターミナルの Paste code here if prompted のところに貼り付けます(公式のドキュメントより)。

外から使う 2 つの方法

code-server を手元の PC やスマホから使う方法として、公式の「Setup Guide」はいくつかの方法を挙げています。ここでは、そのうちの 2 つを説明します。

A. SSH の転送(手元の PC から SSH で VPS の 127.0.0.1:8080 につなぐ。ssh -N -L 8080:127.0.0.1:8080 のコマンド)と、B. HTTPS と認証(端末から HTTPS で Caddy などにつなぎ、中で code-server に渡す)を並べた図。下に、認証と暗号化なしでインターネットに開かないという注意がある — 外から使う 2 つの方法。A は SSH だけを外に開き、B は HTTPS と認証の入口を前に置く。どちらも code-server 自体は 127.0.0.1 で待ち受けたまま撮影・作図: 編集部

A. SSH の転送(公式がいちばん勧める方法)

SSH の転送は、手元の PC の 8080 番への接続を、SSH の中を通してサーバーの 127.0.0.1:8080 に届ける方法です。サーバーで SSH が動いていれば、ほかに用意するものはありません。

サーバーで、パスワードの認証を切って再起動する

公式の手順では、SSH を通した人だけが使える前提で、code-server のパスワードを切っています。
ターミナル
```
sed -i.bak 's/auth: password/auth: none/' ~/.config/code-server/config.yaml
sudo systemctl restart code-server@$USER
```
手元の PC で、転送を始める

手元の PC のターミナルで動かします。-N は、サーバーでシェルを開かずに転送だけをする指定です。
ターミナル
```
ssh -N -L 8080:127.0.0.1:8080 ユーザー名@サーバーのIPアドレス
```
手元のブラウザで開く

http://127.0.0.1:8080 を開くと、code-server の画面が表示されます。

SSH を使えない端末(iPad など)では、この方法は使えません。公式は、そのような端末から使うときは、次の B のような方法を勧めています。

B. HTTPS と認証の入口を前に置く(Caddy の例)

自分のドメイン(example.com のような、インターネット上の住所)と Let's Encrypt(無料で使える HTTPS の証明書)を使う方法です。公式の手順では、Caddy というウェブサーバーを、code-server の前に置きます。

サーバーを HTTP・HTTPS で届くようにして、ドメインを向ける

この方法では、サーバーをインターネットから HTTP・HTTPS で届くようにします。ドメインの A レコード(ドメインとサーバーの IP アドレスの対応)に、サーバーの IP アドレスを書きます。
Caddy を入れて、設定を書く

Caddy の公式の手順で入れたあと、/etc/caddy/Caddyfile を次のようにします(mydomain.com は自分のドメインに置き換えます)。
テキスト
```
mydomain.com {
  reverse_proxy 127.0.0.1:8080
}
```
Caddy を読み直す
ターミナル
```
sudo systemctl reload caddy
```
https://mydomain.com で開けるようになります。code-server のパスワードの認証は、切らずにそのまま使います。

パスワード: 変えるときは、設定ファイルの password を書き換えて、code-server を再起動します。ハッシュ(元に戻せない形)にしたパスワードを hashed-password に書くこともでき、こちらが優先されます。code-server は、パスワードを試せる回数を「1 分に 2 回と、1 時間にさらに 12 回」に制限しています。
SSO(会社などのアカウントでまとめてログインする仕組み): 公式の「Setup Guide」は、Google のアカウントでのログインなど外部の認証を使いたいときは、Pomerium・oauth2-proxy・Cloudflare Access などのリバースプロキシ(前に置いて、受け付けた接続を中に渡す仕組み)を使うよう案内しています。
自己署名の証明書: 自分で作った証明書も使えますが、公式は「最後の手段」としています。iPad では使えません。

守り方のチェックリスト

サーバーの AI の環境は、ファイルもコマンドも、ログインの情報もサーバーの中にあります。使い始める前に、次のことを確かめます。

通り道(HTTPS か SSH の転送、127.0.0.1 で待ち受け、外から届くのは SSH か HTTPS の入口だけ)、入口(長いパスワード、SSO、1 人に 1 台)、鍵と秘密(SSH は鍵、API キーを書かない、ログインの情報のファイルは本人だけが読める設定)、ふだんの手入れ(更新、使わないときは止める、社外に出せないデータは置かない)のチェックリスト — サーバーの AI の環境を守るチェックリスト。通り道・入口・鍵と秘密・ふだんの手入れの 4 つに分けた撮影・作図: 編集部

ログインの情報の置き場所: Linux の Claude Code は、ログインの情報を ~/.claude/.credentials.json に、本人だけが読み書きできる設定(0600)で保存します。このファイルの設定を広げないでください。
API キー: API キーやパスワードを、リポジトリのファイルや依頼の文に書かないでください。
1 人に 1 台: code-server の公式の FAQ は、複数の人で使うなら、1 人に 1 台の仮想マシンを用意するよう勧めています。

AI の道具ごとの権限や秘密情報の守り方は、AI コーディングの道具を安全に使うで説明しています。

費用の考え方

サーバーで動かすときの費用は、3 つに分けて考えます。

① サーバーの料金(VPS の月額、メモリ 4 GB 以上、料金表で確かめる)、② AI の料金(Claude の有料プランか API の使った分、手元の PC と同じ)、③ 手間(更新、守りの設定、止まったときの対応)を足し算で並べた図 — 費用は 3 つに分けて考える。サーバーで動かすと増えるのはサーバーの料金と手間で、AI の料金は動かす場所では変わらない撮影・作図: 編集部

① サーバーの料金: VPS の月額は、借りる大きさで変わります。申し込む前に、その会社の料金表で、メモリ 4 GB 以上のプランの月額を確かめます。HTTPS で使うなら、ドメインの費用もかかります。
② AI の料金: Claude Code は、Claude の有料プランに含まれます。Pro は月払いで月 20 ドル、年払いなら月 17 ドル相当(200 ドルを一括で払う)です(2026年10月12日に確認・米ドル・税別)。API キーで使う場合は、使った分だけの料金です。どちらも、手元の PC で使うときと同じ契約で数えます。最新の料金は Claude の料金ページで確かめてください。
③ 手間: OS と道具の更新、入口の守りの見直し、止まったときの対応が増えます。

code-server 自体は、無料で使えるソフトウェアです(MIT ライセンス)。

向かない作業

次のような作業は、サーバーより手元の PC のほうが向いています。

手元の機器を使う作業: USB でつないだ機器など、手元にあるものを使う作業。
社外に置けないデータを扱う作業: 会社の決まりで、コードやデータを社外のサーバーに置けない場合。
インターネットにつながらない場所での作業: ブラウザからサーバーにつなぐため、回線が要ります。
大きなファイルを手元とやり取りする作業: サーバーと手元の間の転送に時間がかかります。
GitHub Copilot の拡張機能を使いたい場合: code-server では入れられません(上の「拡張機能は Open VSX から入れる」を参照)。

次の回のYES ボタンの押し疲れを減らす。お風呂の間も作業を止めない方法では、AI の道具が出す確認の画面(YES のボタン)を押す手間を減らす方法を、公式の仕組みで説明します。

参考にした公式の情報

X Facebook はてブ LINE

この記事は、ハック！でAI編集部が AI を使って執筆しました。画面の画像は、編集部の検証環境で実際に操作して撮影したものです(引用の画像は出典を記載しています)。内容の誤りはお問い合わせからお知らせください。

連載

AIを動かす環境とコスト

次の回(第2回)YES ボタンの押し疲れを減らす。お風呂の間も作業を止めない方法

全 6 回の目次

1サーバーで AI を動かすメリットとは？ VPS で使う code-server(この記事)
2YES ボタンの押し疲れを減らす。お風呂の間も作業を止めない方法
3Claude Code のサブスクと API、どちらが得か編集部の実測で計算
4クラウド vs VPS。AI の時代に VPS でクラウドは超えられるのか
5Web はレンタルサーバーで十分。足りなくなる 4 つの場面
6自作で脱 SaaS はできる？作りやすいものと難しいもの