diff --git a/.dockerignore b/.dockerignore index cd967fc..d9457f9 100644 --- a/.dockerignore +++ b/.dockerignore @@ -15,7 +15,6 @@ **/bin **/charts **/docker-compose* -**/Dockerfile* **/node_modules **/npm-debug.log **/obj diff --git a/DOCKER_README.md b/DOCKER_README.md index b51021d..ed1075f 100644 --- a/DOCKER_README.md +++ b/DOCKER_README.md @@ -13,8 +13,8 @@ This project uses Docker Compose to run both the frontend and API in containers │ ▼ ┌─────────────────────────────────────────┐ -│ Nginx Container │ -│ - Serves static frontend files │ +│ Frontend Container (Nginx) │ +│ - Serves built React/Vite app │ │ - Proxies /api/* to backend │ │ - Proxies /swagger to backend │ └────────────────┬────────────────────────┘ @@ -45,7 +45,7 @@ docker compose up -d ### 2. Access the Application - **Frontend**: http://localhost:9755 -- **API** (via proxy): http://localhost:9755/api/* +- **API** (via proxy): http://localhost:9755/api/\* - **Swagger UI**: http://localhost:9755/swagger ### 3. View Logs @@ -67,10 +67,10 @@ docker compose down ## Making Changes -### Frontend Changes (HTML/CSS/JS) +### Frontend Changes (React/TypeScript) -1. Edit files in the `Frontend/` directory -2. Rebuild the nginx container: +1. Edit files in the `frontend-react/src/` directory +2. Rebuild the frontend container: ```bash docker compose build nginx && docker compose up -d ``` @@ -147,6 +147,7 @@ docker compose build submission.api The API connects to MongoDB on your host machine using `host.docker.internal:27017`. To change the MongoDB connection: + 1. Edit `compose.yaml` 2. Update the `MongoDbSettings__ConnectionString` environment variable 3. Restart containers @@ -159,20 +160,22 @@ environment: ### Port Configuration The application is exposed on port 9755. To change this: + 1. Edit `compose.yaml` 2. Update the nginx ports mapping: ```yaml ports: - - "9755:80" # Change 9755 to your desired port + - "9755:80" # Change 9755 to your desired port ``` 3. Restart containers ### API Base URL (Frontend) The frontend API configuration is in `Frontend/index.html` at line 105: + ```javascript const API_CONFIG = { - baseUrl: '' // Empty for same-origin requests + baseUrl: "", // Empty for same-origin requests }; ``` @@ -184,12 +187,13 @@ This is set to empty because Nginx proxies all `/api/*` requests to the backend. . ├── compose.yaml # Docker Compose configuration ├── nginx/ -│ ├── Dockerfile # Nginx container definition │ └── nginx.conf # Nginx configuration -├── Frontend/ # Static frontend files -│ ├── index.html -│ ├── style.css -│ └── fonts/ +├── frontend-react/ # React/Vite frontend +│ ├── Dockerfile # Multi-stage build (Node + Nginx) +│ ├── src/ # React source files +│ ├── public/ # Static assets +│ └── dist/ # Built output (generated) +├── Frontend/ # Legacy static frontend (deprecated) └── Submission.Api/ ├── Dockerfile # API container definition └── ... # .NET source files @@ -202,6 +206,7 @@ This is set to empty because Nginx proxies all `/api/*` requests to the backend. **Problem**: API can't connect to MongoDB on host **Solution**: + 1. Verify MongoDB is running on host: `mongosh --eval "db.version()"` 2. Check MongoDB is listening on `0.0.0.0:27017` not just `127.0.0.1` 3. Check Windows Firewall isn't blocking the connection @@ -212,6 +217,7 @@ This is set to empty because Nginx proxies all `/api/*` requests to the backend. **Problem**: Error binding to port 9755 **Solution**: + 1. Find what's using the port: `netstat -ano | findstr :9755` 2. Either stop that process or change the port in `compose.yaml` @@ -220,6 +226,7 @@ This is set to empty because Nginx proxies all `/api/*` requests to the backend. **Problem**: Container crashes on startup **Solution**: + ```bash # Check logs for errors docker compose logs submission.api @@ -237,6 +244,7 @@ docker compose up -d **Problem**: Code changes don't appear after rebuild **Solution**: + ```bash # Force rebuild and restart docker compose down @@ -249,6 +257,7 @@ docker compose up -d **Problem**: Nginx can't reach the API **Solution**: + 1. Check API container is running: `docker compose ps` 2. Check API logs: `docker compose logs submission.api` 3. Verify API is listening on port 8080 @@ -292,6 +301,7 @@ services: ## Support For issues or questions: + 1. Check container logs: `docker compose logs -f` 2. Verify all services are running: `docker compose ps` 3. Review this documentation diff --git a/compose.yaml b/compose.yaml index 038e4aa..c50f7d9 100644 --- a/compose.yaml +++ b/compose.yaml @@ -27,10 +27,10 @@ - PetitionSettings__AllowPetitionCreation=true nginx: - image: petition-nginx + image: petition-frontend build: context: . - dockerfile: nginx/Dockerfile + dockerfile: frontend-react/Dockerfile ports: - "9755:80" depends_on: diff --git a/frontend-react/Dockerfile b/frontend-react/Dockerfile new file mode 100644 index 0000000..ecc9023 --- /dev/null +++ b/frontend-react/Dockerfile @@ -0,0 +1,30 @@ +# Build stage - compile the React/Vite app +FROM node:20-alpine AS builder + +WORKDIR /app + +# Copy package files first for better caching +COPY frontend-react/package*.json ./ + +# Install dependencies +RUN npm ci + +# Copy source files +COPY frontend-react/ ./ + +# Build the production bundle +RUN npm run build + +# Production stage - serve with Nginx +FROM nginx:alpine + +# Copy custom nginx configuration +COPY nginx/nginx.conf /etc/nginx/nginx.conf + +# Copy built React app from builder stage +COPY --from=builder /app/dist /usr/share/nginx/html/ + +# Expose port 80 +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"]