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.

Nota: El uso de GitHub Codespaces con un IDE de JetBrains se encuentra actualmente en versión beta pública y está sujeto a cambios.

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.

Reenvío automático de 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.

Nota: 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 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.

  1. Haz clic en la pestaña PUERTOS.

    Captura de pantalla de la pestaña PUERTOS

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

    Captura de pantalla del botón "Agregar puerto"

  3. Teclea el número de puerto o de dirección y luego presiona enter.

    Captura de pantalla de la especificación de un número de puerto

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.

    Captura de pantalla de 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 de la opción para cambiar el 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

Nota: Solo puede 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.

Nota: La elección de las opciones de visibilidad del puerto puede estar limitada por una directiva configurada para la organización. Para 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.

    Captura de pantalla de 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 de la opción "Visibilidad del puerto" en el menú contextual

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

    Captura de pantalla del icono para copiar la dirección URL del puerto

  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 una dirección URL, como https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-4000.preview.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.

Nota: El token 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 de "Copiar dirección local" en el menú contextual

  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.

    Importante: 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 pegada en Postman

  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 la clave y el token en Postman

  5. Haga clic en Enviar. ## 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.

    Captura de pantalla de la pestaña PUERTOS

  3. Pasa el mouse sobre el puerto que quieras etiquetar y luego haz clic en el icono de etiqueta. Icono de etiqueta para el puerto 1. Teclea una etiqueta para tu puerto y luego presiona enter. Cuadro de texto para escribir la etiqueta para el puerto ## Agregar el peurto a la configuración del codespace

Puedes agregar un puerto reenviado a la configuración de GitHub Codespaces del repositorio para que este pueda reenviarse automáticamente a todos los codespaces que se crearon desde el repositorio. Después de que actualizas la configuración, cualquier codespace creado debe reconstruirse para que el cambio se aplique. Para obtener más información, consulte "Introducción a los contenedores de desarrollo".

Puedes configurar manualmente los puertos reenviados en un archivo .devcontainer.json mediante la propiedad forwardPorts o puedes usar el panel "Puertos" en un codespace que hayas abierto en el explorador o en la aplicación de escritorio de VS Code.

  1. Abre el terminal en tu codespace.

  2. Haz clic en la pestaña PUERTOS.

    Captura de pantalla de la pestaña PUERTOS

  3. Haga clic con el botón derecho en el puerto que quiera agregar a la configuración del codespace y, después, haga clic en Configurar etiqueta y actualizar devcontainer.json. Opción para establecer la etiqueta y agregar un puerto a devcontainer.json en el menú contextual 1. Teclea una etiqueta para tu puerto y luego presiona enter. Cuadro de texto para escribir la etiqueta para el puerto

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.

Reenvío automático de 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.

Nota: 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 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.

  1. Haz clic en la pestaña PUERTOS.

    Captura de pantalla de la pestaña PUERTOS

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

    Captura de pantalla del botón "Agregar puerto"

  3. Teclea el número de puerto o de dirección y luego presiona enter.

    Captura de pantalla de la especificación de un número de puerto

Compartir un puerto

Nota: Solo puede 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.

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

1. Abre el terminal en tu codespace. 1. Haz clic en la pestaña **PUERTOS**.

Captura de pantalla de la pestaña PUERTOS

  1. 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 de la opción para hacer público un puerto en el menú contextual

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

    Captura de pantalla del icono para copiar la dirección URL del puerto

  3. 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 una dirección URL, como https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-4000.preview.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.

Nota: El token 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 de "Copiar dirección local" en el menú contextual

  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.

    Importante: 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 pegada en Postman

  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 la clave y el token en Postman

  5. Haga clic en Enviar. ## 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.

    Captura de pantalla de la pestaña PUERTOS

  3. Pasa el mouse sobre el puerto que quieras etiquetar y luego haz clic en el icono de etiqueta. Icono de etiqueta para el puerto 1. Teclea una etiqueta para tu puerto y luego presiona enter. Cuadro de texto para escribir la etiqueta para el puerto ## Agregar el peurto a la configuración del codespace

Puedes agregar un puerto reenviado a la configuración de GitHub Codespaces del repositorio para que este pueda reenviarse automáticamente a todos los codespaces que se crearon desde el repositorio. Después de que actualizas la configuración, cualquier codespace creado debe reconstruirse para que el cambio se aplique. Para obtener más información, consulte "Introducción a los contenedores de desarrollo".

Puedes configurar manualmente los puertos reenviados en un archivo .devcontainer.json mediante la propiedad forwardPorts o puedes usar el panel "Puertos" en un codespace que hayas abierto en el explorador o en la aplicación de escritorio de VS Code.

  1. Abre el terminal en tu codespace.

  2. Haz clic en la pestaña PUERTOS.

    Captura de pantalla de la pestaña PUERTOS

  3. Haga clic con el botón derecho en el puerto que quiera agregar a la configuración del codespace y, después, haga clic en Configurar etiqueta y actualizar devcontainer.json. Opción para establecer la etiqueta y agregar un puerto a devcontainer.json en el menú contextual 1. Teclea una etiqueta para tu puerto y luego presiona enter. Cuadro de texto para escribir la etiqueta para el puerto

Para obtener más información sobre GitHub CLI, vea "Acerca de GitHub CLI".

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

Nota: Solo puede 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.

Nota: La elección de las opciones de visibilidad del puerto puede estar limitada por una directiva configurada para la organización. Para 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 una dirección URL, como https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-4000.preview.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.

Nota: El token 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.

    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 pegada en Postman

  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 la clave y el token en Postman

  5. Haga clic en Enviar. ## 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.

    Captura de pantalla de la pestaña PUERTOS

  3. Pasa el mouse sobre el puerto que quieras etiquetar y luego haz clic en el icono de etiqueta. Icono de etiqueta para el puerto 1. Teclea una etiqueta para tu puerto y luego presiona enter. Cuadro de texto para escribir la etiqueta para el puerto

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.

Agregar el peurto a la configuración del codespace

Puedes agregar un puerto reenviado a la configuración de GitHub Codespaces del repositorio para que este pueda reenviarse automáticamente a todos los codespaces que se crearon desde el repositorio. Después de que actualizas la configuración, cualquier codespace creado debe reconstruirse para que el cambio se aplique. Para obtener más información, consulte "Introducción a los contenedores de desarrollo".

Puedes configurar manualmente los puertos reenviados en un archivo .devcontainer.json mediante la propiedad forwardPorts o puedes usar el panel "Puertos" en un codespace que hayas abierto en el explorador o en la aplicación de escritorio de VS Code.

  1. Abre el terminal en tu codespace.

  2. Haz clic en la pestaña PUERTOS.

    Captura de pantalla de la pestaña PUERTOS

  3. Haga clic con el botón derecho en el puerto que quiera agregar a la configuración del codespace y, después, haga clic en Configurar etiqueta y actualizar devcontainer.json. Opción para establecer la etiqueta y agregar un puerto a devcontainer.json en el menú contextual 1. Teclea una etiqueta para tu puerto y luego presiona enter. Cuadro de texto para escribir la etiqueta para el puerto

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.