code-serverにClaude Codeを導入し、ブラウザで動作するAI駆動開発環境を構築する

はじめに

この記事では、リモートサーバー上でcode-serverを使用してVSCodeをブラウザで動作させ、そこでClaude Codeを利用する方法について解説します。

Claude CodeはAnthropic社が開発したAI駆動のコーディングツールで、コード編集、バグ修正、テスト実行などを自然言語で指示することができます。code-serverと組み合わせることで、場所を選ばずにブラウザ経由でAI支援開発環境にアクセスできるようになります。

前提

この記事はUbuntu環境での手順を想定しています。code-serverの詳細についてはcode-server公式ページを参照してください。

概要

Claude Codeは、Anthropic社が開発したAI駆動のコーディングツールで、ターミナル上で直接動作します。code-serverと組み合わせることで、ブラウザ経由でどこからでもClaude Codeを活用した開発環境にアクセスできるようになります。

セットアップ手順

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

curl -fsSL https://code-server.dev/install.sh | sh

2. code-serverの初回起動（設定ファイル作成のため）

sudo systemctl enable --now code-server@$USER

3. 外部からアクセスできるように設定を編集

vi ~/.config/code-server/config.yaml

設定ファイルの内容：

bind-addr: 0.0.0.0:8080
auth: password
password: secure-password
cert: false

4. code-serverの再起動

sudo systemctl restart code-server@$USER

5. ブラウザからアクセス

http://your-server-ip:8080 にアクセスし、設定したパスワードでログインします。

code-serverログイン画面

6. ターミナルを開く

code-server内でターミナルを開きます（メニュー → Terminal → New Terminal）。

ターミナルを開く

7. nvmのインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm --version

8. Node.jsのインストール

nvm install node
node --version

9. Claude Codeのインストール

npm install -g @anthropic-ai/claude-code

10. Claude Codeの起動と初期設定

claude

Claude Codeを起動すると、以下の設定画面が表示されます：

テーマの選択: 好みのテーマを選択

テーマ選択

Claude Codeの利用方法選択: 初回利用時は認証が必要

利用方法選択

認証: ブラウザでAnthropicアカウントにログインし、認証コードを取得

認証URL

認証コードの入力: 取得したコードを貼り付けてEnterキーを押下

認証コード入力

注意事項の確認: 利用規約や注意事項を確認

注意事項

ターミナル設定: 必要に応じてターミナルの設定を行う

ターミナル設定

ディレクトリの許可: 作業ディレクトリへのアクセス許可

ディレクトリ許可

11. VSCode拡張機能のインストール（重要）

Claude CodeをVSCode（code-server）で使用するには、専用の拡張機能をインストールする必要があります。

初期状態では、Claude Codeは使用可能ですが、VSCode用の拡張機能がインストールされていません

/ideで拡張機能に接続しようとしても表示されません：

拡張機能接続失敗

拡張機能ファイルの検索

find ~/ -name "*.vsix" -type f

私の環境では以下に配置されています：

~/.nvm/versions/node/v24.1.0/lib/node_modules/@anthropic-ai/claude-code/vendor/claude-code.vsix

拡張機能のインストール

code-server --install-extension /path/to/claude-code.vsix

実際のコマンド例：

code-server --install-extension /home/ubuntu/.nvm/versions/node/v24.1.0/lib/node_modules/@anthropic-ai/claude-code/vendor/claude-code.vsix

拡張機能のインストールが成功すると、以下のような表示になります：

ubuntu@vm-ubuntu22:~$ code-server --install-extension /home/ubuntu/.nvm/versions/node/v24.1.0/lib/node_modules/@anthropic-ai/claude-code/vendor/claude-code.vsix
Installing extensions on 172.26.100.5:8080...
Extension 'claude-code.vsix' was successfully installed.
ubuntu@vm-ubuntu22:~$