Skip to main content

Reenviar puertos en tu codespace

Puedes reenviar los puertos en tu codespace para probar y depurar tu aplicación. También puedes administrar el protocolo de puerto y compartirlo dentro de tu organización o públicamente.

Note

  • El uso de GitHub Codespaces con un IDE de JetBrains se encuentra actualmente en versión preliminar pública y está sujeto a cambios.
  • Para trabajar en un codespace en un IDE de JetBrains, debe usar la versión 2023.3.* o 2024.1.* de JetBrains Gateway.

Acerca de los puertos reenviados

La redirección de puertos te otorga acceso a los puertos CRP dentro de tu codespace. Por ejemplo, si estás ejecutando una aplicación web en un puerto específico en tu codespace, puedes reenviar dicho puerto. Esto te permite acceder a la aplicación desde el buscador en tu máquina local para hacer pruebas y correcciones de errores.

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.

Note

Los propietarios de la organización pueden restringir la capacidad de hacer que los puertos de reenvío estén disponibles públicamente o dentro de la organización. Para obtener más información, vea «Restricción de la visibilidad de los puertos reenviados».

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.

    Captura de pantalla del botón "Agregar puerto".

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

    Captura de pantalla del número 3000 que se escribe en el campo número de puerto para un nuevo puerto reenviado.

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.

    Captura de pantalla del menú emergente de un puerto reenviado, con la opción "Cambiar protocolo de puerto" seleccionada y "HTTPS" seleccionada en el submenú.

  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

Note

Solo puedes hacer que un puerto sea privado para una organización si en la organización se usa GitHub Team o GitHub Enterprise Cloud.

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.

Note

La elección de las opciones de visibilidad del puerto puede estar limitada por una directiva configurada para la organización. Para obtener más información, vea «Restricción de la visibilidad de los puertos reenviados».

  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.

    Captura de pantalla del menú emergente de un puerto reenviado, con la opción "Visibilidad del puerto" seleccionada y "Privado" seleccionada en el submenú.

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

    Captura de pantalla del panel "Puertos". El icono de copia, que copia la dirección URL de un puerto reenviado, se resalta con un contorno naranja.

  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.

Note

El elemento GITHUB_TOKEN se crea automáticamente al iniciar un codespace y no cambia durante la sesión del codespace. Si detienes y luego reinicias un codespace, se genera un nuevo GITHUB_TOKEN.

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.

    Captura de pantalla del menú emergente de un puerto reenviado con la opción "Copiar dirección local" resaltada con un contorno naranja.

  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.

    Captura de pantalla de la dirección URL del puerto reenviado pegado en Postman como dirección URL de solicitud GET. La URL está resaltada.

  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.

    Captura de pantalla de un GITHUB_TOKEN ficticio pegado en Postman como el valor de la clave X-GitHub-Token. La clave y el valor están resaltados.

  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.

    Captura de pantalla del menú emergente de un puerto reenviado con la opción "Establecer etiqueta de puerto" resaltada con un contorno naranja.

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

    Captura de pantalla de la etiqueta "Almacenamiento provisional" agregada como una etiqueta personalizada para un puerto reenviado.

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.

    Captura de pantalla del menú emergente de un puerto reenviado, con la opción "Establecer etiqueta y actualizar devcontainer.json" resaltada con un contorno naranja.

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

    Captura de pantalla de la etiqueta "Almacenamiento provisional" agregada como una etiqueta personalizada para un puerto reenviado.

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

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.

Note

Los propietarios de la organización pueden restringir la capacidad de hacer que los puertos de reenvío estén disponibles públicamente o dentro de la organización. Para obtener más información, vea «Restricción de la visibilidad de los puertos reenviados».

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.

    Captura de pantalla del botón "Agregar puerto".

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

    Captura de pantalla del número 3000 que se escribe en el campo número de puerto para un nuevo puerto reenviado.

Compartir un puerto

Note

Solo puedes hacer que un puerto sea privado para una organización si en la organización se usa GitHub Team o GitHub Enterprise Cloud.

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.

Note

La elección de las opciones de visibilidad del puerto puede estar limitada por una directiva configurada para la organización. Para obtener más información, vea «Restricción de la visibilidad de los puertos reenviados».

  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.

    Captura de pantalla del menú emergente de un puerto reenviado, con la opción "Visibilidad del puerto" seleccionada y "Privado" seleccionada en el submenú.

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

    Captura de pantalla del panel "Puertos". El icono de copia, que copia la dirección URL de un puerto reenviado, se resalta con un contorno naranja.

  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.

Note

