Transfert de ports dans votre espace de code

Lorsqu’une application s’exécutant à l’intérieur d’un codespace imprime la sortie vers le terminal qui contient une URL localhost, par exemple http://localhost:PORT ou http://127.0.0.1:PORT, le port est automatiquement transféré. Si vous utilisez GitHub Codespaces dans le navigateur ou dans Visual Studio Code, la chaîne d’URL du terminal est convertie en un lien sur lequel vous pouvez cliquer pour afficher la page web sur votre ordinateur local. Par défaut, GitHub Codespaces transfère les ports à l’aide de HTTP.

Vous pouvez modifier la configuration de conteneur de développement pour que le dépôt transfère automatiquement un ou plusieurs ports. Vous pouvez également transférer un port manuellement, étiqueter les ports transférés, partager des ports transférés avec des membres de votre organisation, partager des ports transférés publiquement et ajouter des ports transférés à la configuration du codespace.

Transfert d’un port

Vous pouvez transférer manuellement un port qui n’a pas été transféré automatiquement.

1. Ouvrez le terminal dans votre codespace.

2. Cliquez sur l’onglet PORTS.

3. Sous la liste des ports, cliquez sur Ajouter un port.

   

4. Tapez le numéro de port ou l’adresse, puis appuyez sur Entrée.

   

Utilisation du transfert HTTPS

Par défaut, GitHub Codespaces transfère les ports à l’aide de HTTP, mais vous pouvez mettre à jour n’importe quel port pour utiliser HTTPS, selon les besoins. Si vous mettez à jour un port avec une visibilité publique pour utiliser HTTPS, la visibilité du port devient automatiquement privée.

1. Ouvrez le terminal dans votre codespace.

2. Cliquez sur l’onglet PORTS.

3. Cliquez avec le bouton droit sur le port à mettre à jour, puis pointez sur Changer le protocole de port.

   

4. Sélectionnez le protocole nécessaire pour ce port. Le protocole que vous sélectionnez sera mémorisé pour ce port pour la durée de vie du codespace.

Partage d’un fichier

Si vous souhaitez partager un port transféré avec d’autres personnes, vous pouvez soit rendre le port privé pour votre organisation, soit rendre le port public. Une fois que vous avez créé un port privé pour votre organisation, toute personne de l’organisation disposant de l’URL du port peut afficher l’application en cours d’exécution. Après avoir rendu un port public, toute personne qui connaît l’URL et le numéro de port peuvent afficher l’application en cours d’exécution sans avoir à s’authentifier.

1. Ouvrez le terminal dans votre codespace.

2. Cliquez sur l’onglet PORTS.

3. Cliquez avec le bouton droit sur le port que vous voulez partager, cliquez sur Visibilité du port, puis sur Réservée à l’organisation ou Publique.

   

4. À droite de l’adresse locale du port, cliquez sur l’icône de copie.

   

5. Envoyez l’URL copiée à la personne avec laquelle vous souhaitez partager le port.

Utilisation d’outils en ligne de commande et de clients REST pour accéder aux ports

Lorsque vous transférez un port, votre application devient disponible à une URL https://CODESPACENAME-PORT.app.github.dev. Par exemple : https://monalisa-hot-potato-vrpqrxxrx7x2rxx-4000.app.github.dev. Si vous transférez un port privé à partir de l’application de bureau VS Code, votre application sera également disponible sur un port localhost tel que 127.0.0.1:4000.

Pour accéder à votre application à l’aide d’un client REST, tel que Postman, ou d’un outil en ligne de commande comme curl, vous n’avez pas besoin de vous authentifier si vous utilisez un port localhost ou si vous accédez à un port public sur le domaine distant. Toutefois, pour vous connecter à un port privé au niveau du domaine distant, vous devez vous authentifier avec le jeton d’accès GITHUB_TOKEN dans votre demande.

Recherche de l’adresse à laquelle se connecter

1. Ouvrez le terminal dans votre codespace.

2. Cliquez sur l’onglet PORTS, qui liste tous les ports que vous avez transférés.

