Parece que você está usando um bloqueador de anúncios. Fazemos um conteúdo de qualidade e de graça e contamos com a publicidade para ajudar a manter nosso site. Por favor nos ajude 😢

Docker e NGINX: Como Criar e Deployar Aplicações Web Modernas do Zero


Introdução

Desenvolver aplicações web modernas exige ferramentas que simplifiquem a criação, o teste e o deploy de sistemas escaláveis. Docker e NGINX são duas tecnologias que revolucionaram o desenvolvimento e a hospedagem de aplicações, permitindo que desenvolvedores criem ambientes consistentes e gerenciem tráfego de forma eficiente. Mas como essas ferramentas funcionam na prática? E como integrá-las para construir e deployar uma aplicação completa?

Anúncio

Neste artigo, inspirado em tutoriais do canal Thi Code no YouTube, vamos explorar desde o básico do Docker e NGINX até a criação de containers para APIs Node.js, SPAs React, bancos MongoDB, e o deploy na AWS. Você aprenderá a usar Docker Compose para orquestrar containers e a configurar um proxy reverso com NGINX. Vamos mergulhar nesse guia completo?


O que é Docker e Para que Serve?

Docker é uma plataforma de contêineres que permite empacotar aplicações e suas dependências em unidades isoladas chamadas containers. Esses containers garantem que a aplicação funcione de forma consistente em qualquer ambiente, seja no seu laptop, em um servidor Linux ou na nuvem.

Por que usar Docker?

  • Consistência: Elimina o problema “funciona na minha máquina”.
  • Portabilidade: Containers podem ser executados em qualquer sistema com Docker instalado.
  • Escalabilidade: Facilita a execução de múltiplos containers para lidar com alta demanda.
  • Isolamento: Cada container opera independentemente, evitando conflitos de dependências.

Por exemplo, imagine que você desenvolve uma API em Node.js que depende de uma versão específica do Node e de um banco MongoDB. Com Docker, você pode criar um container para cada componente, garantindo que tudo funcione perfeitamente, independentemente do sistema operacional.


Como Instalar o Docker no macOS, Linux e Windows

Antes de criar containers, você precisa instalar o Docker. O processo varia ligeiramente conforme o sistema operacional:

  1. macOS:
  • Baixe o Docker Desktop em docker.com.
  • Instale o aplicativo e siga as instruções para habilitar o Docker.
  • Verifique a instalação com: docker --version.
  1. Linux:
  • No Ubuntu, use:
    bash sudo apt update sudo apt install docker.io sudo systemctl start docker sudo systemctl enable docker
  • Adicione seu usuário ao grupo Docker: sudo usermod -aG docker $USER.
  1. Windows:
  • Instale o Docker Desktop com suporte ao WSL2 (Windows Subsystem for Linux 2) para melhor performance.
  • Ative a virtualização no BIOS, se necessário.
  • Execute docker run hello-world para testar.

Dica: Consulte o vídeo Como instalar o Docker no MacOS, Linux e Windows do Thi Code para um guia visual detalhado.


Criando uma Imagem e um Container Docker para uma API em Node.js

Agora que o Docker está instalado, vamos criar uma imagem e um container para uma API Node.js. Suponha que você tenha uma API simples:

const express = require('express');
const app = express();

app.get('/', (req, res) => res.json({ message: 'API Node.js com Docker' }));

app.listen(3000, () => console.log('API rodando na porta 3000'));

Passos para criar a imagem e o container:

  1. Crie um Dockerfile:
   FROM node:18
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   EXPOSE 3000
   CMD ["node", "server.js"]
  1. Construa a imagem:
   docker build -t minha-api-node .
  1. Execute o container:
   docker run -p 3000:3000 minha-api-node

Acesse http://localhost:3000 para testar a API. O vídeo Criando uma imagem e um container Docker para uma API em NodeJS do Thi Code explica cada linha do Dockerfile.


Como Criar um Container de MongoDB e Conectá-lo a uma API

