Tutorial: Criar e compartilhar um aplicativo do Docker com Visual Studio Code

Este tutorial é o início de uma série de três partes que apresenta o Docker usando Visual Studio Code (VS Code). Você aprenderá a criar e executar contêineres, persistir dados e implantar seu aplicativo em contêineres no Azure.

Neste primeiro tutorial, você aprenderá a criar e implantar aplicativos do Docker. Em seguida, você pode atualizar e compartilhar seu aplicativo em contêineres.

Os contêineres são ambientes virtualizados compactos, como máquinas virtuais, que fornecem uma plataforma para criar e executar aplicativos. Os contêineres não exigem o tamanho e a sobrecarga de um sistema operacional completo. O Docker é um provedor de contêiner padrão de terceiros e um sistema de gerenciamento de contêineres padrão do setor.

O Docker Desktop é executado em seu computador e gerencia seus contêineres locais. Ferramentas de desenvolvimento como Visual Studio e VS Code oferecem extensões que permitem que você trabalhe com um serviço local do Docker Desktop. Você pode criar aplicativos em contêineres, implantar aplicativos em contêineres e depurar aplicativos em execução em seus contêineres.

Neste tutorial, você aprenderá a:

• Criar um contêiner.
• Compilar uma imagem de contêiner.
• Inicie um contêiner de aplicativo.
• Atualize o código e substitua o contêiner.
• Compartilhe sua imagem.
• Execute a imagem em uma nova instância.

Pré-requisitos

• Visual Studio Code.
• Extensão de Código VS do Docker.
• Área de Trabalho do Docker.
• Uma conta Docker Hub. Você pode criar uma conta gratuitamente.

Criar um contêiner

Um contêiner é um processo em seu computador. Ele é isolado de todos os outros processos no computador host. Esse isolamento usa namespaces de kernel e grupos de controle.

Um contêiner usa um sistema de arquivos isolado. Esse sistema de arquivos personalizado é fornecido por uma imagem de contêiner. A imagem contém tudo o que é necessário para executar um aplicativo, como todas as dependências, configuração, scripts e binários. A imagem também contém outra configuração para o contêiner, como variáveis de ambiente, um comando padrão a ser executado e outros metadados.

Depois de instalar a extensão do Docker para VS Code, você pode trabalhar com contêineres no VS Code. Além dos menus de contexto no painel do Docker, você pode selecionar Terminal>Novo Terminal para abrir uma janela de linha de comando. Você também pode executar comandos em uma janela bash. A menos que especificado, qualquer comando rotulado como Bash pode ser executado em uma janela bash ou no terminal do VS Code.

1. No VS Code, selecione Terminal>Novo Terminal.

2. Na janela do terminal ou em uma janela bash, execute este comando.

   docker run -d -p 80:80 docker/getting-started
   

   Este comando contém os seguintes parâmetros:

   • -d Execute o contêiner no modo desanexado, em segundo plano.
   • -p 80:80 Mapeie a porta 80 do host para a porta 80 no contêiner.
   • docker/getting-started Especifica a imagem a ser usada.

   Dica

   Você pode combinar sinalizadores de caractere único para encurtar o comando completo. Por exemplo, o comando acima pode ser gravado como:

   docker run -dp 80:80 docker/getting-started
   

3. No VS Code, selecione o ícone do Docker à esquerda para exibir a extensão do Docker.

   

   A Extensão do Docker VS Code mostra os contêineres em execução no computador. Você pode acessar logs de contêiner e gerenciar o ciclo de vida do contêiner, como parar e remover.

   O nome do contêiner, modest_schockly neste exemplo, é criado aleatoriamente. O seu terá um nome diferente.

4. Clique com o botão direito do mouse no docker/introdução para abrir um menu de contexto. Selecione Abrir no Navegador.

   Em vez disso, abra um navegador e insira http://localhost/tutorial/.

   Você verá uma página, hospedada localmente, sobre o DockerLabs.

