QPANC - Parte 19 - Docker - Registro e Build

QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.

• Source
• Introdução
• Parte I - ASP.NET - Inicializando os Projetos
• Parte 2 - PostgreSQL
• Parte 3 - ASP.NET - Registrando Serviços e Lendo Variáveis de Ambiente
• Parte 4 - ASP.NET - Entity Framework e ASP.NET Core Identity
• Parte 5 - ASP.NET - Documentação Interativa com Swagger
• Parte 6 - ASP.NET - Regionalização
• Parte 7 - ASP.NET - Autenticação e Autorização
• Parte 8 - ASP.NET - CORS
• Parte 9 - Quasar - Criação e Configuração do Projeto
• Parte 10 - Quasar - Configurações e Customizações
• Parte 11 - Quasar - Componentes - Diferença entre SPA e SSR
• Parte 12 - Quasar - Serviços
• Parte 13 - Quasar - Regionalização e Stores
• Parte 14 - Quasar - Consumindo a API
• Parte 15 - Quasar - Login
• Parte 16 - Quasar - Áreas Protegidas
• Parte 17 - Quasar - Registro
• Parte 18 - Docker - Maquina Virtual Linux
• Parte 19 - Docker - Registro e Build
• Parte 20 - Docker - Traefik e Publicação
• Demo Online

38 Criando um Container Registry no Azure.

para podemos continuar, iremos precisar de um Container Registry, novamente, você pode usar qual quer provedor, como por exemplo, o Docker Hub porém estarei criando um no azure.

Então comece o processo para adicionar um novo recurso, e busque por Container Registry:

É interessante que o Container Registry use o mesmo grupo de recursos e esteja localizado na mesma região que a VM, assim como estaremos ativando o usuário admin, e como estamos criando este registro apenas para testes, use o SKU Basic.

Agora à confirmação da criação do registro, precisamos esperar alguns instantes, até que o azure configure tudo.

Por fim, vá até a guia Access Keys e copie o nome do Login server, username e o password.

Agora, temos um registro para onde podemos enviar as nossas imagens.

39 Fazendo o Build para produção

Antes de realizamos o build para produção, precisamos desativar o redirecionamento HTTPS da API, pois este procedimento será feito por outro serviço, o traefik.

então, no docker-compose.yml remova qual quer referencia à porta 443.

- "34513:443" => // remova completamente esta linha
- ASPNETCORE_URLS=http://+:443;http://+:80 => - ASPNETCORE_URLS=;http://+:80

E no QPANC.Api/Startup.cs, remova a seguinte linha:

app.UseHttpsRedirection();

Então, faça uma copia do docker-compose.override.yml e renomeie ela para docker-compose.production.yml.

QPANC/docker-compose.production.yml

version: '3.4'

services:
  qpanc.api:
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_URLS=https://+:443;http://+:80
      - DEFAULT_CONNECTION=Server=qpanc.database;Port=5432;Database=postgres;User Id=postgres;Password=keepitsupersecret;
      - JWTBEARER_VALIDISSUER=https://api.qpanc.tobiasmesquita.dev/
      - JWTBEARER_VALIDAUDIENCE=https://api.qpanc.tobiasmesquita.dev/
      - JWTBEARER_ISSUERSIGNINGKEY=itUXC7iVRsofSDWNeg/aLYpc4bMzHAsMPzeItE1PQi2tMK2f4t0InRgTE5B/4IAjhAX5LQSIGL1CaUHSSzED8A==
      - JWTBEARER_TOKENDECRYPTIONKEY=7hfboHG0d4GnXjVng0ukMo+IgrKKrPLUMtOvnt4S514=
      - CORS_HOSTS__0=qpanc.tobiasmesquita.dev
    ports:
      - "34512:80"
      - "34513:443"
    volumes:
      - ${APPDATA}/Microsoft/UserSecrets:/root/.microsoft/usersecrets:ro
      - ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro

  qpanc.app:
    container_name: qpanc_app_prod
    build:
      context: ./QPANC.App
      target: 'prod-stage'
      dockerfile: .docker/prod.Dockerfile
    volumes:
      - app:/app
    ports:
      - "34514:3000"

  qpanc.database:
    volumes:
      - database:/var/lib/postgresql/database
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: keepitsupersecret
      POSTGRES_DB: postgres

volumes:
  app:
  database:

