スマホから自宅Codexを使える環境を作る（Codex Extension × code-server × Cloudflare）

概要

おじさんがハマる3Cとはなんでしょうか？

そう、Codex、code-server、Cloudflareですね。

ここ最近は特に、自宅環境で動かしてる Codex / ClaudeCode を外で使うためのネイティブアプリやWebアプリを自前開発してる人がすごく多い印象を受けます。ちょうど僕もこの前、自宅のUbuntuでCodexExtensionをブン回しながら、スマホ片手に様子を見つつマックでも買いに行けたら良いのになぁ...という気持ちになっていました。

便利なものを作って公開してくださっている方はたくさんいらっしゃるようなのですが、昨今いろいろ物騒ですから、迷いなくフルアクセスを選んで適当にCodexブン回してるような雑セキュリティの人間がサードパーティのものを導入するのは少し怖さがあります。

RDPやCLIでの操作共有も少し考えましたが、どちらもスマホから快適に使えるかというとちょっと...。ということで、私なりに使い慣れたもので良い感じの折衷案を考えてみました。

結論から言うと、code-serverを使ってWeb経由でCodex Extensionを使います。そして接続経路のトンネリングとHTTPSへのリバースプロキシをCloudflareに任せるといった感じ。「スマホから」と書きましたが、ブラウザさえ快適に開ければどの環境からでもいけます。

前提

完成想定構成

[スマホブラウザ]
   ↓ 
[Cloudflare Access]
   ↓
[自宅Ubuntuサーバ]
   └ code-server（HTTP）
       └ Codex Extension
       └ Codex CLI

⚠️ 最初にHTTPS化する経路を整えておく（重要）

今回code-serverを用いてWebベースでVSCodeをいじっていくことになりますが、HTTPS公開できていないといろんな制限を受けて面倒です。

• Codex Extension → CORS違反で開けず
• Markdownプレビュー → iframe制限で開けず

code-server 公式でも、webview が service worker に依存している都合で secure context が必要となっており、対処方法として localhost で開く、実在証明書付きドメインを使う、信頼済み証明書を使うなどの手順が案内されています。

ドメイン契約してCloudflare使う方法（この記事で紹介）か、Let's EncryptやCaddy使って発行した証明書をcode-serverに読み込ませるか前段リバースプロキシするか、何かしらでHTTPSで通信できる経路を整える必要があります。

（あとは試していませんが、CloudflareのQuick Tunnelを使えば、ドメイン契約すら無しで無料でできるかもしれませんね）

前提環境

今回の検証環境は以下の通りです。

• サーバー
  • 機種：GMKtec NucBox G9
  • OS：Ubuntu 24.04
  • Arch：x86_64
  • RAM：12GB
• スマホ
  • 機種：iPhone17
  • ブラウザ：Safari
• Cloudflareアカウント
  • アカウント登録＆ドメイン契約済み

手順

もくじ

1. code-server のインストールと初期設定
2. Codex CLI のインストールとログイン
3. Cloudflare Zero Trust で Tunnel / Connector を作成して公開する
4. 公開URLから code-server に接続確認
5. 別環境で Codex Extension の VSIX を取得してサーバへ配置
6. code-server の Web 画面から VSIX をインストール
7. Codex Extension の動作確認

---

1. code-server のインストールと初期設定

code-server 公式は Linux / macOS / FreeBSD 向けに install.sh を提供しており、可能ならシステムのパッケージマネージャを使うようになっています。Ubuntu 系ではインストール後に systemctl enable --now code-server@$USER でユーザーサービスとして起動する流れが楽です。

まずはインストールから。

curl -fsSL https://code-server.dev/install.sh | sh
sudo systemctl enable --now code-server@$USER
systemctl status code-server@$USER --no-pager

code-server は初回起動時に ~/.config/code-server/config.yaml を作成し、デフォルトでは 127.0.0.1:8080 で待ち受け、パスワード認証を有効にし、TLS は無効になっています。

今回の構成では、code-server 自体は loopback のままで問題ありません。むしろその方が安全です。

設定ファイルを確認します。

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

最低限、以下のようになっていればOKです。

bind-addr: 127.0.0.1:8080
auth: password
password: "十分に長いランダム文字列"
cert: false

