Introduction
Ce guide vous montre comment configurer un exemple de projet Java dans GitHub Codespaces avec le client web Visual Studio Code. Il vous guidera dans le processus dâouverture du projet dans un codespace, dâajout et de modification dâune configuration de conteneur de dĂ©veloppement prĂ©dĂ©finie.
Une fois ce tutoriel terminĂ©, vous serez en mesure dâajouter une configuration de conteneur de dĂ©veloppement Ă votre propre dĂ©pĂŽt Ă lâaide du client web VS Code ou de lâapplication de bureau VS Code.
Pour plus dâinformations sur les conteneurs de dĂ©veloppement, consultez PrĂ©sentation des conteneurs de dĂ©veloppement.
Ătape 1 : Ouvrir le projet dans un codespace
-
Connectez-vous Ă GitHub.com, si ce nâest dĂ©jĂ fait.
-
Accédez à https://github.com/microsoft/vscode-remote-try-java.
-
Cliquez sur Utiliser ce modĂšle, puis sur Ouvrir dans un codespace.
Lorsque vous crĂ©ez un codespace, votre projet est créé sur une machine virtuelle distante qui vous est dĂ©diĂ©e. Par dĂ©faut, le conteneur de votre codespace a de nombreux langages et runtimes, dont Java. Il comprend Ă©galement un ensemble dâoutils couramment utilisĂ©s comme Gradle, Maven, git, wget, rsync, openssh et nano.
Vous pouvez personnaliser votre codespace en ajustant le nombre de processeurs virtuels et la RAM, en ajoutant des dotfiles pour personnaliser votre environnement, ou en modifiant les outils et les scripts installĂ©s. Pour plus dâinformations, consultez « Personnalisation de votre codespace ».
GitHub Codespaces utilise un fichier appelé devcontainer.json
pour configurer le conteneur de développement que vous utilisez lorsque vous travaillez dans un codespace. Chaque dépÎt peut contenir un ou plusieurs fichiers devcontainer.json
, afin de vous fournir exactement l'environnement de développement dont vous avez besoin pour travailler sur votre code dans un espace de code.
Lors du lancement, GitHub Codespaces utilise un fichier devcontainer.json
, ainsi que tous les fichiers dĂ©pendants qui composent la configuration du conteneur de dĂ©veloppement, pour installer des outils et des runtimes, et effectuer dâautres tĂąches de configuration nĂ©cessaires au projet. Pour plus dâinformations, consultez « PrĂ©sentation des conteneurs de dĂ©veloppement ».
Ătape 2 : Ajouter une configuration de conteneur de dĂ©veloppement
Le conteneur de dĂ©veloppement par dĂ©faut, ou « conteneur dev », pour GitHub Codespaces vous permet de travailler correctement sur un projet Java comme vscode-remote-try-java. Toutefois, nous vous recommandons de configurer votre propre conteneur de dĂ©veloppement afin dâinclure tous les outils et scripts dont votre projet a besoin. Cela garantit un environnement entiĂšrement reproductible pour tous les utilisateurs GitHub Codespaces de votre rĂ©fĂ©rentiel.
Pour configurer votre dĂ©pĂŽt afin dâutiliser un conteneur de dĂ©veloppement personnalisĂ©, vous devez crĂ©er un ou plusieurs fichiers devcontainer.json
. Vous pouvez les ajouter Ă partir dâun modĂšle de configuration prĂ©dĂ©fini, dans Visual Studio Code, oĂč Ă©crire les vĂŽtres. Pour plus dâinformations sur les configurations de conteneur de dĂ©veloppement, consultez PrĂ©sentation des conteneurs de dĂ©veloppement.
-
Accédez à la Visual Studio Code Command Palette (Maj+Commande+P / Ctrl+Maj+P), puis commencez à taper « ajouter ». Cliquez sur Codespaces : ajouter des fichiers config de conteneur de développement.
-
Cliquez sur Créer une nouvelle configuration.
-
Dans cet exemple, le dĂ©pĂŽt de modĂšles Ă partir duquel vous avez créé le codespace contient dĂ©jĂ une configuration de conteneur de dĂ©veloppement, donc un message sâaffiche vous indiquant que le fichier de configuration existe dĂ©jĂ . Nous allons remplacer le fichier de configuration existant, donc cliquez sur Continuer.
-
Cliquez sur Afficher toutes les définitions.
-
Tapez
java
et cliquez sur lâoption Java. Dâautres options sont disponibles si votre projet utilise des outils particuliers. Par exemple, Java et PostgreSQL. -
Choisissez la version de Java que vous souhaitez utiliser pour votre projet. Dans ce cas, sélectionnez la version marquée « (par défaut) ».
-
SĂ©lectionnez lâoption pour Installer Maven et cliquez sur OK.
-
La liste des fonctionnalitĂ©s supplĂ©mentaires que vous pouvez installer sâaffiche. Nous allons installer Ant, la bibliothĂšque Java et lâoutil en ligne de commande pour la crĂ©ation dâapplications. Pour installer cette fonctionnalitĂ©, tapez
ant
, sélectionnezAnt (via SDKMAN)
, puis cliquez sur OK. -
Un message sâaffiche pour vous indiquer que le fichier de configuration du conteneur de dĂ©veloppement existe dĂ©jĂ . Cliquez sur Remplacer.
Un fichier
devcontainer.json
est créé et ouvert dans lâĂ©diteur.
Détails de votre configuration de conteneur de développement personnalisée
Si vous regardez dans lâExplorateur Visual Studio Code, vous verrez quâun rĂ©pertoire .devcontainer
a été ajouté à la racine du dépÎt de votre projet contenant le fichier devcontainer.json
. Il sâagit du fichier de configuration principal pour les codespaces créés Ă partir de ce dĂ©pĂŽt.
devcontainer.json
Le fichier devcontainer.json
que vous avez ajouté contient des valeurs pour les propriétés name
, image
et features
. Dâautres propriĂ©tĂ©s que vous trouverez peut-ĂȘtre utiles sont incluses, mais sont commentĂ©es.
Le fichier ressemblera Ă ceci, en fonction de lâimage que vous avez choisie :
// 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 : Vous pouvez appeler votre conteneur de développement comme vous voulez. Une valeur par défaut est fournie.
- image : Nom dâune image dans un registre de conteneurs (DockerHub, GitHub Container registry ou Azure Container Registry) qui sera utilisĂ©e pour crĂ©er le conteneur de dĂ©veloppement pour le codespace.
- features : Liste dâun ou plusieurs objets, chacun faisant rĂ©fĂ©rence Ă lâune des fonctionnalitĂ©s de conteneur de dĂ©veloppement disponibles. Les fonctionnalitĂ©s (« features ») sont des unitĂ©s autonomes pouvant ĂȘtre partagĂ©es du code dâinstallation et de configuration de conteneur de dĂ©veloppement. Elles offrent un moyen simple dâajouter dâautres fonctionnalitĂ©s dâoutils, de runtime ou de bibliothĂšque Ă votre conteneur de dĂ©veloppement. Vous pouvez ajouter des fonctionnalitĂ©s soit dans VS Code, soit dans lâĂ©diteur
devcontainer.json
sur GitHub. Pour plus dâinformations, cliquez sur lâonglet Visual Studio Code ou Navigateur web dans Ajout de fonctionnalitĂ©s Ă un fichier devcontainer.json. - forwardPorts : Tous les ports listĂ©s ici sont transfĂ©rĂ©s automatiquement. Pour plus dâinformations, consultez « Transfert de ports dans votre espace de code ».
- postCreateCommand : Utilisez cette propriĂ©tĂ© pour exĂ©cuter des commandes aprĂšs la crĂ©ation de votre codespace. Elle peut ĂȘtre mise en forme en tant que chaĂźne (comme ci-dessus), tableau ou objet. Pour plus dâinformations, consultez la spĂ©cification sur les conteneurs de dĂ©veloppement sur le site web Conteneurs de dĂ©veloppement.
- customizations : Cette propriĂ©tĂ© vous permet de personnaliser un outil ou un service spĂ©cifique lorsquâil est utilisĂ© pour travailler dans un codespace. Par exemple, vous pouvez configurer des paramĂštres et des extensions spĂ©cifiques pour VS Code. Pour plus dâinformations, consultez Outils et services de prise en charge sur le site web Development Containers.
- remoteUser : Par dĂ©faut, vous travaillez en tant quâutilisateur vscode, mais vous pouvez aussi dĂ©finir cette valeur sur root.
Pour obtenir la liste complÚte des propriétés disponibles, consultez la spécification des conteneurs de développement sur le site web Development Containers.
Autres fichiers de configuration de conteneur de développement
Si vous ĂȘtes familiarisĂ© avec Docker, vous voudrez peut-ĂȘtre utiliser un Dockerfile, ou Docker Compose, pour configurer votre environnement de codespace, en plus du fichier devcontainer.json
. Pour ce faire, ajoutez vos fichiers Dockerfile
ou compose.yaml
en mĂȘme temps que le fichier devcontainer.json
. Pour plus dâinformations, consultez Utiliser les images, les fichiers Docker et Docker Compose sur le site web Development Containers.
Ătape 3 : modifier votre fichier devcontainer.json
Une fois votre configuration de conteneur de développement ajoutée et aprÚs avoir généralement compris le fonctionnement de chaque élément, vous pouvez désormais apporter des modifications pour personnaliser davantage votre environnement. Dans cet exemple, vous allez ajouter des propriétés qui :
- Exécutent une commande, une fois le conteneur de développement créé, pour créer un fichier.
- Installent automatiquement deux extensions VS Code dans ce codespace.
-
Dans le fichier
devcontainer.json
, ajoutez une virgule aprÚs la propriété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": {} },
-
Décommentez la propriété
postCreateCommand
et remplacez sa valeur parecho \"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",
-
Décommentez la propriété
customizations
et modifiez-la comme suit pour installer lâextension « Code Spell Checker » et « Extension Pack for 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" ] } }
Le fichier devcontainer.json
doit maintenant ressembler Ă ceci, en fonction de lâimage que vous avez choisie :
// 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"
}
-
Enregistrez vos modifications.
-
Accédez à la VS Code Command Palette (Maj+Commande+P / Ctrl+Maj+P), puis commencez à taper « regénérer ». Cliquez sur Codespaces : Regénérer le conteneur.
Conseil
Vous souhaiterez parfois effectuer une rĂ©gĂ©nĂ©ration complĂšte pour vider votre cache et rĂ©gĂ©nĂ©rer votre conteneur avec de nouvelles images. Pour plus dâinformations, consultez « RegĂ©nĂ©ration du conteneur dans un codespace ». La reconstruction Ă lâintĂ©rieur de votre espace de code garantit que vos modifications fonctionnent comme prĂ©vu avant de valider les modifications dans le rĂ©fĂ©rentiel. Si quelque chose entraĂźne un Ă©chec, vous serez placĂ© dans un espace de code avec un conteneur de rĂ©cupĂ©ration Ă partir duquel vous pouvez reconstruire pour ajuster votre conteneur.
Une fois que le conteneur de développement est recréé et que votre codespace redevient disponible,
postCreateCommand
aura été exécuté, créant un fichierTEMP.md
, et les deux extensions seront disponibles.
Ătape 4 : ExĂ©cuter votre application
-
ExĂ©cutez lâapplication en appuyant sur
F5
. -
Si un message de notification « toast » sâaffiche en bas Ă droite de VS Code, vous demandant si vous voulez passer en mode standard, cliquez sur Oui.
-
Une fois que les fichiers projet ont Ă©tĂ© importĂ©s, cliquez sur lâonglet Console de dĂ©bogage pour voir la sortie du programme.
Ătape 5 : valider vos modifications
Quand vous avez apportĂ© des modifications Ă votre codespace, que ce soit du nouveau code ou des changements de configuration, vous voudrez commiter vos modifications. Le fait de commiter les changements de configuration de votre dĂ©pĂŽt permet de sâassurer que toute autre personne qui crĂ©e un codespace Ă partir de ce dĂ©pĂŽt dispose de la mĂȘme configuration. Toute personnalisation que vous apportez, comme ajouter des extensions VS Code, est disponible pour tous les utilisateurs.
Pour ce tutoriel, vous avez créé un codespace Ă partir dâun dĂ©pĂŽt de modĂšles, donc le code de votre codespace nâest pas encore stockĂ© dans un dĂ©pĂŽt. Vous pouvez crĂ©er un dĂ©pĂŽt en publiant la branche actuelle sur GitHub.
Pour plus dâinformations, consultez Utilisation du contrĂŽle de code source dans votre espace de code.
Ătapes suivantes
Vous devriez maintenant ĂȘtre en mesure dâajouter une configuration de conteneur de dĂ©veloppement personnalisĂ©e Ă votre propre projet Java.
Voici quelques ressources supplémentaires pour les scénarios plus avancés.