El elemento GITHUB_TOKEN se crea automáticamente al iniciar un codespace y no cambia durante la sesión del codespace. Si detienes y luego reinicias un codespace, se genera un nuevo GITHUB_TOKEN.

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.

    Captura de pantalla del menú emergente de un puerto reenviado con la opción "Copiar dirección local" resaltada con un contorno naranja.

  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.

    Captura de pantalla de la dirección URL del puerto reenviado pegado en Postman como dirección URL de solicitud GET. La URL está resaltada.

  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.

    Captura de pantalla de un GITHUB_TOKEN ficticio pegado en Postman como el valor de la clave X-GitHub-Token. La clave y el valor están resaltados.

  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.

    Captura de pantalla del menú emergente de un puerto reenviado con la opción "Establecer etiqueta de puerto" resaltada con un contorno naranja.

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

    Captura de pantalla de la etiqueta "Almacenamiento provisional" agregada como una etiqueta personalizada para un puerto reenviado.

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.

    Captura de pantalla del menú emergente de un puerto reenviado, con la opción "Establecer etiqueta y actualizar devcontainer.json" resaltada con un contorno naranja.

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

    Captura de pantalla de la etiqueta "Almacenamiento provisional" agregada como una etiqueta personalizada para un puerto reenviado.

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

Para más información sobre GitHub CLI, consulta "Acerca del CLI de GitHub".

Para reenviar un puerto, use el subcomando gh codespace ports forward. Reemplace codespace-port:local-port por los puertos remotos y locales que quiera conectar. Después de ingresar el comando, elige de la lista de codespaces que se muestra.

gh codespace ports forward CODESPACE-PORT:LOCAL-PORT

Para más información sobre este comando, vea el manual de GitHub CLI.

Para ver detalles de los puertos reenviados, escriba gh codespace ports y elija un codespace.

Compartir un puerto

Note

Solo puedes hacer que un puerto sea privado para una organización si en la organización se usa GitHub Team o GitHub Enterprise Cloud.

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.

Note

La elección de las opciones de visibilidad del puerto puede estar limitada por una directiva configurada para la organización. Para obtener más información, vea «Restricción de la visibilidad de los puertos reenviados».

Para cambiar la visibilidad de un puerto reenviado, use el subcomando gh codespace ports visibility. Existen tres ajustes de visibilidad:

  • private: solo es visible para usted. Este es el ajuste predeterminado cuando reenvías un puerto.
  • org: visible para los miembros de la organización propietaria del repositorio.
  • public: visible para cualquiera que conozca la URL y el número de puerto.

Reemplace codespace-port por el número de puerto reenviado. Reemplace setting por private, org o public. Después de ingresar el comando, elige de la lista de codespaces que se muestra.

gh codespace ports visibility CODESPACE-PORT:SETTINGS

Puedes configurar la visibilidad para varios puertos con un solo comando. Por ejemplo:

gh codespace ports visibility 80:private 3000:public 3306:org

Para más información sobre este comando, vea el manual de GitHub CLI.

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.

Note

El elemento GITHUB_TOKEN se crea automáticamente al iniciar un codespace y no cambia durante la sesión del codespace. Si detienes y luego reinicias un codespace, se genera un nuevo GITHUB_TOKEN.

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

Para buscar la dirección de un puerto reenviado, escribe gh codespace ports. Si tienes más de un codespace, selecciona el codespace adecuado en la lista que se muestra.

Copia la dirección y pégala en algún lugar para usarla más adelante.

Búsqueda de GITHUB_TOKEN

  1. Inicia una sesión de SSH para el codespace.

    gh codespace ssh
    
  2. Si tienes más de un codespace, selecciona el codespace adecuado en la lista que se muestra.

  3. Muestra el valor de GITHUB_TOKEN.

    echo $GITHUB_TOKEN
    

    El token es una cadena que comienza por ghu_.

  4. Copie el token.

    Important

    No compartas este token de acceso con nadie.

  5. Salga de la sesión SSH.

    exit
    

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.

    Captura de pantalla de la dirección URL del puerto reenviado pegado en Postman como dirección URL de solicitud GET. La URL está resaltada.

  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.

    Captura de pantalla de un GITHUB_TOKEN ficticio pegado en Postman como el valor de la clave X-GitHub-Token. La clave y el valor están resaltados.

  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.

    Captura de pantalla del menú emergente de un puerto reenviado con la opción "Establecer etiqueta de puerto" resaltada con un contorno naranja.

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

    Captura de pantalla de la etiqueta "Almacenamiento provisional" agregada como una etiqueta personalizada para un puerto reenviado.

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.

    Captura de pantalla del menú emergente de un puerto reenviado, con la opción "Establecer etiqueta y actualizar devcontainer.json" resaltada con un contorno naranja.

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

    Captura de pantalla de la etiqueta "Almacenamiento provisional" agregada como una etiqueta personalizada para un puerto reenviado.

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

Visualización de etiquetas de puerto en la línea de comandos

Puedes ver las etiquetas de puerto al enumerar los puertos reenviados de un codespace. Para ello, usa el comando gh codespace ports y, después, selecciona un codespace.

Reenviar un puerto

Para obtener información sobre cómo reenviar un puerto en un codespace a un puerto en el equipo local, consulta la sección "Reenvío de puertos" del artículo "Modelo de seguridad" en la documentación de JetBrains.

Como alternativa, puedes usar GitHub CLI para reenviar un puerto. Para obtener más información, haz clic en la pestaña "GitHub CLI" que se encuentra cerca de la parte superior de esta página.