🧭 frontend-service

Front-End do projeto DevOpsPlayground. Interface web moderna, construída em React, responsável pela autenticação de usuários e consumo das APIs do Gateway Service.

O que faz

• 🔐 Login e registro de usuários
• 🌐 Consome APIs via Gateway Service
• 🏠 Consulta de CEPs e APIs públicas
• 💻 Interface web responsiva e de fácil uso

🛠️ Como rodar (local)

1. Preparar variáveis de ambiente:

• Copie o arquivo de exemplo:

cp .env.example .env

• Edite o arquivo .env e configure a URL do Gateway Service (por exemplo, http://localhost:3000/api):

REACT_APP_API_URL=http://localhost:3000/api

2. Construir e rodar via Docker:

• Certifique-se de ter Docker instalado, depois execute:

docker build -t frontend-service .
docker run -p 3000:80 frontend-service

• Este comando irá:
• • Construir a imagem Docker do frontend
• • Rodar o container expondo o Nginx na porta 80 do container
• • Mapear para a porta 3000 da sua máquina local

Acesse em: 👉 (http://localhost:3000)[http://localhost:3000]

3. Modo desenvolvimento (Hot Reload):

• Durante o desenvolvimento, você pode usar o servidor interno do React:

npm install
npm start

Esse modo:

• Roda localmente em (http://localhost:3000)[http://localhost:3000]
• Recarrega automaticamente a cada alteração de código
• Usa a configuração do .env para conectar-se ao Gateway

🧾 Estrutura de pastas

frontend-service/
├── public/               # HTML base (index.html)
├── src/
│   ├── pages/            # Telas principais (Login, Register)
│   ├── services/         # Comunicação com o Gateway Service (api.js)
│   ├── App.js            # Definição de rotas
│   ├── index.js          # Ponto de entrada React
│   └── index.css         # Estilos globais
├── Dockerfile            # Build da imagem de produção (Nginx)
├── .env.                 # Variáveis de ambiente
└── package.json          # Dependências e scripts npm 

🐳 Dockerfile — visão geral

O projeto é construído com Node e servido via Nginx:

# Build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

✅ Resultado: Imagem leve (~60 MB) e otimizada para produção. A porta 80 é exposta no container e mapeada para 3000 na máquina local.

🧩 Stack utilizada

• React 18+
• Axios
• Nginx (produção)
• Docker