【ハンズオン】PC不要？ Claude CodeをLightsailで動かし、Claudeモバイルアプリだけでアプリを作る

導入

自宅のWindows PCにClaude Codeをインストールして使っている、という方は多いのではないでしょうか。しかし、いざ外出先でも開発を続けたいとなると、そのためだけに自宅PCの電源を入れっぱなしにしておくのは少しもったいないですし、かといってクラウド上に開発環境を構築するとなると、それなりに準備が必要です。

そこで本記事では、Amazon Lightsailに手軽なLinux環境を1つ用意し、Claude Code・Python・nginxを使って、開発から外部公開まで行える環境を整えます。これにより、外出先からでもClaudeモバイルアプリを使ってClaude Codeに接続し、スマホだけで開発を続けられる環境を構築します。

今回は、Claudeモバイルアプリからの指示だけで「サーバーリソースモニター」（CPU・メモリ・ディスクの使用状況を可視化するWebダッシュボード）をゼロから構築し、nginx経由で外部公開するところまでをハンズオン形式で進めます。

この記事でやること

  • Amazon LightsailにUbuntuインスタンスを構築し、Claude Codeをセットアップする
  • tmuxとRemote Controlを使い、ClaudeモバイルアプリからClaude Codeを操作できるようにする
  • Claudeモバイルアプリからの指示だけでWebアプリを作成し、HTTPで外部公開する

前提条件

  • Claude Codeを利用できるAnthropicアカウント
  • Claudeモバイルアプリをインストール済みであること

Step 1. Lightsailサーバーの準備

1-1. Lightsailインスタンスの作成

まずはAWSマネジメントコンソールからAmazon Lightsailのインスタンスを作成します。プラットフォームは「Linux オペレーティングシステム」を選び、設計図(OSイメージ)はUbuntu 24.04 LTSを選択します。


サイズは、今回は開発作業を行う用途のため、メモリに余裕のある$12プラン(2GBメモリ / 2仮想CPU / 60GB SSD)を選択しました。Claude Codeでのビルドやテストサーバーの起動を同時に行うことを考えると、512MBや1GBのプランではメモリ不足になりやすいための判断です。

インスタンス名は識別しやすい任意の名前(例: ClaudeRemote2G)を付け、自動スナップショットやタグ付けなどのオプションは今回は特に設定せず、デフォルトのまま「インスタンスの作成」を行います。


インスタンス名(ClaudeRemote2G)を入力し、その他はデフォルト設定のままインスタンス作成ボタンを押す直前の画面

1-2. ネットワーク設定(静的IPアドレスの割り当て)

インスタンス作成後、詳細画面の「ネットワーキング」タブで設定を確認します。ファイアウォールルールはデフォルトのままでよく、この時点でHTTP(TCP/80)とSSH(TCP/22)が既に許可されています。後ほどnginxを80番ポートで公開する際も、追加のルール変更は不要です。

唯一設定しておきたいのが静的IPアドレスです。デフォルトのままだとインスタンスを停止・起動するたびにパブリックIPアドレスが変わってしまい、動作確認のたびにアドレスを調べ直す手間が発生します。「静的IPのアタッチ」から静的IPアドレスを割り当てておくと、以降はこのIPアドレスで一貫してアクセスできるようになります。


インスタンス詳細画面のネットワーキングタブ。静的IPアドレスがアタッチされている様子とファイアウォールルール(HTTP:80、SSH:22)の一覧

なお、本記事ではHTTPS化(SSL証明書の設定)は割愛します。Lightsail環境をHTTPS対応させる手順は別記事「Lightsail + IPアドレス証明書でHTTPS環境構築」で解説していますので、そちらをあわせてご参照ください。

1-3. ブラウザターミナルで接続

インスタンスが作成できたら、インスタンス一覧のカードに表示されている端末アイコン(>_)をクリックします。SSHクライアントを別途用意しなくても、ブラウザ上に新しいウィンドウでターミナルが開き、そのままインスタンスにログインした状態になります。


Lightsailインスタンス一覧の端末アイコンをクリックし、ブラウザ上のターミナルウィンドウでインスタンスにログインしている様子