5. Clique com o botão direito do mouse no docker/introdução para abrir um menu de contexto. Selecione Remover para remover esse contêiner.

   Para remover um contêiner usando a linha de comando, execute este comando para obter sua ID de contêiner:

   docker ps
   

   Em seguida, pare e remova o contêiner:

   docker stop <container-id>
   docker rm <container-id>
   

6. Atualize seu navegador. A página Introdução que você viu há um momento se foi.

Criar uma imagem de contêiner para o aplicativo

Este tutorial usa um aplicativo Todo simples.

O aplicativo permite criar itens de trabalho e marcá-los como concluídos ou excluí-los.

Para criar o aplicativo, crie um Dockerfile. Um Dockerfile é um script baseado em texto de instruções que é usado para criar uma imagem de contêiner.

1. Vá para o repositório do Tutorial do Docker Introdução e selecioneCEP de Download de Código>. Extraia o conteúdo para uma pasta local.

   

2. No VS Code, selecione Arquivo>Abrir Pasta. Navegue até a pasta do aplicativo no projeto extraído e abra essa pasta. Você deve ver um arquivo chamado package.json e duas pastas chamadas src e spec.

   

3. Crie um arquivo chamado Dockerfile na mesma pasta que o package.json de arquivo com o conteúdo a seguir.

   FROM node:12-alpine
   RUN apk add --no-cache python2 g++ make
   WORKDIR /app
   COPY . .
   RUN yarn install --production
   CMD ["node", "/app/src/index.js"]
   

   Observação

   Verifique se o arquivo não tem nenhuma extensão de arquivo como .txt.

4. No explorador de arquivos, à esquerda no VS Code, clique com o botão direito do mouse no Dockerfile e selecioneCriar Imagem. Insira a introdução como a marca para a imagem na caixa de entrada de texto.

   A marca é um nome amigável para a imagem.

   Para criar uma imagem de contêiner da linha de comando, use o comando a seguir.

   docker build -t getting-started .
   

   Observação

   Em uma janela bash externa, vá para a app pasta que tem o Dockerfile para executar este comando.

Você usou o Dockerfile para criar uma nova imagem de contêiner. Você deve ter notado que muitas "camadas" foram baixadas. O Dockerfile começa a partir da node:12-alpine imagem. A menos que isso já esteja no computador, essa imagem precisa ser baixada.

Depois que a imagem foi baixada, o Dockerfile copia seu aplicativo e usa para instalar as dependências yarn do aplicativo. O CMD valor no Dockerfile especifica o comando padrão a ser executado ao iniciar um contêiner a partir dessa imagem.

No . final do comando, informa que o docker build Docker deve procurar o Dockerfile no diretório atual.

Iniciar o contêiner do aplicativo

Agora que você tem uma imagem, você pode executar o aplicativo.

1. Para iniciar o contêiner, use o comando a seguir.

   docker run -dp 3000:3000 getting-started
   

   O -d parâmetro indica que você está executando o contêiner no modo desanexado, em segundo plano. O -p valor cria um mapeamento entre a porta de host 3000 e a porta de contêiner 3000. Sem o mapeamento de porta, você não seria capaz de acessar o aplicativo.

2. Após alguns segundos, no VS Code, na área do Docker, em CONTÊINERES, clique com o botão direito do mouse em introdução e selecione Abrir no Navegador. Em vez disso, você pode abrir seu navegador da Web para http://localhost:3000.

   Você deve ver o aplicativo em execução.

   

3. Adicione um ou dois itens e veja se ele funciona conforme o esperado. Você pode marcar os itens como completos e remover itens. Seu front-end está armazenando itens com êxito no back-end.

Atualizar o código e substituir o contêiner

Neste ponto, você tem um gerenciador de listas de tarefas pendentes em execução com alguns itens. Agora, vamos fazer algumas alterações e aprender a gerenciar seus contêineres.

