
# 🐳 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.