パスワードやbind-addrを変更した場合、一度再起動します。

sudo systemctl restart code-server@$USER

起動確認は /healthz が手軽です。/healthz は認証不要で、生存確認に使えます。

curl -fsS http://127.0.0.1:8080/healthz

2. Codex CLI のインストールとログイン

Codex CLI は OpenAI 公式リポジトリで npm install -g @openai/codex または Homebrew でのインストールが案内されています。今回は Ubuntu 24.04 なので npm で入れます。

まず npm を使えるようにします。

sudo apt update
sudo apt install -y nodejs npm
node -v
npm -v

次に Codex CLI を入れます。

sudo npm install -g @openai/codex
codex --version

ログイン方法

SSHなどで別環境から作業をしている場合、Codex Extensionからそのままサブスクプランでログインすることはできません。（APIキーログインならいけるかも）この問題を回避するために、一旦CodexCLIからデバイスコード認証でログインを通しておきます。

ローカルで直接作業しているならこの手順は飛ばして、Extensionから通常ログインでもよいはずです。私はUbuntuにWindows母艦のPowerShellからSSHして作業しているので、以下のようにデバイスコード認証でログインしました。

※事前にデバイスコード認証を有効にしていない場合は次項の手順でChatGPTのWeb画面から設定の有効化操作が必要です

codex login --device-auth

ChatGPT 側でデバイスコード認証を有効化する

上のdevice-authログインに失敗した場合（デバイスコード認証を有効化してからやり直してくれという旨のエラーが出た場合）、下記の手順で有効化してからやり直す必要があります。

• 個人利用: ChatGPT の設定画面 > セキュリティ > Codex に対してデバイスコード認証を有効にする を有効化
• Business / Enterprise / Edu 等のワークスペース利用: 管理者が workspace permissions 側で有効化（未確認）
  

有効化後に codex login --device-auth を実行すると、CLI に URL とワンタイムコードが出るので、手元のスマホやPCブラウザでそのURLを開いてコードを入力すればログインできます。

3. Cloudflare Zero Trust で Tunnel / Connector を作成して公開する

Cloudflare Tunnel は、 cloudflared というサーバ側デーモンでアプリケーションの公開ポートと契約ドメイン（HTTPS）への接続経路をリバースプロキシで作ってくれます。ダッシュボードから作成する場合、インストールコマンドは画面側が出してくれるので、それをそのまま使うのが一番簡単です。

ドメインを有償で購入するだけで、クラウド系サービスや大変大変便利なリバースプロキシなどが無料で使えるようになります。とても良いのでみんな今すぐ契約しよう。（かなり安い）

Tunnel 作成手順

Cloudflareダッシュボード > Zero Trust > ネットワーク > コネクタ > トンネルを作成 > 「選択するCloudflared」 > トンネルに名前を付けて保存

として、まずトンネルを作成します。

表示されたウィザードに沿って、OS に合った cloudflared のインストール・実行コマンドをコピーしてサーバで実行します。（Ubuntuの場合は「Debian」の手順を選択してください）

サーバー側で cloudflared が正常に立ち上がると、Cloudflare 側で connector が見えるようになります。確認できたら完了ボタンを押下します。コネクタ一覧からステータスがUPまたは正常となっていることを確認しましょう。

公開ドメインと転送先の設定

先ほど作成したトンネルの右側三点メニュー > 設定 から 公開アプリケーションルート タブで公開ホスト名を追加します。

ここで サブドメイン / ドメイン を設定し、サービス では Type: HTTP、URL: localhost:80 のように origin を指定します。今回の code-server は http://127.0.0.1:8080 なので、 Type: HTTP 127.0.0.1:8080 でよいです。

• サブドメイン: code
• ドメイン: example.com
• Type: HTTP
• URL: 127.0.0.1:8080

公開URLは以下のようになります。

https://code.example.com

4. 公開URLから code-server に接続確認

ここまで終わったら、スマホやPCのブラウザで公開URLへアクセスします。

https://code.example.com

ここまで正しく設定できていれば、code-server のログイン画面が出るはずです。
手順1で設定したパスワードを使ってログインしましょう。

（ここで正しくHTTPSで通信できていることも確認しておいてください）

---

5. 別環境で Codex Extension の VSIX を取得してサーバへ配置

