no message

README (3).md

+
+# 🐳 Multi-Container Deployment dengan Docker Compose + NGINX Reverse Proxy
+
+Projek ini menunjukkan bagaimana untuk deploy aplikasi multi-container menggunakan:
+
+- React frontend (product-ui)
+- Spring Boot (atau Node.js) backend (product-svc)
+- MySQL database
+- NGINX sebagai reverse proxy
+
+---
+
+## 📁 Struktur Projek
+
+```
+.
+├── docker-compose.yml
+├── nginx.conf
+├── productApp/       # React frontend app
+└── productSvc/       # Backend API (Spring Boot / Node.js)
+```
+
+---
+
+## ⚙️ 1. Kandungan `docker-compose.yml`
+
+```yaml
+version: '3.8'
+
+services:
+  product-svc:
+    container_name: productservice
+    build: ./productSvc
+    ports:
+      - "8020:8020"
+    environment:
+      APP_INTERNAL_PORT: 8020
+      DB_ADDRESS: mysql
+      DB_PORT: 3306
+      DB_NAME: productmngm
+      DB_USERNAME: root
+      DB_PASSWORD: S3cret
+    depends_on:
+      - mysql
+    networks:
+      - my-network
+
+  mysql:
+    container_name: mysql
+    image: mysql:latest
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: S3cret
+      MYSQL_DATABASE: productmngm
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql-data:/var/lib/mysql
+    networks:
+      - my-network
+
+  nginx:
+    container_name: nginx
+    image: nginx:latest
+    ports:
+      - "80:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    depends_on:
+      - product-svc
+    networks:
+      - my-network
+
+  product-ui:
+    container_name: product-ui
+    build: ./productApp
+    ports:
+      - "8030:80"
+    networks:
+      - my-network
+
+volumes:
+  mysql-data:
+
+networks:
+  my-network:
+    driver: bridge
+```
+
+---
+
+## 🌐 2. NGINX sebagai Reverse Proxy
+
+### 🔄 Apa Itu Reverse Proxy?
+
+**Reverse proxy** ialah _“orang tengah”_ antara client (browser) dan backend server.
+
+#### Analogi Mudah:
+
+> Anda datang ke pejabat kerajaan → jumpa kaunter depan dulu → kaunter tu salurkan ke jabatan betul.  
+> Reverse proxy = kaunter depan.
+
+### ✅ Fungsi Reverse Proxy:
+
+- Terima permintaan dari browser (client)
+- Salurkan ke backend service (React app, API)
+- Hantar semula respons ke client
+
+### 📝 Kandungan `nginx.conf`
+
+```nginx
+events {}
+
+http {
+    server {
+        listen 80;
+
+        location /product-service/ {
+            proxy_pass http://productservice:8020/product-service/;
+        }
+
+        location /product-ui/ {
+            proxy_pass http://product-ui:80/;
+        }
+    }
+}
+```
+
+---
+
+## 🚀 3. Build & Jalankan Servis
+
+Run di terminal root projek:
+
+```bash
+docker-compose up -d --build
+```
+
+- `--build`: build semula semua servis (jika ada perubahan)
+- `-d`: jalankan dalam background
+
+---
+
+## ✅ 4. Semak Container Aktif
+
+```bash
+docker ps
+```
+
+Pastikan container berikut sedang berjalan:
+
+- `productservice`
+- `mysql`
+- `product-ui`
+- `nginx`
+
+---
+
+## 🌍 5. Akses dari Browser
+
+- **Frontend (React App):**  
+  [http://localhost/product-ui](http://localhost/product-ui)
+
+- **API (Swagger UI atau endpoint API):**  
+  [http://localhost/product-service/swagger-ui/index.html](http://localhost/product-service/swagger-ui/index.html)
+
+---
+
+## 📌 Nota Tambahan
+
+- Pastikan React app sudah dibuild (`npm run build`) sebelum digunakan dalam `Dockerfile`.
+- Fail `nginx.conf` mestilah berada pada root projek (atau sesuaikan path dalam volume).
+- Pastikan semua port tidak digunakan oleh proses lain.

docker-compose.yml

@@ -13,6 +13,7 @@ services:
       DB_NAME: productmngm
       DB_USERNAME: root
       DB_PASSWORD: S3cret
+    restart: unless-stopped  
     depends_on:
       - mysql
     networks:

nginx.conf

@@ -12,15 +12,9 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
-        location /product-ui/ {
-         proxy_pass http://product-ui:80/;
-         proxy_http_version 1.1;
-         proxy_set_header Host $host;
-         proxy_set_header X-Real-IP $remote_addr;
-         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-         proxy_set_header X-Forwarded-Proto $scheme;
-
-         }
+    location / {
+        proxy_pass http://product-ui:80/;
+    }
 
     }
 }

productApp/nginx.conf

@@ -6,6 +6,5 @@ server {
         index index.html;
         try_files $uri $uri/ /index.html;
     }
-
     
 }
\ No newline at end of file

productApp/src/App.js

@@ -7,7 +7,7 @@ import ProductList from './components/Product/ProductList';
 
 function App() {
   return (
-    <Router basename="/product-ui">
+    <Router>
       <div className="App">
         <div className="topbar">
           <h1>Product Management System</h1>