本記事ではここから先の操作を、このブラウザターミナル経由で行います。手元の環境にSSHクライアントを用意する必要はありません。

Step 2. Claude Codeのインストールとリモートでの起動

2-1. Claude Codeのインストール

公式のインストールスクリプトを実行するだけで導入できます。

curl -fsSL https://claude.ai/install.sh | bash

インストール後、~/.local/bin にPATHが通っていない旨の案内が出るので、案内どおり.bashrcに追記して反映します。

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc && source ~/.bashrc

claude --versionでバージョンが表示されればインストール完了です。

claude --version
2.1.251 (Claude Code)

2-2. ハンズオン用フォルダの作成

検証用の作業フォルダを作成し、以降はこのディレクトリで作業します。

mkdir -p ~/work/handson
cd ~/work/handson

2-3. tmuxとRemote Control(/rc)でセッションを維持しながら起動

ここからはtmux上での作業になります。ブラウザターミナルを閉じても処理が続くよう、tmuxセッションを開始してからClaude Codeを起動します。

tmux new -s claude
claude

claudeコマンドを初回起動するとログイン方法の選択画面になるので、契約しているプラン(Pro/Max/Team/Enterpriseなど)に応じて「Claude account with subscription」を選びます。

Select login method:
> 1. Claude account with subscription ・ Pro, Max, Team, or Enterprise
  2. Anthropic Console account ・ API usage billing
  3. 3rd-party platform ・ Amazon Bedrock, Microsoft Foundry, or Vertex AI


Claude Codeのログイン方法選択画面。Claude account with subscriptionが選択されている

ブラウザターミナルはブラウザが自動起動できないため、表示されたOAuth認証用URLを手元のブラウザで開き、認証後に表示される認可コードをターミナルに貼り付けます。

Browser didn't open? Use the url below to sign in (c to copy)
https：//claude.ai/oauth/authorize?...

Paste code here if prompted > ****************************************LyJyjo

Login successful.と表示されれば認証完了です。

tmux上でClaude Codeを起動すると、画面下部のステータスバーに/rc failedと表示されることがあります。これはRemote Control(モバイル版Claudeアプリなど他デバイスからこのセッションを操作する機能)が未接続の状態です。

ステータスバーに/rc failedと表示されている状態
/remote-control(または/rc)コマンドを実行すると案内メニューが表示されるので、「1. Enable Remote Control」を選びます。

/remote-controlコマンド実行後のメニュー画面。Enable Remote Controlを選択している
接続されるとステータスバーが/rc activeに変わり、以降はモバイル版のClaudeアプリやclaude.ai/codeからこのセッションに接続できます。


ステータスバーに/rc activeと表示されている状態

実際にスマートフォンでClaudeアプリの「コード」タブを開くと、サーバー上のセッション(インスタンス名から自動生成された名前で表示されます)が一覧に表示されます。

モバイル版Claudeアプリのコードタブに、接続済みのリモートセッションが表示されている

セッションを開いて試しに「hello」と送ると、Lightsail上のClaude Codeが応答します。ブラウザターミナルを閉じたあとでも、この画面から続きを操作できます。


モバイル版Claudeアプリからhelloと送信し、応答が返ってきている画面

このときブラウザターミナル側(CLI)を見ると、スマホから送った「hello」とその応答が同じセッションにそのまま反映されています。同じ会話をスマホとブラウザターミナルの両方から継続できることが確認できます。


ブラウザターミナル側でも同じhelloのやり取りが表示されている画面

ここまでで「スマホからクラウド上のClaude Codeを操作できる環境」は完成です。ここからは実際にアプリを1つ作ってみます。

Step 3. サーバーリソースモニターを作る

ここからはスマホのClaudeアプリから、Lightsail上のClaude Codeセッションに指示を出して進めます。今回作りたかったのは、以下のようなシンプルなサーバーリソースモニターです。

  • CPU / メモリ / ディスク使用率を取得
  • HTMLダッシュボードで表示
  • 自動更新

スマホから投げたプロンプトはこちらです。