3. Cliquez avec le bouton droit sur le port auquel vous souhaitez vous connecter, puis cliquez sur Copier l’adresse locale.

   

4. Collez l’adresse copiée quelque part pour l’utiliser ultérieurement.

Recherche du GITHUB_TOKEN

1. Dans le terminal de votre codespace, entrez echo $GITHUB_TOKEN.

   Le jeton est une chaîne commençant par ghu_.

2. Copiez le jeton.

   Important : Ne partagez ce jeton d’accès avec personne.

Utilisation de curl pour accéder à un port transféré

Dans un terminal sur votre ordinateur local, entrez :

curl ADDRESS -H "X-Github-Token: TOKEN"

Remplacez ADDRESS et TOKEN par les valeurs que vous avez copiées.

Utilisation de Postman pour accéder à un port transféré

1. Ouvrez Postman.

2. Créez une nouvelle requête GET.

3. Collez l’adresse que vous avez copiée précédemment en tant qu’URL de requête.

   

4. Sous l’onglet En-têtes, créez une entrée où la clé est « X-Github-Token » et la valeur est le GITHUB_TOKEN que vous avez copié précédemment.

   

5. Cliquez sur Envoyer.

Transfert automatique d’un port

Vous pouvez ajouter un port transféré à la configuration GitHub Codespaces pour le référentiel, afin que le port soit automatiquement transféré pour tous les codespaces créés à partir du référentiel. Après avoir mis à jour la configuration, tous les codespaces créés précédemment doivent être reconstruits pour que la modification s’applique. Pour plus d’informations sur le fichier de configuration de conteneur de développement, consultez « Présentation des conteneurs de développement ».

1. Dans votre codespace, ouvrez le fichier de configuration du conteneur de développement que vous souhaitez mettre à jour. En règle générale, ce fichier est .devcontainer/devcontainer.json.

2. Ajouter la propriété forwardPorts

   "forwardPorts": [NUMBER],
   

   Remplacez NUMBER par le numéro de port que vous voulez transférer. Il peut s’agir d’une liste de numéros de port séparés par des virgules.

3. Enregistrez le fichier .

Étiquetage d’un port

Lorsque vous ouvrez un codespace dans le navigateur ou dans l’application de bureau VS Code, vous pouvez étiqueter un port transféré pour en faciliter l’identification dans une liste.

1. Ouvrez le terminal dans votre codespace.

2. Cliquez sur l’onglet PORTS.

3. Cliquez avec le bouton droit sur le port que vous souhaitez étiqueter, puis cliquez sur Définir l’étiquette du port.

   

4. Tapez une étiquette pour votre port, puis appuyez sur Entrée.

   

Étiquetage automatique d’un port transféré

Vous pouvez étiqueter un port et écrire la modification dans un fichier de configuration de conteneur de développement pour le dépôt. Si vous effectuez cette opération pour un port qui est automatiquement transféré à l’aide de la propriété forwardPorts, l’étiquette est automatiquement appliquée à ce port transféré pour tous les codespaces qui seront créés dans le dépôt avec ce fichier de configuration.

1. Ouvrez le terminal dans votre codespace.

2. Cliquez sur l’onglet PORTS.

3. Cliquez avec le bouton droit sur le port dont vous souhaitez ajouter l’attribut d’étiquetage à la configuration du codespace, puis cliquez sur Définir l’étiquette et mettre à jour devcontainer.json.

   

4. Tapez une étiquette pour votre port, puis appuyez sur Entrée.

   

5. Si votre dépôt contient plusieurs fichiers de configuration de conteneur de développement, vous êtes invité à choisir le fichier que vous souhaitez mettre à jour.

   Le fichier de configuration de conteneur de développement est mis à jour pour inclure la nouvelle étiquette dans la propriété portsAttributes. Par exemple :

   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [3333, 4444],
   
   "portsAttributes": {
     "3333": {
       "label": "app-standard-preview"
     },
     "4444": {
       "label": "app-pro-preview"
     }
   }