Reenviar puertos en tu codespace

Cuando una aplicación que se ejecuta dentro de un codespace imprime la salida en el terminal que contiene una dirección URL de localhost, como http://localhost:PORT o http://127.0.0.1:PORT, el puerto se reenvía de forma automática. Si estás utilizando GitHub Codespaces en el explorador o en Visual Studio Code, la secuencia de URL en la terminal se convertirá en un vínculo en el que puedes hacer clic para ver la página web en tu máquina local. De manera predeterminada, GitHub Codespaces reenvía los puertos mediante HTTP.

Puedes editar la configuración del contenedor de desarrollo para que el repositorio reenvíe automáticamente uno o varios puertos. También puedes reenviar un puerto de forma manual, etiquetar los puertos reenviados, compartir los puertos reenviados con los miembros de tu organización, compartir los puertos reenviados de forma pública y agregar puertos reenviados a la configuración del codespace.

Reenviar un puerto

Puedes reenviar manualmente a un puerto que no se haya reenviado automáticamente.

1. Abre el terminal en tu codespace.

2. Haz clic en la pestaña PUERTOS.

3. En la lista de puertos, haga clic en Agregar puerto.

   

4. Escriba el número de puerto o la dirección y pulse Intro.

   

Utilizar el reenvío HTTPS

De manera predeterminada, GitHub Codespaces reenvía los puertos mediante HTTP, pero puedes actualizar cualquier puerto para que utilice HTTPS según sea necesario. Si actualizas un puerto con visibilidad pública para usar HTTPS, la visibilidad del puerto cambiará automáticamente a privada.

1. Abre el terminal en tu codespace.

2. Haz clic en la pestaña PUERTOS.

3. Haz clic con el botón derecho en el puerto que quieres actualizar y, después, mantén el ratón sobre Cambiar protocolo de puerto.

   

4. Selecciona el protocolo necesario para este puerto. El protocolo que selecciones se recordará para este puerto durante toda la vida útil del codespace.

Compartir un puerto

Si quieres compartir un puerto reenviado con otros, puedes ya sea hacerlo privado para tu organización o hacerlo público. Después de hacer un puerto privado para tu organización, cualquier miembro de esta que tenga la URL de dicho puerto podrá ver la aplicación que se está ejecutando. Después de hacer un puerto público, cualquiera que sepa la URL y el número de puerto podrá ver la aplicación que se está ejecutando sin necesidad de autenticarse.

1. Abre el terminal en tu codespace.

2. Haz clic en la pestaña PUERTOS.

3. Haz clic con el botón derecho en el puerto que quieres compartir, haz clic en Visibilidad del puerto y, después, en Privado para la organización o Público.

   

4. A la derecha de la dirección local del puerto, haz clic en el icono de copiar.

   

5. Envía la URL copiada a la persona con la que quieras compartir el puerto.

Uso de herramientas de línea de comandos y clientes REST para acceder a los puertos

Al reenviar un puerto, tu aplicación pasa a estar disponible en la dirección URL https://CODESPACENAME-PORT.app.github.dev. Por ejemplo, https://monalisa-hot-potato-vrpqrxxrx7x2rxx-4000.app.github.dev. Si reenvías un puerto privado desde la aplicación de escritorio de VS Code, tu aplicación también está disponible en un puerto localhost, como 127.0.0.1:4000.

Para acceder a tu aplicación mediante un cliente REST (como Postman) o una herramienta de línea de comandos (como curl), no necesitas autenticarte si usas un puerto localhost o si accedes a un puerto público en el dominio remoto. Sin embargo, para conectarte a un puerto privado en el dominio remoto, debes autenticarte mediante el token de acceso GITHUB_TOKEN en la solicitud.

Búsqueda de la dirección a la que conectarse

1. Abre el terminal en tu codespace.

2. Haz clic en la pestaña PUERTOS. Con esto se enumerarán todos los puertos que has reenviado.

3. Haz clic con el botón derecho en el puerto al que quieres conectarte y, después, haz clic en Copiar dirección local.

   

4. Pega la dirección en algún lugar para usarla más adelante.

Búsqueda de GITHUB_TOKEN

1. En el terminal del codespace, escribe echo $GITHUB_TOKEN.

   El token es una cadena que comienza por ghu_.

2. Copie el token.

   Important

   No compartas este token de acceso con nadie.

Uso de curl para acceder a un puerto reenviado

En un terminal en tu equipo local, escribe:

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

Reemplaza ADDRESS y TOKEN por los valores que has copiado anteriormente.

Uso de Postman para acceder a un puerto reenviado

1. Abra Postman.

2. Crea una nueva solicitud GET.

3. Pega la dirección que has copiado anteriormente como la URL de la solicitud.

   

4. En la pestaña Encabezados, crea una nueva entrada con la clave "X-Github-Token" y el valor de GITHUB_TOKEN que has copiado anteriormente.

   

5. Haga clic en Enviar.

Reenvío automático de un puerto

Puede agregar un puerto reenviado a la configuración de GitHub Codespaces del repositorio para que se pueda reenviar automáticamente el puerto a todos los codespaces creados a partir del repositorio. Después de que actualizas la configuración, cualquier codespace creado debe reconstruirse para que el cambio se aplique. Para más información sobre el archivo de configuración de contenedores de desarrollo, consulta "Introducción a los contenedores dev".

1. En el codespace, abre el archivo de configuración del contenedor de desarrollo que quieres actualizar. Normalmente, este archivo es .devcontainer/devcontainer.json.

2. Agregue la propiedad forwardPorts.

   "forwardPorts": [NUMBER],
   

   Reemplaza NUMBER por el número de puerto que quieres reenviar. Puede ser una lista separada por comas de números de puerto.

3. Guarde el archivo.

Etiquetar un puerto

Al abrir un codespace en el explorador o en la aplicación de escritorio VS Code, puedes etiquetar un puerto reenviado para facilitar la identificación en una lista.

1. Abre el terminal en tu codespace.

2. Haz clic en la pestaña PUERTOS.

3. Haz clic con el botón derecho en el puerto que quieres etiquetar y elige Establecer etiqueta de puerto.

   

4. Teclea una etiqueta para tu puerto y luego presiona Entrar.

   

Etiquetado automático de un puerto reenviado

Puedes etiquetar un puerto y escribir el cambio en un archivo de configuración de contenedor de desarrollo para el repositorio. Si lo haces para un puerto que se reenvía automáticamente (con la propiedad forwardPorts), la etiqueta se aplica automáticamente a ese puerto reenviado para todos los codespaces futuros creados a partir del repositorio con ese archivo de configuración.

1. Abre el terminal en tu codespace.

2. Haz clic en la pestaña PUERTOS.

3. Haz clic con el botón derecho en el puerto que quieres agregar a la configuración del codespace y elige Establecer etiqueta y actualizar devcontainer.json.

   

4. Teclea una etiqueta para tu puerto y luego presiona Entrar.

   

5. Si el repositorio tiene más de un archivo de configuración de contenedor de desarrollo, se te pedirá que elijas el archivo que quieres actualizar.

   El archivo de configuración del contenedor de desarrollo se actualiza para incluir la nueva etiqueta en la propiedad portsAttributes. Por ejemplo:

   // 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"
     }
   }