1. No arquivo, atualize a src/static/js/app.js linha 56 para usar este novo rótulo de texto:

   - <p className="text-center">No items yet! Add one above!</p>
   + <p className="text-center">You have no todo items yet! Add one above!</p>
   

   Salve sua alteração.

2. Pare e remova a versão atual do contêiner. Mais de um contêiner não pode usar a mesma porta.

   Clique com o botão direito do mouse no contêiner de introdução e selecione Remover.

   

   Ou, na linha de comando, use o comando a seguir para obter a ID do contêiner.

   docker ps
   

   Em seguida, pare e remova o contêiner:

   docker stop <container-id>
   docker rm <container-id>
   

3. Crie a versão atualizada da imagem. No explorador de arquivos, clique com o botão direito do mouse no Dockerfile e selecioneCriar Imagem.

   Ou, para criar na linha de comando, use o mesmo comando usado antes.

   docker build -t getting-started .
   

4. Inicie um novo contêiner que usa o código atualizado.

   docker run -dp 3000:3000 getting-started
   

5. Atualize seu navegador http://localhost:3000 para ver o texto de ajuda atualizado.

   

Compartilhar sua imagem

Agora que você criou uma imagem, pode compartilhá-la. Para compartilhar imagens do Docker, use um registro do Docker. O registro padrão é Docker Hub, que é de onde todas as imagens que usamos vieram.

Para enviar por push uma imagem, primeiro, você precisa criar um repositório no Docker Hub.

1. Vá para Docker Hub e entre em sua conta.

2. Selecione Criar Repositório.

3. Para o nome do repositório, insira getting-started. Verifique se a Visibilidade é Pública.

4. Selecione Criar.

   À direita da página, você verá uma seção chamada comandos do Docker. Esta seção fornece um comando de exemplo a ser executado para enviar por push para este repositório.

   

5. Na exibição do Docker do VS Code, em IMAGENS, clique com o botão direito do mouse na marca de imagem e selecione Push. Selecione Conectar registro e Docker Hub.

   Você precisará inserir sua conta Docker Hub, senha e um namespace.

Para enviar por push para Docker Hub usando a linha de comando, use este procedimento.

1. Entre no Docker Hub:

   docker login -u <username>
   

2. Use o comando a seguir para dar um novo nome à imagem de introdução .

   docker tag getting-started <username>/getting-started
   

3. Use o comando a seguir para enviar por push o contêiner.

   docker push <username>/getting-started
   

Executar a imagem em uma nova instância

Agora que sua imagem foi criada e enviada por push para um registro, tente executar o aplicativo em uma nova instância que nunca viu essa imagem de contêiner. Para executar seu aplicativo, use o Play with Docker.

1. Abra seu navegador para Jogar com o Docker.

2. Entre com sua conta de Docker Hub.

3. Selecione Iniciar e selecione o link + ADICIONAR NOVA INSTÂNCIA na barra lateral esquerda. Após alguns segundos, uma janela do terminal é aberta no navegador.

   

4. No terminal, inicie seu aplicativo.

   docker run -dp 3000:3000 <username>/getting-started
   

   Brincar com o Docker efetua pull da imagem e a inicia.

5. Selecione o selo 3000 , ao lado de OPEN PORT. Você deve ver o aplicativo com suas modificações.

   Se o selo 3000 não aparecer, selecione ABRIR PORTA e insira 3000.

Limpar recursos

Mantenha tudo o que você fez até agora para continuar esta série de tutoriais.

Próximas etapas

Você concluiu este tutorial. Você aprendeu a criar imagens de contêiner, executar um aplicativo em contêineres, atualizar seu código e executar sua imagem em uma nova instância.

Aqui estão alguns recursos que podem ser úteis para você:

• Integração do Docker Cloud
• Exemplos

Em seguida, tente o próximo tutorial nesta série:

Manter dados e colocar em camada um aplicativo do Docker