No service qpanc.api nós alteramos o environment, adicionando algumas variáveis de ambiente e modificando outras: ASPNETCORE_ENVIRONMENT, JWTBEARER_VALIDISSUER, JWTBEARER_VALIDAUDIENCE e CORS_HOSTS__0.

No service qpanc.app, temos mais alterações, a primeira é o nome do contêiner em container_name: qpanc_app_prod, no caso do build, estamos usando um outro Dockerfile, nos volumes, app vai está apontando para um volume interno, na porta, estaremos usando a porta 3000 ao invés de 8080, assim como, foi removido o commands.

Por fim, o qpanc.database teve alterações menos relevantes, como o volumes e o container_name.

O próximo passo, é preparar o prod.Dockerfile

QPANC.App/.docker/prod.Dockerfile

# develop stage
FROM node:12.16-alpine as develop-stage
WORKDIR /app/source
COPY package*.json ./
RUN npm i -g @quasar/cli@latest
COPY . .

# local-deps
FROM develop-stage as local-deps-stage
RUN ls
RUN rm -r -f .quasar
RUN rm -r -f dist
RUN rm -r -f node_moduless
RUN rm -f yarn.lock
RUN yarn

# build stage
FROM local-deps-stage as build-stage
ENV API_CLIENT_URL=https://api.qpanc.tobiasmesquita.dev/
ENV API_SERVER_URL=https://api.qpanc.tobiasmesquita.dev/
RUN quasar build -m ssr

# prod stage
FROM build-stage as prod-stage
WORKDIR /app/source/dist/ssr
RUN mv * ../../../
WORKDIR /app
RUN rm -r -f source
RUN yarn
CMD ["node", "index.js"]

Basicamente, estamos copiando o source, apagando node_moduless, dist, locks, e baixamos novamente, então é feito o build, copiamos os arquivos do build para a raiz, por fim apagamos o source

Agora, execute o seguinte comando.:

docker-compose -f docker-compose.yml -f docker-compose.production.yml build
docker image ls -a

Vai levar alguns longos segundos, para que o build do app e da api seja realizado, então devemos anotar o ID das imagens, no meu caso 516a0d428a28para a api e eb3ec1b5548e para o app.

Então, execute o seguinte comando para o app e para a api, para que consigamos criar as suas respectivas tags.

docker tag {image} {registry_name}/{container_name}:{tag_name}

no meu caso:

docker tag 516a0d428a28 qpanc.azurecr.io/api:latest
docker tag eb3ec1b5548e qpanc.azurecr.io/app:latest
docker image ls -a

Agora que criamos as nossas imagens e as suas respectivas tags, precisamos subir relas para o container, para que isto seja possível, teremos de logar no docker usando uma conta com permissão:

docker login -u ${username} -p ${password} ${login_server}

no meu caso

docker login -u qpanc -p ************************ qpanc.azurecr.io

agora que efetuamos o login, podemos fazer o push das imagens, então execute o seguinte comando, tanto para o app como para a api.

docker push {registry_name}/{container_name}:{tag_name}

no meu caso

docker push qpanc.azurecr.io/api:latest
docker push qpanc.azurecr.io/app:latest

Feito isto, as imagens já estão disponíveis, já podemos ser acessadas a partir da VM

Caso tenha feito o upload para um Registro criado no portal do Azure, eles vão ser listados da seguinte forma:

Note que latest é o valor default para as tags, porém é interessante, que a cada publicação seja criado uma nova tag, como por exemplo 1.0.0, 1.0.1 ou 1.1.0, e a latest deverá ser apenas um alias para a mais recente.

Por fim, deixo um script que fazer a limpeza dos containers/imagens, faz o build, cria as tags e realiza o upload. Porém que fique claro, que esta solução é um tanto quanto drástica.

docker container stop $(docker container ls -aq)
docker container rm $(docker container ls -aq)
docker image rm $(docker image ls -aq) -f
docker-compose -f docker-compose.yml -f docker-compose.production.yml build --no-cache --force-rm --compress
docker tag $(docker image ls -f=reference="qpancapi" -q) qpanc.azurecr.io/api:latest
docker tag $(docker image ls -f=reference="qpancapp" -q) qpanc.azurecr.io/app:latest
docker push qpanc.azurecr.io/api:latest
docker push qpanc.azurecr.io/app:latest