Para que a API Node.js armazene dados, vamos criar um container MongoDB e conectá-lo usando uma network Docker.

Passos:

  1. Crie uma network Docker:
   docker network create minha-rede
  1. Execute o container MongoDB:
   docker run -d --name mongodb --network minha-rede -e MONGO_INITDB_ROOT_USERNAME=admin -e MONGO_INITDB_ROOT_PASSWORD=secret mongo
  1. Atualize a API para conectar ao MongoDB:
   const express = require('express');
   const mongoose = require('mongoose');
   const app = express();

   mongoose.connect('mongodb://admin:secret@mongodb:27017/mydb?authSource=admin', { useNewUrlParser: true, useUnifiedTopology: true })
     .then(() => console.log('Conectado ao MongoDB'))
     .catch(err => console.error('Erro ao conectar:', err));

   app.get('/', (req, res) => res.json({ message: 'API conectada ao MongoDB' }));

   app.listen(3000, () => console.log('API rodando na porta 3000'));
  1. Execute a API na mesma rede:
   docker run -d --name api-node --network minha-rede -p 3000:3000 minha-api-node

O vídeo Como criar um Container de MongoDB e conectá-lo a uma API do Thi Code detalha como configurar a conexão corretamente.


Criando uma Imagem Docker para uma SPA em React

Agora, vamos criar uma imagem Docker para uma Single Page Application (SPA) em React. Suponha que você tenha um projeto React criado com create-react-app.

Passos:

  1. Crie um Dockerfile:
   FROM node:18 AS build
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build

   FROM nginx:alpine
   COPY --from=build /app/build /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
  1. Construa e execute:
   docker build -t minha-spa-react .
   docker run -p 80:80 minha-spa-react

Acesse http://localhost para ver a SPA. O vídeo Como criar uma imagem Docker de uma SPA em React do Thi Code mostra como otimizar o build.


O que é NGINX e Para que Serve?

NGINX é um servidor web e proxy reverso de alto desempenho, amplamente usado para servir aplicações web, balancear carga e gerenciar tráfego. Ele é leve, rápido e suporta milhares de conexões simultâneas.

Usos do NGINX:

  • Servidor web: Hospeda arquivos estáticos, como SPAs.
  • Proxy reverso: Direciona requisições para diferentes serviços (ex.: API, frontend).
  • Balanceamento de carga: Distribui tráfego entre múltiplos servidores.
  • Cache: Armazena respostas para melhorar performance.

Criando um Container NGINX para Servir uma SPA React

Para servir a SPA React com NGINX, usamos o container criado anteriormente. Caso precise de configurações específicas, modifique o arquivo de configuração do NGINX:

server {
listen 80;
server_name localhost;

location / {
    root /usr/share/nginx/html;
    try_files $uri /index.html;
}

}

Atualize o Dockerfile para incluir essa configuração:

FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Consulte o vídeo Criando um container para o NGINX servir minha SPA em React do Thi Code para mais detalhes.


O que é Docker Compose e Como Utilizá-lo?

Docker Compose é uma ferramenta para orquestrar múltiplos containers, definindo suas configurações em um arquivo YAML. Ele simplifica a execução de aplicações com vários serviços, como uma API, um banco de dados e um frontend.

Exemplo de Docker Compose:

version: '3.8'
services:
  api:
    build: ./api
    ports:
      - "3000:3000"
    networks:
      - minha-rede
  mongodb:
    image: mongo
    environment:
      - MONGO_INITDB_ROOT_USERNAME=admin
      - MONGO_INITDB_ROOT_PASSWORD=secret
    networks:
      - minha-rede
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    networks:
      - minha-rede
networks:
  minha-rede:
    driver: bridge

Execute com:

docker-compose up -d

O vídeo O que é o Docker Compose e como utilizá-lo? do Thi Code explica como estruturar o arquivo YAML.


Como Fazer Deploy de uma Aplicação Docker na AWS