code-server は Microsoft の Marketplace をそのまま使えません。そのため、Extensionタブから普通に「Codex」と検索してもCodex Extensionは引っかからず、表示されません。

そのため、いったん普通のデスクトップ環境やブラウザから VSIX を取得し、それをサーバへ持ち込むという方法でねじ込みます。

1. 任意のVSCode環境（※code-serverではない）で、Extensionタブから Codex Extensionのページを検索して開く
2. 歯車マーク > Download VSIX を押して、メニューから Linux 64 bit を選択する
3. ファイル保存ダイアログからわかりやすいディレクトリを選び、ダウンロード完了を待つ
4. その VSIX を Ubuntu サーバへ配置する（code-serverのExplorerタブに投げ込むのが楽）

6. code-server の Web 画面から VSIX をインストール

VSIX がサーバ上に置けたら、code-server の Web 画面からインストールします。

1. Ctrl+Shift+p または 左下歯車 > Command Palette...
2. Extensions: Install from VSIX... を実行
3. 手順5で配置した VSIX を選ぶ

CLI で入れるならこれでもいけるみたいです。（未検証）

code-server --install-extension ~/Downloads/openai-chatgpt-*.vsix

7. Codex Extension の動作確認

拡張機能をインストールしたあと、 Codex は IDE の右サイドバーか、画面右上の小さいChatGPTマークから開くことができます。どちらも表示されない場合は一度ブラウザからリロードしてください。code-server では完全な「再起動」でなくても、ブラウザリロードや Developer: Reload Window で十分なことが多いです。

CodexCLIからログインできていれば、OpenAIアカウントでの再ログイン不要でCodex Extensionがそのまま開けます。

スマホからやるなら、こんな感じで左カラムは閉じて、エージェントの右カラムを全画面表示ボタンで広げてあげると良い感じでした

おまけ

Cloudflare Access でメールOTP認証を付ける

「code-server のパスワードだけではちょっと不安」という場合は、Cloudflare Access からアプリケーション設定を追加すると、メールアドレスを使ったPIN認証などをお手軽に足せるのでかなり安心です。

（追記：iOSから諸々接続が不安定になる感じがあり、この設定を外したら快適になりました。まだ長く試せていないのでこれが直因かはわかりませんが、Access設定を投入するとすべての通信に認証が挟まるようになるので、code-serverをホストするにはちょっと重過ぎるのかも...？）

1. Access アプリケーションを作る

Cloudflareダッシュボード > Zero Trust > Accessコントロール > アプリケーション > 新規アプリケーションを作成 > セルフホストとプライベートで続行

ここでアプリ名と先ほど設定した公開ホスト名を設定します。

今回なら、例えば次のようにします。

• アプリケーション名：code-server
• 公開ホストネーム：code.example.com

2. Allow policy を作る

同じ画面のAccessポリシーという項目から新しいポリシーを作成し、「含める」の条件に以下の条件を設定します。

• ポリシー名：（任意）
• セレクター：メール
• 値：自分のメールアドレス
• アクション：許可

一旦「ポリシーを保存」ボタンで保存し、画面右下の「保存」ボタンからアプリケーション設定全体を保存します。

3. 認証確認

この状態で先ほど同様にcode-serverの公開URLにアクセスしてみてください。

Cloudflare社のログイン画面が表示されたと思います。
ここからメールアドレスを入力すると、短ければ数秒でメールにPIN番号が送られてきます。（ZeroTrustサービスの調子が悪かったり、長いときだと1分～2分くらいかかるときもある）

そのPINコードをWebから打ち込めばログインできるようになります。
ポリシーに指定できるものは、グローバルIPアドレスでの制限など他にもいろいろいろあるので、より安全にしたい場合は是非試してみてください。

まとめ

そもそもとして、code-serverをスマホから快適に操作＆閲覧するのは割と困難かなと勝手に思っていたのですが、試してみたら存外快適に使えましたね。プレビューでMarkdown閲覧したり、緊急時は気合い入れて直接編集してみたり、結構遊べそうです。

恐らく世の中にはもっと快適に同じことをできるシステムが山ほどある気もしますが、普段触ってるものを普段触ってるままに出先で使えるのなら、これほど気持ち良いことはないんじゃないでしょうか。