サーバのリソースモニターを作りたいです。
Pythonとfastapiです。
venvやrequirements.txtを作成して。

作成指示のプロンプト
これだけの指示で、venvやrequirements.txtはもちろん、FastAPI本体(app/main.py)とダッシュボードUI(static/index.html、自動更新付き)まで一気に作成されました。

handson/
├── venv/                  ・Python仮想環境
├── requirements.txt       ・fastapi, uvicorn, psutil
├── app/
│   └── main.py             ・FastAPIアプリ本体
└── static/
    └── index.html          ・ダッシュボードUI(自動更新)

起動コマンドも合わせて提示してくれたので、そのまま実行して動作確認します。

cd /home/ubuntu/work/handson
./venv/bin/uvicorn app.main:app --host 0.0.0.0 --port 8000

一つの指示だけでここまで組み上がったのは正直驚きでした。ブラウザターミナル側でcurlして動作確認します。

$ curl localhost:8000


curl localhost:8000でダッシュボードのHTMLが返ってきている様子

Step 4. nginxでリバースプロキシ + Basic認証を設定

このままでは外部から閲覧できないので、nginxと連携してWebサービスとして公開します。スマホから投げたプロンプトはこちらです。

nginxをインストールして80から閲覧可能としてください。
認証はbasicとしてください。

Claude Codeからは、Basic認証用のユーザー名・パスワードをどうするか(ランダム生成/自分で指定)を確認する質問が返ってきました。


Basic認証のパスワードをどうするか確認するAskUserQuestionの画面

設定完了後、ブラウザでhttp://(LightsailのIPアドレス)にアクセスすると、Basic認証のログインダイアログが表示され、認証が正しく機能していることを確認できます。

今回はFastAPIを利用しているため、画面表示だけでなくWeb APIもあわせて利用できる構成になっています。

注意
Claude Codeの生成結果は、実行時の状況やコンテキスト、モデルの応答によって変わるため、本記事とまったく同じ手順・構成・画面になるとは限りません。本記事はあくまで実行例の1つとしてご覧ください。


ブラウザでアクセスするとBasic認証のログインダイアログが表示される
作成されたダッシュボード
webapi

注意: 本記事ではハンズオンを簡潔にするためHTTPで公開しています。Basic認証の認証情報は暗号化されないため、本番利用や継続利用では必ずHTTPS化してください。

おまけ: systemdでプロセスを常駐させる

tmuxセッションを閉じてもuvicornが動き続けるよう、systemd化しておくと安心です。/etc/systemd/system/resource-monitor.serviceを作成し、以下のような内容にします。

[Unit]
Description=Server Resource Monitor
After=network.target

[Service]
User=ubuntu
WorkingDirectory=/home/ubuntu/work/handson
ExecStart=/home/ubuntu/work/handson/venv/bin/uvicorn app.main:app --host 0.0.0.0 --port 8000
Restart=always

[Install]
WantedBy=multi-user.target

作成後、以下のコマンドで有効化・起動します。

sudo systemctl daemon-reload
sudo systemctl enable resource-monitor
sudo systemctl start resource-monitor
sudo systemctl status resource-monitor

あわせて、nginxもOS再起動時に自動起動するよう有効化しておきます。

sudo systemctl enable nginx
sudo systemctl status nginx

まとめ

今回は、Amazon Lightsail上にClaude Codeをインストールし、tmuxとRemote Control（/rc）を組み合わせることで、外出先からスマートフォンのClaudeアプリだけで開発を進められる環境を構築しました。

プロジェクトの初期化を指示しただけで、FastAPI本体からダッシュボードUIまで一括で生成されたのは驚きでした。nginxによるリバースプロキシやBasic認証の設定も含め、思った以上に少ないやり取りで「サーバーリソースモニター」を外部公開まで持っていくことができました。

自宅PCの電源を気にすることなく、スキマ時間にスマホから開発を継続できるのは想像以上に快適です。今回はシンプルなWebアプリを題材にしましたが、同じ要領で、より本格的なアプリ開発のリモート環境としても応用できそうです。

×
タイトルとURLをコピーしました