1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHub Codespaces + OpenAI Codexで「環境構築不要」の最強AI開発環境を作る

1
Last updated at Posted at 2025-12-18

はじめに

手元のPCスペックが低かったり、OSのバージョンや権限の問題で好きなツールをインストールできなかったりして、開発環境の構築に悩んだことはありませんか?

今回は 「ブラウザさえあれば動く」 GitHub Codespaces を使い、さらにターミナルで動くAIアシスタント OpenAI Codex CLI を導入して、ローカル環境を汚さずに最強の開発環境を構築する手順を紹介します。

特にCodexの初期設定(認証)で、クラウド環境特有の**「localhostの罠」**にハマって苦労したので、その解決策も含めて手順を残します。

こんな人におすすめ

  • PCのメモリが少なくてDockerなどが重い人
  • インストール制限等でローカル環境を汚したくない人
  • iPadやChromebookで本格的な開発をしたい人
  • 環境構築でつまづきたくない人

1. GitHub Codespaces の起動

GitHubのリポジトリ画面から、ブラウザだけですぐに開発環境を立ち上げます。

  1. リポジトリの 「<> Code」 ボタンをクリック
  2. 「Codespaces」 タブを選択
  3. 「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の壁)

  1. codex コマンドを実行し、表示されたURLからブラウザでOpenAIにログインする。
  2. 認証後、ブラウザが http://localhost:1455/... にリダイレクトされる。
  3. 「このサイトにアクセスできません(接続が拒否されました)」 とエラーになる。

原因: 認証結果を返す先(localhost)が「自分のPC」を指してしまい、クラウド上のCodespacesに届かないためです。

解決策:curlで手動認証する(IPv4指定)

エラー画面に出ているURLを使って、手動で認証を通します。

  1. ブラウザのエラー画面のアドレスバーにある 非常に長いURL をすべてコピーします。
  2. Codespacesで 新しいターミナル を開きます(元のターミナルはcodex起動中のままにしておく)。
  3. 以下のコマンドを実行します。

ポイント:

  • 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 番ポートの行にある 「地球儀アイコン(ブラウザで開く)」 をクリックすると、別タブでアプリケーションのプレビュー画面が開きます。

image.png

まとめ

これで、ローカルPCのスペックに関係なく、ブラウザだけでAIを活用した最新の開発環境が手に入りました。
Codespacesは一定時間操作しないと自動で停止するため、課金面でも安心して利用できます。

特に認証周りの curl を使った解決策は、他のCLIツールで同様の現象が起きた際にも応用できるので、覚えておくと便利です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?