Encaminhar portas no seu código

Quando um aplicativo em execução em um codespace imprime a saída para o terminal que contém uma URL do localhost, como http://localhost:PORT ou http://127.0.0.1:PORT, a porta é encaminhada automaticamente. Se você estiver usando os GitHub Codespaces no navegador ou no Visual Studio Code, a cadeia de caracteres da URL no terminal será convertida em um link que acessa a página da Web no computador local. Por padrão, GitHub Codespaces encaminha portas usando HTTP.

Você pode editar a configuração do contêiner de desenvolvimento do repositório para encaminhar automaticamente uma ou mais portas. Você também pode encaminhar uma porta manualmente, etiquetar portas encaminhadas, compartilhar portas encaminhadas com integrantes da sua organização, compartilhar as portas encaminhadas publicamente e adicione as portas encaminhadas à configuração do codespace.

Encaminhar uma porta

Você pode encaminhar manualmente uma porta que não foi encaminhada automaticamente.

1. Abra o terminal no seu codespace.

2. Clique na guia PORTAS.

3. Na lista de portas, clique em Adicionar porta.

   

4. Digite o número ou o endereço da porta e pressione Enter.

   

Usando encaminhamento de HTTPS

Por padrão, GitHub Codespaces encaminha portas usando HTTP, mas é possível atualizar qualquer porta para usar HTTPS, conforme necessário. Se uma porta com visibilidade pública for atualizada para usar HTTPS, a visibilidade dela mudará automaticamente para privada.

1. Abra o terminal no seu codespace.

2. Clique na guia PORTAS.

3. Clique com o botão direito do mouse na porta que deseja atualizar e passe o cursor sobre Alterar Protocolo de Porta.

   

4. Selecione o protocolo necessário para esta porta. O protocolo que você selecionar será lembrado por esta porta durante o ciclo de vida do codespace.

Compartilhar uma porta

Se você quiser compartilhar uma porta encaminhada com outras pessoas, você pode tornar a porta privada da sua organização ou tornar a porta pública. Após tornar uma porta privada para a sua organização, qualquer pessoa na organização com a URL da porta poderá ver o aplicativo em execução. Após você tornar uma porta pública, qualquer pessoa que conheça a URL e o número da porta poderá ver o aplicativo em execução sem precisar efetuar a autenticação.

1. Abra o terminal no seu codespace.

2. Clique na guia PORTAS.

3. Clique com o botão direito do mouse na porta que deseja compartilhar, selecione Visibilidade da Porta e clique em Privado para a Organização ou Público.

   

4. À direita do endereço local para a porta, clique no ícone copiar.

   

5. Envie a URL copiada para a pessoa com quem você deseja compartilhar a porta.

Como usar ferramentas de linha de comando e clientes REST para acessar portas

Quando você encaminha uma porta, seu aplicativo fica disponível no URL https://CODESPACENAME-PORT.app.github.dev. Por exemplo, https://monalisa-hot-potato-vrpqrxxrx7x2rxx-4000.app.github.dev. Se você encaminhar uma porta privada do aplicativo da área de trabalho VS Code, seu aplicativo também ficará disponível em uma porta localhost, como 127.0.0.1:4000.

Para acessar seu aplicativo usando um cliente REST, como o Postman, ou uma ferramenta de linha de comando como curl, você não precisará se autenticar se estiver usando uma porta localhost ou se estiver acessando uma porta pública no domínio remoto. No entanto, para se conectar a uma porta privada no domínio remoto, você precisa se autenticar com o token de acesso GITHUB_TOKEN na sua solicitação.

Como localizar o endereço ao qual se conectar

1. Abra o terminal no seu codespace.

2. Clique na guia PORTAS. Ela lista todas as portas que você encaminhou.

3. Clique com o botão direito do mouse na porta à qual você deseja se conectar e clique em Copiar Endereço Local.

   

4. Cole o endereço copiado em algum lugar para uso posterior.

Como localizar o GITHUB_TOKEN

1. No terminal do seu codespace, insira echo $GITHUB_TOKEN.

   O token é uma cadeia de caracteres que começa com ghu_.

2. Copie a o token.

   Important

   Não compartilhe esse token de acesso com ninguém.

Como usar o curl para acessar uma porta encaminhada

Em um terminal no computador local, insira:

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

Substitua ADDRESS e TOKEN pelos valores que você copiou anteriormente.

Como usar o Postman para acessar uma porta encaminhada

1. Abra o Postman.

2. Crie uma solicitação GET.

3. Cole o endereço copiado anteriormente como a URL da solicitação.

   

4. Na guia Cabeçalhos, crie uma entrada em que a chave é "X-Github-Token" e o valor é GITHUB_TOKEN que você copiou anteriormente.

   

5. Clique em Enviar.

Encaminhando uma porta automaticamente

É possível adicionar uma porta encaminhada à configuração dos GitHub Codespaces do repositório para que a porta seja encaminhada automaticamente a todos os codespaces criados do repositório. Depois de atualizar a configuração, todos os codespaces criados anteriormente deverão ser reconstruídos para que a alteração seja aplicada. Para saber mais sobre o arquivo de configuração do contêiner de desenvolvimento, confira Introdução aos contêineres de desenvolvimento.

1. No codespace, abra o arquivo de configuração do contêiner de desenvolvimento que você deseja atualizar. Normalmente, esse arquivo é .devcontainer/devcontainer.json.

2. Adicione a propriedade forwardPorts.

   "forwardPorts": [NUMBER],
   

   Substitua NUMBER pelo número da porta que você deseja encaminhar. Esta pode ser uma lista separada por vírgulas de números de portas.

3. Salve o arquivo.

Etiquetar uma porta

Ao abrir um codespace no navegador ou no aplicativo da área de trabalho VS Code, você pode rotular uma porta encaminhada para facilitar a identificação em uma lista.

1. Abra o terminal no seu codespace.

2. Clique na guia PORTAS.

3. Clique com o botão direito do mouse na porta que deseja rotular e clique em Definir Rótulo da Porta.

   

4. Digite um rótulo para sua porta e pressione Enter.

   

Como rotular uma porta encaminhada automaticamente

Você pode rotular uma porta e gravar a alteração em um arquivo de configuração do contêiner de desenvolvimento do repositório. Se você fizer isso para uma porta que é encaminhada automaticamente, usando a propriedade forwardPorts, o rótulo será aplicado automaticamente a essa porta encaminhada para todos os codespaces futuros criados com base no repositório que usam esse arquivo de configuração.

1. Abra o terminal no seu codespace.

2. Clique na guia PORTAS.

3. Clique com o botão direito do mouse na porta cujo atributo de rótulo deseja adicionar à configuração do codespace e clique em Definir Rótulo e Atualizar devcontainer.json.

   

4. Digite um rótulo para sua porta e pressione Enter.

   

5. Se o repositório tiver mais de um arquivo de configuração do contêiner de desenvolvimento, você será solicitado a escolher qual arquivo deseja atualizar.

   O arquivo de configuração do contêiner de desenvolvimento é atualizado para incluir o novo rótulo na portsAttributes propriedade. Por exemplo:

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