Claude Code UI×Tailscaleで外出先でもセキュアにClaude Codeを使おう!

1 はじめに
2 Claude Code UIとは
3 既存の方法とセキュリティの課題
4 Tailscaleとは
5 セットアップ
6 Tailscaleのアクセス制御設定
- 6.1 ACLの設定手順
- 6.2 アクセスの確認
7 おわりに

はじめに

こんにちは! 参画しているプロジェクトが少し落ち着いてきて余裕が出てきたなーがです。今回はClaude Code UI×Tailscaleで外出先でもセキュアにClaude Codeを使う方法について解説します。

Claude Codeは通常ターミナルベースで動作するため、外出先からスマートフォンやタブレットで利用するのは困難です。しかし、Claude Code UIとTailscaleを組み合わせることで、モバイルデバイスからも安全にClaude Codeにアクセスできるようになります。

今回の設定を行うことで、自宅のPCで動作しているClaude Code UIに、外出先からセキュアにアクセスできるようになります。

Claude Code UIとは

Claude Code UIは、Anthropic社のClaude Code CLIをWebブラウザから操作できるオープンソースのGUIツールです。siteboon氏によって開発され、GitHubで公開されています。

Claude Code UIの主な特徴は以下の通りです。

デスクトップ、タブレット、モバイルデバイスでシームレスに動作するレスポンシブデザイン
~/.claude/projects/ から自動的にプロジェクトを検出し、視覚的なプロジェクトブラウザを提供
セッション管理機能により、過去の会話の再開や複数セッションの管理が可能
MCP（Model Context Protocol）サーバーのサポート
シンタックスハイライト機能を備えたファイルツリーとライブ編集機能
WebSocketによるリアルタイムストリーミング通信

Claude Code UIは、Node.js環境で動作し、Viteの開発サーバーを使用してローカルで実行されます。これにより、通常はターミナルでしか操作できないClaude Code CLIを、直感的なWebインターフェースから利用できるようになります。

参照:

既存の方法とセキュリティの課題

Claude Code UIをモバイルから利用する方法として、Cloudflare TunnelやVS Code Serverを使用した例がいくつか公開されています。

これらの方法でも外出先からのアクセスは実現できますが、URLを知っていれば誰でもアクセスできてしまうというセキュリティ上の問題があります。開発環境への不正アクセスは、ソースコードの流出やAPI鍵の漏洩など、深刻な被害につながる可能性があります。

そこで今回は、Tailscaleを使用したよりセキュアなアプローチをご紹介します。Tailscaleを利用することで、認証されたデバイスからのみアクセス可能な、真にプライベートなリモート開発環境を構築できます。

Tailscaleとは

TailscaleはWireGuardプロトコルをベースとした、P2P型のメッシュVPNサービスです。2019年に元Googleのエンジニアによって設立されたTailscale社が提供しています。

従来のVPNは中央のゲートウェイサーバーを経由する必要があり、トラフィックの集中や単一障害点といった課題がありました。一方、Tailscaleはデバイス間で直接P2P接続を確立するため、これらの課題を解決しています。

Tailscaleの主な特徴は以下の通りです。

WireGuardによるエンドツーエンドの暗号化通信
ゼロトラスト・アーキテクチャによる高いセキュリティ
NATやファイアウォールを自動で透過するNAT Traversal機能
GoogleやMicrosoftなどの既存アカウントで簡単にログイン可能
ACL（アクセス制御リスト）による柔軟なアクセス制御
個人利用であれば最大100台のデバイスまで無料で利用可能

Tailscaleは特別なハードウェアやサーバーの構築が不要で、数分でセキュアなプライベートネットワーク（tailnet）を構築できます。また、既存のネットワーク環境に影響を与えないオーバーレイネットワークとして動作するため、段階的な導入が可能です。

参照:

セットアップ

Claude Code UIを実行するPC

まずはClaude Code UIの設定から始めます。前回の記事ではClaude Code UIのライブラリをインストールするところまで行ったので、インストールに躓いた方はそちらを参考にしてください。

環境変数を設定します。README.mdに従って .env.example をコピーして .env を作成します。

cp .env.example .env

.env ファイルを編集して、必要に応じてポート番号などを設定します。デフォルトでは3001番ポートが使用されます。

アプリケーションを起動します。

npm run dev

ブラウザで http://localhost:5173 にアクセスし、Claude Code UIが正常に起動することを確認してください。

次に、PC起動時に自動でClaude Code UIを起動させるためのバッチファイルを作成します。Windows + Rキーを同時押しして下記のコマンドを入力し、OKを押すとスタートアップディレクトリが表示されます。

shell:startup

下記の内容でバッチファイル start-claude-code-ui.bat を作成し、スタートアップディレクトリに配置します。

@echo off
cd /d "C:\\Users\\shota\\ws\\claudecodeui"
npm run dev
pause

Tailscaleのインストールと設定

次にTailscaleをインストールして設定を行います。

Tailscale公式サイトからインストーラーをダウンロードして実行します
GoogleやMicrosoftなどの任意のアカウントでログインします
Windows版の場合、システムトレイにTailscaleのアイコンが表示されます
アイコンをクリックして「Connect」ボタンを押し、VPN接続を確立します

接続が成功すると、デバイスにtailnet用のIPアドレス（100.x.x.x形式）が割り当てられます。

tailscale serveの設定

tailscale serve コマンドを実行して、ローカルで動作しているClaude Code UIをTailscaleネットワーク内に公開します。このコマンドを使用すると、開発中のWebアプリケーションをTailscaleネットワーク内の他のデバイスから安全にアクセス可能にできます。

Claude Code UIはViteの開発サーバーで実行されており、デフォルトではポート5173で動作しているため、接続先を http://localhost:5173 として指定します。さらに、オプション --bg を使用することで、ターミナルを閉じてもバックグラウンドでサービスが実行され続けるようにします。

tailscale serve --bg <http://localhost:5173>

実行すると、以下のような出力が表示されます。

Available within your tailnet:
<https://test-server.tailXXXXXX.ts.net/>
|-- proxy <http://localhost:5173>

Serve started and running in the background.
To disable the proxy, run: tailscale serve --https=443 off

この https://test-server.tailXXXXXX.ts.net/ というURLが、Tailscaleネットワーク内からアクセスできるClaude Code UIのアドレスになります。

重要: tailscale serve で公開したサービスは、デフォルトではHTTPSで提供され、Tailscaleが自動的に証明書を発行します。

スマートフォンなど外出先で使用するデバイス

Google Play StoreまたはApp StoreからTailscaleアプリをインストールします
- Google Play Store
- Apple App Store
PC側と同じアカウントでログインします
トグルボタンをタップして Connected 状態にします

接続が成功すると、スマートフォンもtailnet内のデバイスとして認識され、PC側で設定したドメイン名でアクセスできるようになります。

Tailscaleのアクセス制御設定

Tailscaleのデフォルト設定では、自分のデバイス間は全て許可されるというポリシーが設定されています。

{
  "acls": [
    // Allow all connections.
    // Comment this section out if you want to define specific restrictions.
    {"action": "accept", "src": ["*"], "dst": ["*:*"]},
  ],
}

しかし、セキュリティを強化するために、ACLを設定してアクセスできるデバイスを制限することをお勧めします。

ACLの設定手順

Tailscale管理コンソールにログインします
Access controls からTags を選択して + Create tag をクリックします
以下の2つのタグを作成します
- tag:server – Claude Code UIを実行するPC用
- tag:client – 外出先で使用するデバイス用
General access rules セクションから + Add rule をクリックして、以下のようなアクセスルールを作成します