Para deployar a aplicação na AWS, você pode usar o Amazon ECS (Elastic Container Service) ou EKS (Elastic Kubernetes Service). Aqui está um fluxo básico para ECS:

  1. Crie uma conta AWS e configure o AWS CLI.
  2. Publique as imagens no Amazon ECR (Elastic Container Registry):
   aws ecr create-repository --repository-name minha-api-node
   docker tag minha-api-node:latest <seu-id>.amazonaws.com/minha-api-node:latest
   docker push <seu-id>.amazonaws.com/minha-api-node:latest
  1. Configure o ECS:
  • Crie um cluster ECS.
  • Defina uma tarefa com as imagens do ECR.
  • Configure um serviço para gerenciar os containers.
  1. Teste o deploy acessando o endpoint fornecido pela AWS.

O vídeo Como fazer um deploy na AWS de uma aplicação no Docker? do Thi Code detalha cada etapa.


Como Aplicar Proxy Reverso no NGINX

Um proxy reverso com NGINX permite redirecionar requisições para diferentes serviços. Por exemplo, requisições para /api vão para a API Node.js, enquanto / serve a SPA React.

Configuração do NGINX:

server {
listen 80;
server_name localhost;

location / {
    proxy_pass http://frontend:80;
    proxy_set_header Host $host;
}

location /api {
    proxy_pass http://api:3000;
    proxy_set_header Host $host;
}

}

Atualize o docker-compose.yml para incluir o NGINX como proxy:

version: '3.8'
services:
  api:
    build: ./api
    networks:
      - minha-rede
  mongodb:
    image: mongo
    environment:
      - MONGO_INITDB_ROOT_USERNAME=admin
      - MONGO_INITDB_ROOT_PASSWORD=secret
    networks:
      - minha-rede
  frontend:
    build: ./frontend
    networks:
      - minha-rede
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - api
      - frontend
    networks:
      - minha-rede
networks:
  minha-rede:
    driver: bridge

O vídeo Como aplicar proxy reverso no NGINX do Thi Code mostra como testar essa configuração.


Principais Erros ao Trabalhar com Docker e NGINX

  1. Configurações incorretas no Dockerfile:
  • Sempre especifique versões exatas de imagens (ex.: node:18 em vez de node:latest).
  1. Portas não mapeadas:
  • Certifique-se de mapear as portas corretamente com -p ou no Docker Compose.
  1. Ignorar networks:
  • Use networks Docker para comunicação segura entre containers.
  1. Configurações complexas no NGINX:
  • Teste o arquivo nginx.conf com nginx -t antes de executar o container.
  1. Não otimizar imagens:
  • Use multi-stage builds para reduzir o tamanho das imagens Docker.

Conclusão

Docker e NGINX são ferramentas poderosas para criar, orquestrar e servir aplicações web modernas. Com Docker, você pode empacotar APIs Node.js, SPAs React e bancos MongoDB em containers portáteis. O NGINX adiciona flexibilidade ao servir conteúdo estático e gerenciar tráfego com proxy reverso. Usando Docker Compose, você orquestra múltiplos serviços, e com a AWS, faz deploy de forma escalável.

Quer começar agora? Siga os passos deste artigo e experimente criar sua própria aplicação!


FAQ

O que é Docker e por que usá-lo?

Docker é uma plataforma de contêineres que empacota aplicações e dependências, garantindo consistência e portabilidade entre ambientes.

Como instalar o Docker no Windows?

Baixe o Docker Desktop em docker.com, habilite o WSL2 e execute docker run hello-world para testar.

Posso usar NGINX sem Docker?

Sim, NGINX pode ser instalado diretamente no servidor, mas usá-lo em um container Docker simplifica a configuração e o deploy.

O que é Docker Compose?

Docker Compose é uma ferramenta para orquestrar múltiplos containers, definida em um arquivo YAML, ideal para aplicações com vários serviços.

Como fazer deploy de uma aplicação Docker na AWS?

Use o Amazon ECS ou EKS, publicando imagens no ECR e configurando clusters e serviços no painel da AWS.


Gostou do guia? Compartilhe com alguém que está começando com Docker ou NGINX!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para cima