はじめに
手元のPCスペックが低かったり、OSのバージョンや権限の問題で好きなツールをインストールできなかったりして、開発環境の構築に悩んだことはありませんか?
今回は 「ブラウザさえあれば動く」 GitHub Codespaces を使い、さらにターミナルで動くAIアシスタント OpenAI Codex CLI を導入して、ローカル環境を汚さずに最強の開発環境を構築する手順を紹介します。
特にCodexの初期設定(認証)で、クラウド環境特有の**「localhostの罠」**にハマって苦労したので、その解決策も含めて手順を残します。
こんな人におすすめ
- PCのメモリが少なくてDockerなどが重い人
- インストール制限等でローカル環境を汚したくない人
- iPadやChromebookで本格的な開発をしたい人
- 環境構築でつまづきたくない人
1. GitHub Codespaces の起動
GitHubのリポジトリ画面から、ブラウザだけですぐに開発環境を立ち上げます。
- リポジトリの 「<> Code」 ボタンをクリック
- 「Codespaces」 タブを選択
- 「Create codespace on main」 ボタンをクリック
これだけで、ブラウザの中にVS CodeとUbuntu(Linux)環境が立ち上がります。
2. Node.js のバージョンアップ
Codespacesの初期状態では、Node.jsのバージョンが古い(v16など)場合があります。
最新のNext.jsやCodex CLIを動かすために、LTS(長期サポート版)へ更新します。
ターミナルで以下のコマンドを実行します。
nvm install --lts
nvm use --lts
node -v を実行して、v20.x.x や v22.x.x などになっていればOKです。
3. OpenAI Codex CLI のインストール
OpenAIが提供するCLIツールをインストールします。
npm install -g @openai/codex
4. 【最難関】Codexの初回認証とトラブルシュート
インストール後、codex コマンドで起動しようとすると認証が求められますが、クラウド環境(Codespaces)のため、通常の手順では認証に失敗します。
発生する問題(localhostの壁)
-
codexコマンドを実行し、表示されたURLからブラウザでOpenAIにログインする。 - 認証後、ブラウザが
http://localhost:1455/...にリダイレクトされる。 - 「このサイトにアクセスできません(接続が拒否されました)」 とエラーになる。
原因: 認証結果を返す先(localhost)が「自分のPC」を指してしまい、クラウド上のCodespacesに届かないためです。
解決策:curlで手動認証する(IPv4指定)
エラー画面に出ているURLを使って、手動で認証を通します。
- ブラウザのエラー画面のアドレスバーにある 非常に長いURL をすべてコピーします。
- Codespacesで 新しいターミナル を開きます(元のターミナルは
codex起動中のままにしておく)。 - 以下のコマンドを実行します。
ポイント:
- URLは必ずダブルクォーテーション
"で囲むこと。 - URL内の
localhostという文字を127.0.0.1に書き換えること(IPv6問題の回避)。
# 例:
curl "http://127.0.0.1:1455/auth/callback?code=xxxx...(コピーしたURL)..."
これを実行すると、元のターミナル側で認証が完了し、Codexが使えるようになります。
5. 環境維持の自動化(.bashrc設定)
Codespacesでは、新しいターミナルを開くたびにNode.jsのバージョンが初期状態に戻ってしまい、そのままだと codex コマンドが使えません。
毎回 nvm use --lts を打つのは面倒なので、.bashrc に設定を追加して自動化します。
echo 'nvm use --lts > /dev/null' >> ~/.bashrc
これで、新しいターミナルを開くたびに自動的に最新環境がセットされ、すぐにCodexや開発コマンドが使えるようになります。
6. 開発の始め方(Next.jsの場合)
開発サーバーを起動して、画面を確認する方法です。
npm run dev
サーバー起動後、VS Code下部の 「ポート (PORTS)」 タブを確認します。
3000 番ポートの行にある 「地球儀アイコン(ブラウザで開く)」 をクリックすると、別タブでアプリケーションのプレビュー画面が開きます。
まとめ
これで、ローカルPCのスペックに関係なく、ブラウザだけでAIを活用した最新の開発環境が手に入りました。
Codespacesは一定時間操作しないと自動で停止するため、課金面でも安心して利用できます。
特に認証周りの curl を使った解決策は、他のCLIツールで同様の現象が起きた際にも応用できるので、覚えておくと便利です。
