97 lines
1.7 KiB
Markdown
97 lines
1.7 KiB
Markdown
# Deploy com Docker - Avanzato
|
|
|
|
## O Problema
|
|
|
|
O Nginx no Docker nao vem configurado para SPA React. Ao acessar `/avaliacao` diretamente, da 404.
|
|
|
|
## A Solucao
|
|
|
|
### Opcao 1: Configurar Nginx dentro do container (RECOMENDADO)
|
|
|
|
**1. Criar um novo Dockerfile:**
|
|
|
|
```dockerfile
|
|
FROM nginx:alpine
|
|
|
|
# Copiar o site
|
|
COPY dist/ /usr/share/nginx/html/
|
|
|
|
# Copiar a configuracao customizada
|
|
COPY nginx-docker.conf /etc/nginx/conf.d/default.conf
|
|
|
|
# Expor porta 80
|
|
EXPOSE 80
|
|
|
|
# Iniciar Nginx
|
|
CMD ["nginx", "-g", "daemon off;"]
|
|
```
|
|
|
|
**2. Build e run:**
|
|
|
|
```bash
|
|
# Build
|
|
npm run build
|
|
bash scripts/build-static-routes.sh dist
|
|
docker build -t avanzato-site .
|
|
|
|
# Run
|
|
docker run -d -p 80:80 --name avanzato avanzato-site
|
|
```
|
|
|
|
### Opcao 2: Usar docker-compose
|
|
|
|
**docker-compose.yml:**
|
|
|
|
```yaml
|
|
version: '3.8'
|
|
services:
|
|
avanzato:
|
|
image: nginx:alpine
|
|
ports:
|
|
- "80:80"
|
|
volumes:
|
|
- ./dist:/usr/share/nginx/html:ro
|
|
- ./nginx-docker.conf:/etc/nginx/conf.d/default.conf:ro
|
|
container_name: avanzato-site
|
|
```
|
|
|
|
**Comandos:**
|
|
|
|
```bash
|
|
npm run build
|
|
bash scripts/build-static-routes.sh dist
|
|
docker-compose up -d
|
|
```
|
|
|
|
### Opcao 3: Container ja rodando (hotfix)
|
|
|
|
Se o container ja esta rodando:
|
|
|
|
```bash
|
|
# Copiar config para dentro do container
|
|
docker cp nginx-docker.conf avanzato-site:/etc/nginx/conf.d/default.conf
|
|
|
|
# Recarregar Nginx
|
|
docker exec avanzato-site nginx -s reload
|
|
```
|
|
|
|
## Verificar se funcionou
|
|
|
|
```bash
|
|
# Testar
|
|
curl -I http://localhost/avaliacao
|
|
# Deve retornar HTTP 200, nao 404
|
|
```
|
|
|
|
## A regra magica
|
|
|
|
A unica coisa que importa e esta linha no Nginx:
|
|
|
|
```nginx
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
```
|
|
|
|
Isso diz ao Nginx: "se nao encontrar o arquivo, manda para index.html" — onde o React pega a rota.
|