fix(ci): update for isolate network

Author: huasa23

code/docker-compose.yml

@@ -16,6 +16,8 @@ services:
       interval: 10s
       timeout: 5s
       retries: 5
+    networks:
+      - backend-network
 
   backend:
     build:
@@ -25,28 +27,42 @@ services:
     depends_on:
       db:
         condition: service_healthy
-    # environment:
-    #   SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/getactive
-    #   SPRING_DATASOURCE_USERNAME: root
-    #   SPRING_DATASOURCE_PASSWORD: password
-    ports:
-      - "3232:3232"
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:3232/v1/health"]
       interval: 10s
       timeout: 5s
       retries: 5
+    networks:
+      - backend-network
+      - frontend-network
 
   frontend:
     build:
       context: ./frontend
       dockerfile: Dockerfile
-    container_name: getactive-frontend
+    image: getactive-frontend:latest
+    restart: "no"
     depends_on:
-      backend:
-        condition: service_healthy
+      - backend
+
+  nginx:
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    container_name: getactive-nginx
+    depends_on:
+      - frontend
+      - backend
     ports:
       - "80:80"
+    networks:
+      - frontend-network
+
+networks:
+  frontend-network:
+    driver: bridge
+  backend-network:
+    driver: bridge
 
 volumes:
   mysql_data: 

code/frontend/Dockerfile

@@ -1,21 +1,25 @@
-FROM node:18-alpine as build
+FROM node:18-alpine as builder
 
 WORKDIR /app
 
+# Copy package files
 COPY package*.json ./
-
 RUN npm ci
 
+# Copy source code
 COPY . .
 
+# Build the application
 RUN npm run build
 
-FROM nginx:alpine
-
-COPY --from=build /app/dist /usr/share/nginx/html
+# Output stage - this stage is just for copying the build output
+FROM alpine:latest
 
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Create a directory for the build output
+WORKDIR /build-output
 
-EXPOSE 80
+# Copy only the built files from the builder stage
+COPY --from=builder /app/dist ./dist
 
-CMD ["nginx", "-g", "daemon off;"]
+# This image doesn't need to run anything
+# It's just a way to pass the build output to other images

code/frontend/src/services/api.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { jwtUtils } from '../utils/jwt';
 
 const api = axios.create({
-  baseURL: 'http://localhost:3232',
+  baseURL: '/v1',
   timeout: 5000,
 });
 

code/nginx/Dockerfile

@@ -0,0 +1,22 @@
+# Use the frontend build output
+FROM getactive-frontend:latest as frontend
+
+# Nginx stage
+FROM nginx:alpine
+
+# Install curl for healthcheck
+RUN apk add --no-cache curl
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built frontend files from the frontend image
+COPY --from=frontend /build-output/dist /usr/share/nginx/html
+
+# Health check
+HEALTHCHECK --interval=10s --timeout=5s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost/ || exit 1
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"] 

code/frontend/nginx.conf renamed to code/nginx/nginx.conf

@@ -12,7 +12,11 @@ server {
     }
 
     location /v1/ {
-        proxy_pass http://localhost:3232/v1/;
+        allow 172.16.0.0/12;  # Docker internal network
+        allow 192.168.0.0/16; # Docker internal network
+        deny all;             # Deny all other access
+
+        proxy_pass http://backend:3232/v1/;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';