先日、技術書典19で発売された「DevContainer実践ガイド」を読みました。DevContainerまわりの知見がまとまっていて、とてもためになりました。ありがとうございました。
この書籍の中ではJetBrains IDE環境におけるDevContainerの記載があり、以前さわったときとは雰囲気が異なってそうに感じました。
そこで、DevContainer環境を構築し、DevContainer上のJetBrains IDEのターミナルで Codex CLI を動かしてみたことから、メモを残します。
目次
環境
今回構築するDevContainer環境について
DevContainerの中にCodex CLIをインストールして、 DevContainerの中で codex コマンドが使える環境を構築します。
また、書籍「DevContainer実践ガイド」に従い、非rootユーザーを利用することとします。そのため、非rootユーザーが組み込まれているDevContainer公式の Node.js & TypeScript イメージを利用します。
images/src/typescript-node at main · devcontainers/images
DevContainer用ファイルの準備
.devcontainer/devcontainer.json ファイルの作成
DevContainer実践ガイドに従い、今回は以下の状態となるような devcontainer.json ファイルを用意します。
- DevContainer公式の
Node.js & TypeScriptイメージのうち、TrixieのNode 24系を利用- 非rootユーザーやよく使うツールが含まれる DevContainer Featureの
common-utilsを使いたいため - 非rootユーザーとして
nodeがセットアップされる- ユーザー名はイメージのdevcontainer.jsonにある
remoteUser: "node"として確認可能
- ユーザー名はイメージのdevcontainer.jsonにある
- 非rootユーザーやよく使うツールが含まれる DevContainer Featureの
- DevContainer内の
/home/node/.codexディレクトリ以下をホストのディレクトリ~/.agent/codex/.codexで永続化 - Codex CLIの最新版をなるべく使いたいため、
postStartCommandでCodexの最新版をインストール- 本当に最新版を使いたい場合は、DevContainerの中のターミナルで
npm install -g @openai/codex@latestする
- 本当に最新版を使いたい場合は、DevContainerの中のターミナルで
- DevContainer上で起動するWebStormは、プラグイン
Biomeを追加した上で起動
{ "name": "devcontainer-jetbrains-ide-example", "image": "mcr.microsoft.com/devcontainers/typescript-node:24-trixie", "mounts": [ "source=${localEnv:HOME}/.agent/codex/.codex,target=/home/node/.codex,type=bind,consistency=cached" ], "postStartCommand": ".devcontainer/postStartCommand.sh", "customizations": { "jetbrains": { "plugins": [ "com.github.biomejs.intellijbiome" ] } } }
postStartCommand.sh ファイルの作成
devcontainer.json から呼ばれてCodex CLIの最新版をインストールする postStartCommand.sh ファイルを作成します。
npm install -g @openai/codex@latest
なお、このファイルに実行権限がない場合、以下のエラーになります。
sh: 1: .devcontainer/postStartCommand.sh: Permission denied Lifecycle script command: `.devcontainer/postStartCommand.sh` is failed with exit code: 126
そのため、ホストで postStartCommand.sh ファイルに実行権限を追加します。
% chmod +x .devcontainer/postStartCommand.sh
権限が付与されていることを確認します。
% ls -al .devcontainer total 16 drwxr-xr-x@ 4 foo staff 128 Dec 21 21:18 . drwxr-xr-x@ 4 foo staff 128 Dec 21 16:42 .. -rw-r--r--@ 1 foo staff 473 Dec 21 21:18 devcontainer.json -rwxr-xr-x@ 1 foo staff 35 Dec 21 16:42 postStartCommand.sh
Codex CLI向け永続化ディレクトリの作成
devcontainer.json で永続化ディレクトリを指定したため、事前に作成しておきます。
% mkdir -p ~/.agent/codex/.codex
IDEでDevContainerの起動
JetBrainsの公式ドキュメントでは、DevContainerを起動する方法がいくつも紹介されていました。
Dev Container overview | WebStorm Documentation
DevContainer実践ガイドでは主にSSHを使った起動について記載されていました。
今回は別の方法で起動してみようと考え、WebStormの中からDevContainerを起動することにします。
https://www.jetbrains.com/help/webstorm/start-dev-container-inside-ide.html
WebStormから起動する場合は、さらに mount か clone という2つの方法があります。
今回はGitHubとは連携せずに起動したいことから、 Create Dev Container and mount sources タブの方法を採用します。
ホストの devcontainer.jsonファイルを開き、コンテナアイコンを確認します。ホバーするとこんな感じになります。
続いて、コンテナアイコンをクリックします。今回はDevContainerをWebStormで開くことから、Create Dev Container and Mount Sources... > WebStorm をクリックします。
すると、コンテナイメージのビルドが走るため、しばらく待ちます。
その後、別のWebStormがDevContainerに対して開きます。なお、元のWebStormのアイコンはグレー化します。
WebStormを確認すると、devcontainer.json で設定した通り、Biomeプラグインがインストールされていました。
続いて codex コマンドでCodex CLIを起動します。初回は認証が求められます。
1. Sign in with ChatGPT を選択するとブラウザが開くので、ChatGPTのアカウントでログインします。
すると、Codex CLIの画面が開きます。
Codex CLIでリポジトリを開いたときに行うのと同様 /init を実行したところ、 AGENTS.md ファイルを生成されました。また、以下のメッセージが表示されいます。
• AGENTS.md を作成して、現状のリポジトリ内容に合わせたガイドをまとめました。開発コンテナ中心でソースやテストが未配置である点、postStart コマンドや IDE 設定の所在を明記しています。 - 追加: AGENTS.md 次のステップの候補: 1. 実際のアプリ構成が決まったら AGENTS.md の構成・コマンド・テスト規約を更新する 2. Biome の設定ファイル（biome.json など）を追加してスタイル規約を確定する
また、Codex CLIの情報は、ホストの ~/.agent/codex/.codex の中に保存されました。
以上で、WebStormから devcontainer.json で設定した通りのDevContainerを起動し、別のWebStormでDevContainerを開くことができました。
ソースコード
GitHubに上げました。
https://github.com/thinkAmi-sandbox/devcontainer_jetbrains_ide-example
