チュートリアル: Dev Containers 入門
このチュートリアルでは、ローカルプロジェクト用の Dev Container 構成を作成し、コンテナーをビルドして、その中でプロジェクトを開きます。 最終的に、実行中のコンテナーと、それに接続された IDE ウィンドウが用意されます。
始める前に
Docker がマシンにインストールされ、Docker デーモンが実行されています。 PhpStorm は Docker 経由でコンテナーをビルドするため、デーモンが停止している場合、ビルドは失敗します。
Docker プラグイン がインストールされ、有効化されています。
PhpStorm でローカルプロジェクトが開かれています。
リモート Dev Containers を含む要件の完全な一覧については、 前提条件 を参照してください。
ステップ 1. プロジェクトを準備する
devcontainer.json は Dev Containers のビルドに必要な構成ファイルであるため、プロジェクト内に存在している必要があります。 ファイルはプロジェクトルートの .devcontainer フォルダーに配置されます。間に .devcontainer/.../.../devcontainer.json のような別のフォルダーが存在する場合もあります。
Dev Containers の作成をすばやく開始するには、シンプルなファイルを作成するか、IDE 内の機能を使用してテンプレートから構成ファイルを作成するかという二つのオプションがあります。
Dev Container の最小要件は、ビルド元となるイメージです。
プロジェクトビューでプロジェクト名を右クリックし、 新規 | ファイル を選択します。
プロジェクトルート下の .devcontainer ディレクトリに構成を作成するには、 .devcontainer/devcontainer.json と入力します。
エディターでファイルを開き、次のコードを追加します:
{ image: "ubuntu:latest" }
プロジェクトビューでプロジェクト名を右クリックし、 新規 | Dev Container 構成 を選択します。
開いたダイアログで、PhpStorm にデフォルトのコンテナー構成が表示されます。 デフォルトのテンプレートで Dev Container を作成できますが、必要に応じて Dev Container テンプレート ドロップダウンから別の言語固有のテンプレートを選択することもできます。
OK をクリックして、比較的シンプルな (ただしコメントが多い)
devcontainer.jsonを作成します:// Default Ubuntu-based DevContainer Template. // For more customization options, see https://containers.dev/implementors/json_reference { name: "Default", image: "ubuntu:latest", customizations : { // Configure JetBrains IDE-specific properties jetbrains : { backend : "IntelliJ", settings : { // IDE settings can be added via “Show context actions”|“Add currently modified settings from IDE”. // A complete list of supported settings is also available through auto-completion }, plugins: [ // A set of plugin IDs. // Plugin ID can be found on the corresponding plugin’s page at https://plugins.jetbrains.com. ] } }, features: { "ghcr.io/devcontainers/features/git" : {}, // Add additional features to your project using auto-completion. }, // Comment out to connect as the root user. remoteUser: "ubuntu" }
ステップ 1. ビルドプロセスの準備
Dev Container をビルドする前に、使用する Dev Container 実装を検討してください:
Remote Development の旧実装では、 設定 | 詳細設定 の Dev Container プロジェクトをネイティブに開く オプションが無効になっていることを確認します。
ネイティブモードの実装を使用する場合は、 設定 | 詳細設定 で Dev Container プロジェクトをネイティブに開く オプションを有効化します。
さらに、Remote Development 実装を使用する場合は、拡張バックエンド選択を提供するように IDE を設定することをおすすめします。
Dev Containers の特定の IDE バックエンドバージョンを選択する
Ctrl+Alt+S を押して設定を開き、 を選択します。
右側のオプションの Dev Container セクションで、 バックエンドバージョンを自動的に選択する を無効化し、 OK をクリックして変更を保存します。
このオプションを無効化すると、Dev Container がビルドされた後に、バックエンドの複数のバージョンが利用可能になります。
カスタムリモート開発バックエンドを使用するには (例えば、公開されていない IDE ビルドの問題を確認する場合)、次の操作を行います:
IDE バックエンドを手動でダウンロードする
ダウンロードページを開きます。
Dev Containers では現在 Linux ベースのイメージのみがサポートされているため、オペレーティングシステムとして Linux を選択します。
Docker エンジンが実行されているホストに対応するアーキテクチャのアーカイブをダウンロードします。
メインメニューで、 に移動するか、 Shift を 2 回押して検索ウィンドウを開きます。
registryと入力し、 Registry... オプションを選択します。開いたウィンドウで
devcontainers.use.separate.project.panelキーを検索して有効化します。 閉じる をクリックします。IDE を再起動します。
レジストリキーが有効化されたら、Dev Container のビルドを開始します。
IDE とプロジェクトを選択 ウィンドウが開いたら、 インストールオプション リンクをクリックし、 インストーラファイルのアップロード アクションを選択します。
IDE バージョン フィールドが アーカイブを選択 ファイルに変わります。
ダウンロードした IDE バックエンドアーカイブへのパスを指定します。
Dev Container のビルドプロセスを続行します。
ステップ 2. Dev Container のビルドを開始する
.devcontainer/devcontainer.json を開きます。 ガターの Dev Containers アイコンをクリックし、 Dev Container を作成してソースをマウント… を選択します。 バックエンド IDE を選択するよう求められた場合は、PhpStorm を選択します。
ビルドが開始されると、ビルドプロセスを表示するために Services ビューが自動的に開くはずです:
選択した実装 (Remote Development とネイティブモード) によって、以降のフローは少し異なります。
リストからバックエンドバージョンを選択し、バックエンドと Client がダウンロードされるまで待ちます:
場合によっては、Dev Container のビルドとバックエンドデプロイプロセスに 10 秒以上かかると、Client は開かれません。代わりに、 接続 ボタン付きの通知が IDE に表示されます。 ボタンを押します。
次のウィンドウで プロジェクトを信頼 ボタンを押し、Client が開くまで待ちます:
Dev Container でプロジェクトがすでに開かれているかどうかを確認するにはどうすればよいですか？ 左上の バックエンドのステータス詳細 ウィジェットで確認できます。
バックエンドデプロイ手順がないため、Dev Container プロジェクトは IDE ですぐに開かれます。 プロジェクトを開く先 オプションが 設定 | 外観 & 振る舞い | システム設定 で 質問 に設定されている場合、プロジェクトは確認後に開かれます。
プロジェクトがネイティブモードを使用する Dev Container で開かれているかどうかを確認するには、通常とは異なるプロジェクトルートパスと、エディター左上に Dev Container 情報を表示するウィジェットを確認します。
