ANÚNCIO

~/questoes/devops

Qual arquivo deve ser configurado para que o NGINX sirva corretamente uma SPA React?

Responda, confira o feedback e use o resultado para orientar sua revisão.
Aula de referência #07 – Criando um contanier para o NGINX servir minha SPA em React | Thi Code
Para fixar

Configuração do NGINX para servir SPA React em Container

Conceito central

Para que uma aplicação React funcione corretamente dentro de um container Docker com NGINX, é necessário configurar um arquivo nginx.conf que redirecione todas as requisições para o index.html, permitindo que o React Router funcione no lado do cliente. Sem essa configuração, navegações dentro da aplicação resultam em erros 404.

Por que essa resposta faz sentido

O arquivo nginx.conf é essencial porque contém todas as instruções para o servidor web saber como servir os arquivos estáticos da SPA e, principalmente, redirecionar requisições para o index.html para que o roteamento cliente funcione corretamente. Ele também configura headers de cache e otimizações como compressão gzip.

Armadilhas comuns

  • Confundir o arquivo de configuração do NGINX (nginx.conf) com arquivos Docker (Dockerfile, docker-compose.yml) que preparam a imagem.
  • Esquecer de configurar o redirecionamento para index.html, causando erros 404 ao navegar dentro da SPA.
  • Achar que o package.json configura algo no servidor web, quando na verdade apenas lista dependências do Node.js para a fase de build.

Entenda as alternativas

A

O package.json define dependências do Node.js, necessário apenas durante a fase de build no Docker. Ele não influencia como o NGINX serve a aplicação já compilada.

B

O docker-compose.yml é usado para orquestrar múltiplos containers e definir variáveis de ambiente, mas não configura como o servidor web funciona internamente.

C

O Dockerfile contém instruções para construir a imagem (instalar dependências, compilar código), mas não configura o comportamento do NGINX em tempo de execução.

D

O nginx.conf é o arquivo de configuração do servidor web que define como servir os arquivos estáticos, redirecionar requisições para index.html e otimizar a performance com cache e compressão.

Dica prática: Dentro do nginx.conf, procure por uma regra que faz try_files com fallback para index.html. Exemplo: `try_files $uri $uri/ /index.html;` isso garante que o React Router receba todas as requisições e gerencie a navegação corretamente.

Revise pensando: Se você removesse o redirecionamento para index.html do nginx.conf, o que aconteceria ao clicar em um link dentro da sua aplicação React?