Exercício – Adicionar um contêiner de desenvolvimento a um projeto existente

Concluído

Ao configurar o contêiner de desenvolvimento de um projeto, primeiro você precisará adicionar uma configuração do contêiner a ele. Uma configuração de contêiner define o ambiente no Visual Studio Code.

Neste exercício, você adicionará um contêiner de desenvolvimento e abrirá o projeto do Painel de Produtos no contêiner.

Adicionar um contêiner de desenvolvimento

1. Retorne ao VS Code e ao projeto clonado anteriormente.

2. Pressione F1 para abrir a Paleta de comandos.

3. Digite adicionar contêiner de desenvolvimento e selecione Dev Containers: adicionar arquivos de configuração de contêiner de desenvolvimento. Isso apresenta uma lista de Modelos de Contêiner de Desenvolvimento. Os modelos contêm os arquivos de origem necessários para configurar um ambiente de desenvolvimento completo para a pilha de tecnologia especificada.

4. Selecione Adicionar configuração à pasta de dados do usuário.

5. Selecione as seguintes opções:

   Opção	Valor
   Selecionar um modelo de configuração de contêiner	Python 3
   Versão do Python	3.11
   Selecionar recursos adicionais a instalar	Selecione OK

Importante

Na primeira etapa, ao selecionar um modelo de configuração, talvez seja necessário selecionar "Mostrar Todas as Definições..." na lista, depois selecione Python assim que o conjunto completo de modelos for carregado.

Uma configuração de Dev Container será adicionada ao projeto. O Visual Studio Code enviará uma notificação de que agora é possível abrir o projeto em um contêiner. Por enquanto, ignore esta notificação.

Inspecionar os arquivos de configuração

1. Observe que uma nova pasta chamada .devcontainer foi adicionada ao projeto.
2. Expanda essa pasta e observe se ela contém um arquivo devcontainer.json.

Abrir o projeto em um contêiner

1. Pressione F1 para abrir a Paleta de comandos.
2. Digite reabrir no contêiner.
3. Selecione Dev Containers: reabrir no contêiner na lista de opções disponíveis.

O contêiner começará a ser compilado. Executar o build inicial pode levar alguns minutos porque uma nova imagem deverá ser baixada e criada em seu computador. Após o primeiro build do contêiner, os builds posteriores serão muito mais rápidos.

Exibir o Indicador Remoto

Quando o build do contêiner for concluído, confirme se você está conectado ao contêiner examinando o Indicador Remoto. Agora você também deve ver os arquivos de projeto carregados no VS Code.

• Examine o Indicador Remoto conferindo o canto inferior esquerdo do VS Code. Observe que agora a mensagem "Contêiner de Desenvolvimento: Python 3" é exibida.

  

Importante

É possível ver notificações sobre o Pylance ou aprimorar o desempenho no Windows. É possível ignorar com segurança todas as notificações exibidas no VS Code. Não será preciso fazer isso.

Inspecionar o contêiner

1. Pressione Ctrl + ` para abrir um terminal integrado no Visual Studio Code, caso ele não esteja aberto.

2. Observe que o prompt do terminal pode ser diferente do prompt do terminal normal.

   

3. Execute o seguinte comando para garantir a instalação do Python:

   python --version
   

   A saída do terminal deverá ser a versão do Python usada no contêiner.

Instalar as dependências do projeto

• Execute o seguinte comando no terminal para instalar as dependências do Flask, necessárias para executar o projeto:

  pip3 install --user -r requirements.txt
  

Executar o projeto

1. Digite o seguinte comando no terminal para iniciar o projeto:

   python app.py
   

2. Abra o projeto em um navegador navegando até http://127.0.0.1:5000.

   

Ótimo trabalho! Você tem um aplicativo Web Python com o Flask em execução em seu computador e talvez não saiba exatamente o que isso significa. Não se preocupe! Você não precisa saber. O contêiner cuida da configuração de todo o ambiente.

Na próxima seção, você vai aprender a usar o arquivo devcontainer.json para automatizar a instalação da dependência e personalizar o VS Code para este projeto Python.