はじめに
このガイドでは、Java プロジェクトの例の設定方法を紹介します Visual Studio Code Web クライアントを使用する GitHub Codespaces で。 codespace でプロジェクトを開き、事前定義済みの開発コンテナーの構成を追加および変更するプロセスについて説明します。
このチュートリアルを完了すると、VS Code Web クライアントまたは VS Code デスクトップ アプリケーションを使用して、独自のリポジトリに開発コンテナー構成を追加できるようになります。
dev コンテナーの詳細については、「開発コンテナーの概要」を参照してください。
ステップ 1: codespace でプロジェクトを開く
-
まだサインインしていない場合は、GitHub.com にサインインします。
-
https://github.com/microsoft/vscode-remote-try-java にアクセスします。
-
[このテンプレートを使用する] をクリックし、 [codespace で開く] を選びます。
codespace を作成すると、プロジェクトが専用のリモート仮想マシン上に作成されます。 既定では、codespace のコンテナーには、Java を含む多くの言語とランタイムがあります。 また、Gradle、Maven、git、wget、rsync、openssh、nano など、一般的に使用されているツールが含まれています。
codespace をカスタマイズするには、vCPU と RAM の量を調整するか、dotfile を追加して環境をカスタマイズするか、インストールされているツールやスクリプトを変更します。 詳しくは、「codespace のカスタマイズ」を参照してください。
GitHub Codespaces は、devcontainer.json
というファイルを使って、codespace で作業するときに使う開発コンテナーを構成します。 各リポジトリには 1 つ以上の devcontainer.json
ファイルを含めることができ、codespace でコードを操作するために必要な開発環境を正確に提供できます。
起動時に、GitHub Codespaces は devcontainer.json
ファイルと、開発コンテナーの構成を設定する依存ファイルを使って、ツールやランタイムをインストールし、プロジェクトが必要とするその他のセットアップ タスクを実行します。 詳しくは、「開発コンテナーの概要」を参照してください。
ステップ 2: 開発コンテナー構成を追加する
GitHub Codespaces の既定の開発コンテナー ("dev container") を使用すると、vscode-remote-try-java などの Java プロジェクトで正常に作業することができます。 ただし、独自の開発コンテナーを構成して、プロジェクトに必要なすべてのツールとスクリプトを含めることをお勧めします。 これにより、リポジトリのすべての GitHub Codespaces ユーザーに対して、完全に再現可能な環境が保証されます。
カスタム開発コンテナーを使用するようにリポジトリを設定するには、devcontainer.json
ファイルを 1 つ以上作成する必要があります。 これは、定義済みの構成テンプレートから追加するか、Visual Studio Code 内に追加するか、または独自に記述することができます。 dev コンテナーの構成の詳細については、「開発コンテナーの概要」を参照してください。
-
Visual Studio Code Command Palette にアクセス (Shift + Command + P / Ctrl + Shift + P) し、「開発の追加」と入力します。 [Codespaces: 開発コンテナー構成ファイルの追加] をクリックします。
-
[新しい構成の作成] をクリックします。
-
この例では、codespace を作成したテンプレート リポジトリに既に開発コンテナー構成が含まれているため、構成ファイルが既に存在することを示すメッセージが表示されます。 既存の構成ファイルを上書きするので、 [続行] をクリックします。
-
[すべての定義を表示する] をクリックします。
-
「
java
」と入力し、 [Java] オプションをクリックします。 プロジェクトで特定のツールを使用している場合は、その他のオプションを使用できます。 たとえば、Java と PostgreSQL です。 -
プロジェクトに使用する Java のバージョンを選択します。 この場合は、"(既定値)" とマークされたバージョンを選択します。
-
[Maven のインストール] オプションを選び、 [OK] をクリックします。
-
インストールできる追加機能のリストが表示されます。 アプリケーションをビルドするための Java ライブラリとコマンド ライン ツールである Ant をインストールします。 この機能をインストールするには、「
ant
」と入力し、Ant (via SDKMAN)
を選んで [OK] をクリックします。 -
開発コンテナー構成ファイルが既に存在することを示すメッセージが表示されます。 [上書き] をクリックします。
devcontainer.json
ファイルが作成され、エディターで開きます。
カスタム開発コンテナー構成の詳細
Visual Studio Code エクスプローラーを見ると、devcontainer.json
ファイルを含むプロジェクトのリポジトリのルートに .devcontainer
ディレクトリが追加されていることがわかります。 これは、このリポジトリから作成された codespace のメイン構成ファイルです。
devcontainer.json
追加した devcontainer.json
ファイルには、name
、image
、および features
プロパティの値が含まれます。 便利なプロパティがいくつか含まれていますが、コメントアウトされています。
選んだイメージに応じて、ファイルは次のようになります。
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/java
{
"name": "Java",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/java:0-17",
"features": {
"ghcr.io/devcontainers/features/java:1": {
"version": "none",
"installMaven": "true",
"installGradle": "false"
},
"ghcr.io/devcontainers-contrib/features/ant-sdkman:2": {}
}
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "java -version",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}
- name: 開発コンテナーには任意の名前を付けることができます。 既定値が指定されています。
- image: codespace の開発コンテナーの作成に使われるコンテナー レジストリ (DockerHub、GitHub Container registry、またはAzure Container Registry) 内の画像の名前。
- features: 1 つ以上のオブジェクトの一覧。各オブジェクトは、使用可能な開発コンテナー機能のいずれかを参照します。 機能とは自己完結型であり、インストール コードと開発コンテナーの構成の共有可能なユニットです。 これらは、開発コンテナーにツール、ランタイム、またはライブラリの機能を追加する簡単な方法を提供します。 機能追加は、VS Code または、GitHub 上の
devcontainer.json
エディターで行えます。 詳細については、「devcontainer.json ファイルへの機能の追加」の Visual Studio Code または Web ブラウザー タブをクリックしてください。 - forwardPorts - ここにリストされているポートはすべて自動的に転送されます。 詳しくは、「codespace でのポートの転送」を参照してください。
- postCreateCommand: codespace が作成された後にコマンドを実行するには、このプロパティを使います。 これは、文字列 (上記のとおり)、配列、またはオブジェクトとして書式設定できます。 詳しくは、開発コンテナーの Web サイトの開発コンテナーの仕様をご覧ください。
- customizations: このプロパティを使用すると、codespace での作業に使用される場合、特定のツールまたはサービスをカスタマイズできます。 たとえば、VS Code の特定の設定と拡張機能を構成できます。 詳細については、開発コンテナー Web サイトの「サポート ツールとサービス」を参照してください。
- remoteUser: 既定では、vscode ユーザーとして実行されていますが、必要に応じてこれを root に設定することができます。
使用可能なプロパティの完全な一覧については、開発コンテナーの Web サイトの開発コンテナーの仕様に関するページを参照してください。
追加の開発コンテナー構成ファイル
Docker に慣れている場合は、Dockerfile または Docker Compose を使用して、devcontainer.json
ファイルに加えて codespace 環境を構成できます。 これを行うには、devcontainer.json
ファイルと一緒に Dockerfile
または docker-compose.yml
ファイルを追加します。 詳細については、開発コンテナー Web サイトの「イメージ、Dockerfiles、Docker Compose の使用」を参照してください。
ステップ 3: devcontainer.json ファイルを変更する
開発コンテナーの構成を追加し、すべての機能を基本的に理解したので、変更を行って環境をさらにカスタマイズできます。 この例では、次の動作を行うプロパティを追加します。
- 開発コンテナーの作成後にコマンドを実行して、新しいファイルを作成します。
- この codespace に 2 つの VS Code 拡張機能を自動的にインストールします。
-
devcontainer.json
ファイルで、features
プロパティの後にコンマを追加します。JSON "features": { "ghcr.io/devcontainers/features/java:1": { "version": "none", "installMaven": "true", "installGradle": "false" }, "ghcr.io/devcontainers-contrib/features/ant-sdkman:2": {} },
"features": { "ghcr.io/devcontainers/features/java:1": { "version": "none", "installMaven": "true", "installGradle": "false" }, "ghcr.io/devcontainers-contrib/features/ant-sdkman:2": {} },
-
postCreateCommand
プロパティをコメント解除し、その値をecho \"This file was added by the postCreateCommand.\" > TEMP.md
に変更します。JSONC // Use 'postCreateCommand' to run commands after the container is created. "postCreateCommand": "echo \"This file was added by the postCreateCommand.\" > TEMP.md",
// Use 'postCreateCommand' to run commands after the container is created. "postCreateCommand": "echo \"This file was added by the postCreateCommand.\" > TEMP.md",
-
customizations
プロパティをコメント解除し、次のように編集して、"Code Spell Checker" 拡張機能と "Java 用拡張機能パック" をインストールします。JSONC // Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { // Add the IDs of extensions you want installed when the container is created. "extensions": [ "streetsidesoftware.code-spell-checker", "vscjava.vscode-java-pack" ] } }
// Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { // Add the IDs of extensions you want installed when the container is created. "extensions": [ "streetsidesoftware.code-spell-checker", "vscjava.vscode-java-pack" ] } }
選んだイメージに応じて、devcontainer.json
ファイルは次のようになります。
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/java
{
"name": "Java",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/java:0-17",
"features": {
"ghcr.io/devcontainers/features/java:1": {
"version": "none",
"installMaven": "true",
"installGradle": "false"
},
"ghcr.io/devcontainers-contrib/features/ant-sdkman:2": {}
},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "echo \"This file was added by the postCreateCommand.\" > TEMP.md",
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"streetsidesoftware.code-spell-checker",
"vscjava.vscode-java-pack"
]
}
}
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}
-
変更を保存します。
-
VS Code Command Palette にアクセス (Shift+Command+P / Ctrl+Shift+P) し、「リビルド」と入力します。 [Codespaces: コンテナーのリビルド] をクリックします。
ヒント: キャッシュをクリアし、新しいイメージを使用してコンテナーを再構築するために、完全なリビルドを実行することが必要になる場合があります。 詳しくは、「codespace でのコンテナーのリビルド」を参照してください。
リポジトリに変更をコミットする前に、codespace 内でリビルドすることにより期待どおりに変更が動作します。 何らかの失敗があった場合、コンテナの調整を継続するためにリビルドできるリカバリコンテナを備えた codespace に配置されます。
開発コンテナーが再構築され、codespace が再び使用可能になると、postCreateCommand
が実行され、TEMP.md
ファイルが作成され、2 つの拡張機能が使用できるようになります。
手順 4:アプリケーションを実行する
-
F5
を押してアプリケーションを起動します。 -
VS Code の右下隅に、標準モードに切り替えるかどうかを確認する "トースト" 通知メッセージが表示された場合は、 [はい] をクリックします。
-
プロジェクト ファイルがインポートされたら、 [デバッグ コンソール] タブをクリックしてプログラムの出力を確認します。
ステップ 5: 変更をコミットする
新しいコードであれ、構成の変更であれ、codespace に変更を加えたら、その変更をコミットしたくなるでしょう。 リポジトリに構成の変更をコミットすると、このリポジトリから codespace を作成する他の人が、同じ構成を使用するようにできます。 VS Code 拡張機能の追加など、行うすべてのカスタマイズをすべてのユーザーが使えるようになります。
このチュートリアルでは、テンプレート リポジトリから codespace を作成したので、codespace 内のコードはまだリポジトリに格納されていません。 現在のブランチを GitHub に発行することで、リポジトリを作成できます。
詳しくは、「Codespace でソースコントロールを使用する」をご覧ください。
次のステップ
これで、独自の Java プロジェクトにカスタム開発コンテナー構成を追加できるようになります。
より高度なシナリオ向けの追加のリソースは次のとおりです。