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

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.

    Captura de tela que mostra a extensão do Docker com o tutorial do docker/introdução em execução.

    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.

A captura de tela mostra o aplicativo de exemplo com vários itens adicionados e uma caixa de texto e um botão para adicionar novos itens.

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.

    A captura de tela mostra parte do site do Github, com o botão Código verde e a opção Baixar ZIP realçado.

  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.

    Captura de tela de Visual Studio Code mostrando o arquivo package.json aberto com o aplicativo carregado.

  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.

    A captura de tela mostra o aplicativo de exemplo sem itens e o texto Nenhum item ainda adiciona um acima.

  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.

    A captura de tela mostra a extensão do Docker com um contêiner selecionado e um menu de contexto com Remover selecionado.

    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.

    Captura de tela que mostra o aplicativo de exemplo com o texto modificado, descrito acima.

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.

    A captura de tela mostra a página Docker Hub com um comando sugerido do Docker.

  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.

    A captura de tela mostra o site Reproduzir com o Docker com um link adicionar nova instância.

  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ê:

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