Vue Academy · Pelajaran

Menyebarkan Vue Tindanan Penuh ke Produksi

Docker Compose untuk Vue + Fastify, proksi songsang nginx, SSL dengan Let's Encrypt, CI/CD.

Pelajaran 4 daripada 413 langkah

Menyebarkan Vue Tindanan Penuh ke Produksi ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Topologi Produksi

App Vue + Fastify tindanan penuh dalam produksi biasanya berjalan sebagai dua bekas: bekas nginx yang menyajikan fail statik Vue yang dibina, dan bekas API Fastify. nginx juga bertindak sebagai proksi terbalik untuk /api kepada API.

Membina App Vue

Bina SPA dengan Vite untuk menghasilkan aset statik yang dioptimumkan dalam dist. Inilah aset yang akan disajikan oleh nginx.

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

Dockerfile Vue (Berbilang Peringkat)

Gunakan binaan Docker berbilang peringkat: bina dengan Node, kemudian salin keluaran statik ke dalam imej nginx yang kecil. Imej akhir hanya mengandungi fail statik 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: Proksi SPA + API

Konfigurasi nginx menyajikan SPA (dengan sandaran try_files ke index.html untuk penghalaan klien) dan memproksikan /api kepada bekas Fastify menggunakan nama perkhidmatannya.

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

Imej API memasang kebergantungan produksi dan menjalankan pelayan. Ikat pada 0.0.0.0 supaya pelayan boleh dicapai daripada bekas 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 menyambungkan kedua-dua perkhidmatan pada rangkaian yang dikongsi. Sasaran proksi fastify-api dalam nginx.conf sepadan dengan nama perkhidmatan 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 Perkhidmatan Mengikut Nama

Dalam rangkaian compose, bekas boleh mencapai satu sama lain melalui nama perkhidmatan. nginx memproksikan kepada http://fastify-api:3000 — tiada alamat IP dan tiada pendedahan awam bagi port API.

# 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. Lekapkan sijil ke dalam nginx dan konfigurasikan blok pelayan 443 dengan mengubah hala HTTP kepada 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;
}

Pembaharuan Certbot

Sijil Certbot sah selama 90 hari. Jalankan perintah pembaharuan mengikut jadual (cron atau bekas sampingan) dan muat semula nginx supaya sijil yang diperbaharui berkuat kuasa.

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

CI/CD GitHub Actions

Automatikkan binaan dan penempatan dengan GitHub Actions: apabila berlaku push ke main, bina dan uji, kemudian bina/push imej atau gunakan SSH ke pelayan untuk menarik serta memulakan semula 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'

Rahsia dan Persekitaran

Jangan sekali-kali benamkan rahsia ke dalam imej. Hantarkannya melalui pemboleh ubah persekitaran (compose environment / env_file) yang diperoleh daripada rahsia GitHub Actions. Simpan JWT_SECRET, URL pangkalan data dan sebagainya di luar repositori.

Semakan Pantas

Uji pemahaman anda tentang penempatan tindanan penuh.

Jawab dalam pelajaran interaktif

Ulang Kaji

Anda telah mempelajari penempatan produksi:

Dua perkhidmatan: vue-nginx (statik) dan fastify-api
nginx.conf menyajikan SPA dan memproksikan /api kepada nama perkhidmatan API
docker-compose menyambungkan kedua-duanya; hanya nginx diterbitkan kepada hos
HTTPS melalui Certbot dengan pembaharuan berjadual
GitHub Actions membina, menguji dan menempatkan aplikasi; rahsia kekal dalam pemboleh ubah persekitaran

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menyebarkan Vue Tindanan Penuh ke Produksi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Menyebarkan Vue Tindanan Penuh ke Produksi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyebarkan Vue Tindanan Penuh ke Produksi”?

Docker Compose untuk Vue + Fastify, proksi songsang nginx, SSL dengan Let's Encrypt, CI/CD. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Menyebarkan Vue Tindanan Penuh ke Produksi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Backend Fastify untuk SPA Vue
Pengesahan JWT: Log Masuk dan Penyegaran
Panggilan API Disahkan dengan Pencegat Axios
Menyebarkan Vue Tindanan Penuh ke Produksi

← Kembali ke Vue Academy