no message

parent 6e36f81e
# 🐳 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.
......@@ -13,6 +13,7 @@ services:
DB_NAME: productmngm
DB_USERNAME: root
DB_PASSWORD: S3cret
restart: unless-stopped
depends_on:
- mysql
networks:
......
......@@ -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/;
}
}
}
......@@ -6,6 +6,5 @@ server {
index index.html;
try_files $uri $uri/ /index.html;
}
}
\ No newline at end of file
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment