Docker no Back e no Front - um exemplo com .NET Core e Angular - Campus Party Brasil 2019
No dia 13/02/2019 estive com meu amigo Thiago Adriano (Microsoft MVP) participando como palestrante da Campus Party Brasil 2019 (CPBR12). Realizamos nesta ocasião um workshop sobre o uso de containers Docker em projetos que façam uso de APIs criadas com .NET/ASP.NET Core e que tenham seu front-end desenvolvido em Angular 7.
Esta 12a edição da Campus Party aconteceu no Expo Center Norte em São Paulo — SP entre os dias 12/02 e 17/02 (terça a domingo), contando com diversas palestras simultâneas e participantes do Brasil inteiro.
Gostaria de deixar neste post meu muito obrigado à Eimi Romim (Campus Party) por todo o suporte para que eu pudesse participar como palestrante desta edição da Campus Party.
Gostaria de deixar neste post meu muito obrigado ao Rodrigo Wanderley de Melo Cardoso (iMasters) pelo convite e à Karla Tomaz (Campus Party) por todo o suporte para que eu pudesse participar como palestrante.
Deixo aqui também meus agradecimentos à Marcela Sisiliani pelas fotos tiradas durante a palestra.
Os slides da apresentação já estão no SlideShare:
Procedimentos necessários para a execução da solução via containers Docker
O projeto da API REST aqui apresentado permitirá o gerenciamento de um catálogo de produtos e foi criado com o ASP.NET Core 2.2, estando disponível no GitHub a partir do endereço a seguir:
https://github.com/renatogroffe/ASPNETCore2.2_EFCore-InMemory
Quanto ao arquivo Dockerfile que permitirá a geração da imagem para execução da API via container Docker, foram utilizadas como base as imagens Alpine microsoft/dotnet:2.2-sdk-alpine e microsoft/dotnet:2.2-aspnetcore-runtime-alpine:
Já abordei a montagem de imagens Docker com aplicações ASP.NET Core 2.2 no seguinte artigo:
ASP.NET Core 2.2 + Docker: visão geral e exemplos
O arquivo docker-compose.yml será criado com o objetivo de permitir a subida através de um único comando dos containers referentes à API REST (apiprodutos, executando na porta 20001) e à aplicação front-end (siteprodutos, rodando na porta 20000):
- Este arquivo de configurações (docker-compose.yml) foi criado na pasta em que se encontram os diretórios correspondentes às 2 aplicações;
- O build da imagem correspondente à API REST foi especificado para acontecer durante a execução do Docker Compose (caso a mesma ainda não exista);
- Todos os containers pertencem a uma mesma network chamada produtos-network.
Maiores detalhes sobre o uso do Docker Compose no deployment de soluções podem ser encontrados no artigo a seguir:
ASP.NET Core + Docker Compose: implementando soluções Web multi-containers
O projeto Angular utilizado por esse exemplo está no seguinte repositório do GitHub:
https://github.com/programadriano/campus/
No arquivo environment.prod.ts deste projeto foi referenciada a API REST a ser executada na porta 20001 (conforme definição em docker-compose.yml):
Para a geração da imagem contendo o front-end em Angular será utilizada a imagem Alpine do NGINX, com o arquivo nginx.conf definido para a aplicação sendo copiado para dentro da mesma juntamente com o conteúdo da publicação (diretório dist):
A seguir temos o conteúdo do arquivo nginx.conf, com todas as configurações esperadas para a execução de uma aplicação Angular via container Docker:
Caso deseje saber mais sobre o uso do NGINX com aplicações Web, consulte o seguintes artigos:
ASP.NET Core 2.2: implementando Load Balancing com Nginx, Docker e Docker Compose
Publicando um web site estático na nuvem com Docker, Nginx e Azure Container Instances
E também assista à gravação de um evento recente do Canal .NET a respeito desta tecnologia:
O ng build --prod irá gerar uma publicação da aplicação Angular com as configurações de Produção:
Já a instrução docker build -t siteprodutos-campus . procederá com o build da imagem:
O comando docker images siteprodutos-campus exibirá então a imagem gerada no passo anterior:
Com isto finalmente chegamos ao momento de acionar a execução do Docker Compose para a criação dos containers e outros recursos indicados em docker-compose.yml. Isto acontecerá por meio da instrução docker-compose up -d:
O comando docker network ls mostrará que a rede produtos-network foi criada com sucesso:
A instrução docker images apiprodutos-campus indicará, por sua vez, que a imagem correspondente à API também foi gerada normalmente:
Já o comando docker-compose ps exibirá os containers criados na porta 20000 (front-end em Angular) e 20001 (API REST gerada com o ASP.NET Core 2.2):
Ao acessar o endereço http://localhost:20000 via browser aparecerá o front-end deste projeto, sendo possível inclusive proceder com a inclusão de produtos:
Uma consulta ao endereço http://localhost:20001/api/produtos por meio do utilitário Postman trará os produtos cadastrados a partir do front-end:
E para concluir este post deixo um link com diversos materiais gratuitos (artigos, vídeos, projetos de exemplo) que venho produzindo sobre Docker:
