Vue Academy · Pelajaran

Men-deploy Vue Full-Stack ke Produksi

Docker Compose untuk Vue + Fastify, reverse proxy nginx, SSL dengan Let's Encrypt, serta CI/CD.

Pelajaran 4 dari 413 langkah

Men-deploy Vue Full-Stack ke Produksi adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Topologi Produksi

Aplikasi Vue + Fastify lengkap dalam produksi biasanya berjalan sebagai dua kontainer: kontainer nginx yang menyajikan berkas statis Vue hasil pembangunan, dan kontainer API Fastify. nginx juga meneruskan /api ke API melalui proksi balik.

Membangun Aplikasi Vue

Bangun SPA dengan Vite untuk menghasilkan aset statis yang dioptimalkan di dist. Berkas inilah yang akan disajikan oleh nginx.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Dockerfile Vue (Multi-Tahap)

Gunakan pembangunan Docker multi-tahap: lakukan pembangunan dengan Node, lalu salin keluaran statis ke citra nginx kecil. Citra akhir hanya berisi berkas statis dan nginx.

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: SPA + Proksi API

Konfigurasi nginx menyajikan SPA, dengan rute cadangan try_files ke index.html untuk perutean sisi klien, dan memproksikan /api ke kontainer Fastify berdasarkan nama layanannya.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Dockerfile Fastify

Citra API memasang dependensi produksi dan menjalankan server. Dengarkan pada 0.0.0.0 agar server dapat dijangkau dari kontainer lain.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose menghubungkan kedua layanan melalui jaringan bersama. Target proksi fastify-api dalam nginx.conf sesuai dengan nama layanan di sini.

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

Penemuan Layanan berdasarkan Nama

Di dalam jaringan compose, kontainer saling menjangkau melalui nama layanan. nginx meneruskan proksi ke http://fastify-api:3000—tanpa alamat IP dan tanpa mengekspos port API ke publik.

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

SSL dengan Certbot

Tambahkan HTTPS menggunakan Let's Encrypt melalui Certbot. Pasang sertifikat ke nginx dan konfigurasikan blok server 443 dengan mengarahkan HTTP ke HTTPS.

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Pembaruan Certbot

Sertifikat Certbot berlaku selama 90 hari. Jalankan perintah pembaruan secara terjadwal, melalui cron atau kontainer pendamping, lalu muat ulang nginx agar sertifikat yang diperbarui mulai berlaku.

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

CI/CD GitHub Actions

Otomatiskan pembangunan dan penerapan dengan GitHub Actions: saat push ke main, bangun dan uji, lalu bangun dan kirim citra atau gunakan SSH ke server untuk menarik citra serta memulai ulang dengan compose.

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

Rahasia dan Lingkungan

Jangan pernah menanamkan rahasia ke dalam citra. Teruskan rahasia melalui variabel lingkungan, yaitu environment atau env_file pada compose, yang bersumber dari rahasia GitHub Actions. Simpan JWT_SECRET, URL basis data, dan sebagainya di luar repositori.

Pemeriksaan Singkat

Uji pemahaman Anda tentang penerapan aplikasi lengkap.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari penerapan produksi:

Dua layanan: vue-nginx untuk berkas statis dan fastify-api
nginx.conf menyajikan SPA dan memproksikan /api ke nama layanan API
docker-compose menghubungkan keduanya; hanya nginx yang dipublikasikan ke host
HTTPS melalui Certbot dengan pembaruan terjadwal
GitHub Actions membangun, menguji, dan menerapkan; rahasia tetap berada dalam variabel lingkungan

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Men-deploy Vue Full-Stack ke Produksi” gratis?

Ya — teks lengkap “Men-deploy Vue Full-Stack ke Produksi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Men-deploy Vue Full-Stack ke Produksi”?

Docker Compose untuk Vue + Fastify, reverse proxy nginx, SSL dengan Let's Encrypt, serta CI/CD. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Men-deploy Vue Full-Stack ke Produksi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Backend Fastify untuk SPA Vue
Autentikasi JWT: Login dan Refresh
Panggilan API Terautentikasi dengan Interceptor Axios
Men-deploy Vue Full-Stack ke Produksi

← Kembali ke Vue Academy