#07 – Criando um contanier para o NGINX servir minha SPA em React | Thi Code

O que é containerização com Docker

Containerização é uma técnica fundamental no desenvolvimento moderno que permite empacotar uma aplicação junto com todas as suas dependências, configurações e ambiente de execução em uma unidade isolada chamada container. No contexto de uma Single Page Application (SPA) em React, utilizar Docker com NGINX oferece múltiplas vantagens: portabilidade garantida entre diferentes ambientes, consistência entre desenvolvimento e produção, facilidade de deployment e escalabilidade horizontal.

O Docker funciona criando imagens que servem como templates para os containers. Uma imagem contém o sistema operacional base, as dependências necessárias e a aplicação pronta para rodar. O NGINX, por sua vez, é um servidor web extremamente leve e performático, ideal para servir aplicações estáticas como SPAs em React, oferecendo melhor performance e consumo de recursos em comparação com outras alternativas.

Estrutura de um Dockerfile para React

Para criar um container que sirva uma aplicação React com NGINX, é necessário construir um Dockerfile com duas etapas principais. Na primeira etapa, chamada de build stage, instala-se o Node.js, definem-se as dependências do projeto e realiza-se a compilação da aplicação React. Esta fase gera os arquivos estáticos otimizados (HTML, CSS e JavaScript bundled) que serão servidos pelo NGINX.

A segunda etapa, conhecida como production stage, utiliza uma imagem base do NGINX muito mais enxuta do que a imagem Node.js completa. Nesta etapa, apenas os arquivos estáticos gerados na primeira etapa são copiados para o diretório de servição do NGINX, resultando em uma imagem final significativamente menor. Esta abordagem multi-stage reduz drasticamente o tamanho final da imagem Docker, economizando espaço em repositórios e acelerando o tempo de download e inicialização dos containers.

Configuração do NGINX

O NGINX precisa de um arquivo de configuração adequado para servir corretamente uma aplicação React SPA. A configuração deve apontar para o diretório onde estão os arquivos estáticos compilados e, crucialmente, redirecionar todas as requisições para o arquivo index.html, permitindo que o React Router funcione corretamente no lado do cliente. Sem essa configuração, navegações dentro da SPA resultariam em erros 404.

Além disso, é importante configurar headers HTTP apropriados, como Cache-Control, para arquivos estáticos, garantindo que os browsers façam caching inteligente e evitando que atualizações sejam carregadas desnecessariamente. A configuração também pode incluir otimizações de compressão gzip para reduzir o tamanho dos arquivos transferidos ao cliente.

Processo de build e execução

Após estruturar o Dockerfile e a configuração do NGINX, o processo de build envolve executar comandos Docker que constroem a imagem a partir do Dockerfile. O Docker executa cada instrução definida no Dockerfile sequêncialmente, criando camadas que formam a imagem final. Para executar a aplicação, basta criar um container a partir dessa imagem, mapeando a porta do NGINX (geralmente porta 80 ou 443) para uma porta disponível na máquina host.

O mapeamento de portas permite que requisições externas cheguem ao container. Durante o desenvolvimento, é comum usar a porta 3000 ou 8080 da máquina local mapeada para a porta 80 do container. Em produção, tipicamente configura-se a porta 80 (HTTP) e 443 (HTTPS) do host para acessar o NGINX diretamente.

Benefícios para desenvolvimento e produção

Utilizar Docker com NGINX para servir React SPAs oferece benefícios significativos em todo o ciclo de desenvolvimento. Desenvolvedores podem garantir que o ambiente de execução é idêntico entre suas máquinas locais, ambiente de staging e produção, eliminando o problema clássico "funciona na minha máquina". Além disso, novos desenvolvedores conseguem colocar o projeto rodando com um único comando, acelerando o onboarding.

Em produção, essa abordagem permite orquestração com ferramentas como Docker Compose ou Kubernetes, facilitando scaling automático, load balancing e recuperação de falhas. O uso de containers torna o deployment previsível e repetível, reduzindo riscos de erro humano em processos de release.

Integração com repositórios e Docker Hub

Após criar a imagem Docker localmente, é comum fazer push para um repositório centralizado como Docker Hub, tornando a imagem acessível de qualquer lugar. Este repositório funciona como registro de imagens, permitindo que diferentes ambientes e servidores baixem e executem a mesma versão da aplicação. Organizações podem manter repositórios privados para controlar acesso às suas imagens.

O workflow típico envolve versionar a imagem com tags (latest, v1.0, v1.1, etc.), facilitando rollbacks e múltiplas versões rodando simultaneamente. Integração com sistemas de CI/CD automatizan este processo, construindo e fazendo push de novas imagens a cada commit ou release.

Recursos do projeto ThiCodeWallet

O projeto de exemplo utiliza repositório público no GitHub, permitindo que qualquer pessoa clone o projeto e construa a imagem Docker localmente. O projeto demonstra as práticas recomendadas de containerização aplicadas a uma aplicação React real, servindo como referência para implementar Docker em outros projetos similares. Comunidade e suporte estão disponíveis através do Discord e canal do YouTube.