diff --git a/Frontend-Learner/.dockerignore b/Frontend-Learner/.dockerignore new file mode 100644 index 00000000..7a6ac39d --- /dev/null +++ b/Frontend-Learner/.dockerignore @@ -0,0 +1,11 @@ +node_modules +.nuxt +.output +.env +dist +npm-debug.log +.vscode +.git +.gitignore +Dockerfile +.dockerignore diff --git a/Frontend-Learner/.env.example b/Frontend-Learner/.env.example new file mode 100644 index 00000000..0570dc53 --- /dev/null +++ b/Frontend-Learner/.env.example @@ -0,0 +1,10 @@ +# API Configuration (Nuxt 3 uses NUXT_PUBLIC_ prefix for client-side access) +NUXT_PUBLIC_API_BASE=http://localhost:4000/api + +# S3 / MinIO Configuration (If used in frontend later) +# NUXT_PUBLIC_S3_ENDPOINT=http://192.168.1.100:9000 +# NUXT_PUBLIC_S3_BUCKET=courses + +# App Configuration +PORT=3000 +NODE_ENV=development diff --git a/Frontend-Learner/Dockerfile b/Frontend-Learner/Dockerfile new file mode 100644 index 00000000..05dcfb87 --- /dev/null +++ b/Frontend-Learner/Dockerfile @@ -0,0 +1,38 @@ +# --- Build Stage --- +FROM node:20-alpine AS build-stage + +# กำหนดโฟลเดอร์ทำงานใน Container +WORKDIR /app + +# คัดลอกไฟล์จัดการ dependencies +COPY package*.json ./ + +# ติดตั้ง dependencies (ใช้ npm ci เพื่อความแม่นยำของเวอร์ชัน) +RUN npm ci + +# คัดลอกไฟล์ทั้งหมดในโปรเจกต์ +COPY . . + +# สั่ง Build โปรเจกต์ Nuxt 3 (จะได้โฟลเดอร์ .output) +RUN npm run build + +# --- Production Stage --- +FROM node:20-alpine AS production-stage + +# กำหนดโฟลเดอร์ทำงาน +WORKDIR /app + +# คัดลอกเฉพาะโฟลเดอร์ .output ที่ได้จากการ build (ประหยัดพื้นที่ Container) +COPY --from=build-stage /app/.output ./.output + +# กำหนดตัวแปรสภาพแวดล้อม (Environment Variables) สำหรับ Production +ENV PORT=3000 +ENV NODE_ENV=production + +# แจ้ง Port ที่ Container จะใช้งาน +EXPOSE 3000 + +# คำสั่งสำหรับเริ่มการทำงานของ Nuxt 3 Server +# ใช้ node รันไฟล์ entry point ที่สร้างจากการ build +CMD ["node", ".output/server/index.mjs"] + diff --git a/Frontend-Learner/docker-compose.yml b/Frontend-Learner/docker-compose.yml new file mode 100644 index 00000000..d8dc3d06 --- /dev/null +++ b/Frontend-Learner/docker-compose.yml @@ -0,0 +1,19 @@ +services: + learner-ui: + build: . + container_name: elearning-learner-ui + restart: unless-stopped + ports: + - "3000:3000" + environment: + # URL ของ Backend API (Nuxt 3 จะใช้ NUXT_PUBLIC_ นำหน้า) + - NUXT_PUBLIC_API_BASE=${NUXT_PUBLIC_API_BASE:-http://localhost:4000/api} + # กรณีต้องการระบุ URL อื่นๆ เพิ่มเติม เช่น S3 (ถ้ามีการใช้ในอนาคต) + - NUXT_PUBLIC_S3_ENDPOINT=${NUXT_PUBLIC_S3_ENDPOINT:-http://192.168.1.100:9000} + networks: + - elearning-network + +networks: + elearning-network: + external: true + diff --git a/docs/development_setup.md b/docs/development_setup.md index 1775e78f..27ac412b 100644 --- a/docs/development_setup.md +++ b/docs/development_setup.md @@ -43,27 +43,31 @@ ## 📦 Services on Proxmox Server ### 1. PostgreSQL - Database + - **Port**: 5432 - **Purpose**: Main application database - **Access**: All developers ### 2. MinIO - S3-compatible Storage + - **Port**: 9000 (API), 9001 (Console) - **Purpose**: File storage (videos, documents, images) - **Access**: Backend + Developers - ### 3. Mailhog - Email Testing + - **Port**: 1025 (SMTP), 8025 (Web UI) - **Purpose**: Catch all emails in development - **Access**: All developers ### 4. Adminer - Database Management + - **Port**: 8080 - **Purpose**: Web-based database management - **Access**: All developers ### 5. Forgejo - Git Server + - **Port**: 3030 (HTTP), 2222 (SSH) - **Purpose**: Self-hosted Git repository (like GitHub/GitLab) - **Access**: All developers @@ -77,7 +81,7 @@ Create this file on your Proxmox server: ### `/opt/elearning-dev/docker-compose.yml` ```yaml -version: '3.8' +version: "3.8" services: # PostgreSQL Database @@ -109,8 +113,8 @@ services: container_name: elearning-minio restart: unless-stopped ports: - - "9000:9000" # API - - "9001:9001" # Console + - "9000:9000" # API + - "9001:9001" # Console environment: MINIO_ROOT_USER: minioadmin MINIO_ROOT_PASSWORD: minioadmin123 @@ -148,15 +152,14 @@ services: networks: - elearning-network - # Mailhog - Email Testing mailhog: image: mailhog/mailhog:latest container_name: elearning-mailhog restart: unless-stopped ports: - - "1025:1025" # SMTP - - "8025:8025" # Web UI + - "1025:1025" # SMTP + - "8025:8025" # Web UI networks: - elearning-network @@ -181,8 +184,8 @@ services: container_name: elearning-forgejo restart: unless-stopped ports: - - "3030:3000" # HTTP - - "2222:22" # SSH + - "3030:3000" # HTTP + - "2222:22" # SSH environment: - USER_UID=1000 - USER_GID=1000 @@ -288,21 +291,24 @@ curl http://192.168.1.100:9000/minio/health/live **Directory**: `/path/to/frontend-student` **`.env.local`**: + ```env # API Configuration -NEXT_PUBLIC_API_URL=http://localhost:4000/api +NUXT_PUBLIC_API_BASE=http://localhost:4000/api NEXT_PUBLIC_WS_URL=ws://localhost:4000 # MinIO/S3 Configuration -NEXT_PUBLIC_S3_ENDPOINT=http://192.168.1.100:9000 -NEXT_PUBLIC_S3_BUCKET=courses +NUXT_PUBLIC_S3_ENDPOINT=http://192.168.1.100:9000 +NUXT_PUBLIC_S3_BUCKET=courses + # App Configuration -NEXT_PUBLIC_APP_NAME=E-Learning Platform -NEXT_PUBLIC_APP_URL=http://localhost:3000 +NUXT_PUBLIC_APP_NAME=E-Learning Platform +NUXT_PUBLIC_APP_URL=http://localhost:3000 ``` **Start Command**: + ```bash npm run dev # or @@ -316,21 +322,24 @@ yarn dev **Directory**: `/path/to/frontend-admin` **`.env.local`**: + ```env # API Configuration -NEXT_PUBLIC_API_URL=http://localhost:4000/api +NUXT_PUBLIC_API_BASE=http://localhost:4000/api NEXT_PUBLIC_WS_URL=ws://localhost:4000 # MinIO/S3 Configuration -NEXT_PUBLIC_S3_ENDPOINT=http://192.168.1.100:9000 -NEXT_PUBLIC_S3_BUCKET=courses +NUXT_PUBLIC_S3_ENDPOINT=http://192.168.1.100:9000 +NUXT_PUBLIC_S3_BUCKET=courses + # App Configuration -NEXT_PUBLIC_APP_NAME=E-Learning Admin -NEXT_PUBLIC_APP_URL=http://localhost:3001 +NUXT_PUBLIC_APP_NAME=E-Learning Admin +NUXT_PUBLIC_APP_URL=http://localhost:3001 ``` **package.json** (modify dev script): + ```json { "scripts": { @@ -340,6 +349,7 @@ NEXT_PUBLIC_APP_URL=http://localhost:3001 ``` **Start Command**: + ```bash npm run dev # or @@ -353,6 +363,7 @@ yarn dev **Directory**: `/path/to/backend` **`.env`**: + ```env # Application NODE_ENV=development @@ -404,6 +415,7 @@ ALLOWED_IMAGE_TYPES=image/jpeg,image/png,image/gif ``` **Start Command**: + ```bash npm run dev # or @@ -463,14 +475,14 @@ docker exec -it elearning-minio mc ls local/ ## 🌐 Access URLs -| Service | URL | Credentials | -|---------|-----|-------------| -| **Frontend (Student)** | http://localhost:3000 | - | -| **Frontend (Admin)** | http://localhost:3001 | - | -| **Backend API** | http://localhost:4000 | - | -| **PostgreSQL** | 192.168.1.100:5432 | elearning / dev_password_change_in_prod | -| **MinIO Console** | http://192.168.1.100:9001 | minioadmin / minioadmin123 | -| **MinIO API** | http://192.168.1.100:9000 | - | +| Service | URL | Credentials | +| ---------------------- | ------------------------- | --------------------------------------- | +| **Frontend (Student)** | http://localhost:3000 | - | +| **Frontend (Admin)** | http://localhost:3001 | - | +| **Backend API** | http://localhost:4000 | - | +| **PostgreSQL** | 192.168.1.100:5432 | elearning / dev_password_change_in_prod | +| **MinIO Console** | http://192.168.1.100:9001 | minioadmin / minioadmin123 | +| **MinIO API** | http://192.168.1.100:9000 | - | | **Mailhog UI** | http://192.168.1.100:8025 | - | | **Adminer** | http://192.168.1.100:8080 | - | @@ -482,12 +494,14 @@ docker exec -it elearning-minio mc ls local/ ## 📊 Resource Requirements ### Proxmox Server (Recommended) + - **CPU**: 4 cores - **RAM**: 8 GB - **Storage**: 50 GB (SSD recommended) - **Network**: 1 Gbps ### Developer Machines + - **CPU**: 2+ cores - **RAM**: 8 GB - **Storage**: 20 GB free space @@ -498,6 +512,7 @@ docker exec -it elearning-minio mc ls local/ > [!WARNING] > **Development Environment Only!** +> > - These credentials are for development only > - Change all passwords in production > - Never commit `.env` files to git @@ -561,6 +576,7 @@ docker-compose up -d ### Daily Workflow 1. **Start Proxmox Services** (if not running) + ```bash ssh root@192.168.1.100 cd /opt/elearning-dev @@ -568,18 +584,21 @@ docker-compose up -d ``` 2. **Start Backend** + ```bash cd /path/to/backend npm run dev ``` 3. **Start Frontend (Student)** + ```bash cd /path/to/frontend-student npm run dev ``` 4. **Start Frontend (Admin)** + ```bash cd /path/to/frontend-admin npm run dev @@ -618,4 +637,3 @@ docker-compose stop - [Docker Compose Documentation](https://docs.docker.com/compose/) - [PostgreSQL Documentation](https://www.postgresql.org/docs/) - [MinIO Documentation](https://min.io/docs/) -