Pelatihan Full-Stack Modern Part 3: Integrasi Frontend Next.js 15, State Management, & Deployment Docker VPS
Bagian 3 (Final): Mengintegrasikan antarmuka frontend, mengelola state asynchronous, containerization Docker multi-stage build, dan reverse proxy Nginx SSL di VPS.
Puncak Pelatihan Full-Stack ASDEV (Part 3/3 - Final)
Selamat datang di bagian akhir seri pelatihan full-stack! Setelah membangun database di Part 1 dan REST API aman di Part 2, saatnya kita merilis sistem ke server publik agar dapat diakses oleh ribuan pengguna secara stabil.
1. Menyiapkan Docker Multi-Stage Build
Buat file Dockerfile di root proyek untuk memangkas ukuran image container dari 1.2 GB menjadi hanya sekitar 120 MB:
# ── Stage 1: Dependencies ──
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci
# ── Stage 2: Builder ──
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1
RUN npx prisma generate
RUN npm run build
# ── Stage 3: Runner ──
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV PORT=3000
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
CMD ["node", "server.js"]2. Konfigurasi Reverse Proxy Nginx & SSL Let's Encrypt di VPS
Di server VPS Ubuntu Anda, arahkan trafik domain resmi ke container Next.js:
server {
server_name app.domainbisnisanda.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
}
}Jalankan perintah pengamanan sertifikat SSL gratis otomatis:
sudo certbot --nginx -d app.domainbisnisanda.comRangkuman Kelulusan Pelatihan:
Selamat! Anda telah menguasai alur lengkap rekayasa perangkat lunak modern:
- Pemodelan Relasional: PostgreSQL & Prisma ORM.
- Keamanan & Backend: Route Handlers, JWT, RBAC & Zod.
- Produksi & Infrastruktur: Standalone Docker, Uptime Monitoring, & Nginx SSL.
Siap mendalami topik lainnya?
Koleksi tutorial arsitektur, clean code, dan DevOps kami diperbarui secara berkala.