Vue Academy · บทเรียน

การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง

Docker Compose สำหรับ Vue + Fastify, nginx reverse proxy, SSL ด้วย Let's Encrypt และ CI/CD

การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

โครงสร้างระบบสำหรับใช้งานจริง

โดยทั่วไป แอป Vue + Fastify แบบฟูลสแตกในสภาพแวดล้อมใช้งานจริงจะทำงานเป็นคอนเทนเนอร์สองรายการ ได้แก่ คอนเทนเนอร์ nginx ที่ให้บริการไฟล์สแตติกของ Vue ที่ build แล้ว และคอนเทนเนอร์ Fastify API นอกจากนี้ nginx ยังทำหน้าที่เป็นพร็อกซีย้อนกลับสำหรับส่งต่อ /api ไปยัง API

การ build แอป Vue

ใช้ Vite build SPA เพื่อสร้างไฟล์ทรัพยากรสแตติกที่ได้รับการปรับแต่งแล้วไว้ใน dist ซึ่งเป็นไฟล์ที่ nginx จะให้บริการ

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

Vue Dockerfile แบบหลายขั้นตอน

ใช้การ build Docker แบบหลายขั้นตอน โดย build ด้วย Node แล้วคัดลอกผลลัพธ์สแตติกไปยังอิมเมจ nginx ขนาดเล็ก อิมเมจสุดท้ายจะมีเฉพาะไฟล์สแตติกและ 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 + พร็อกซี API

การกำหนดค่า nginx ให้บริการ SPA โดยมี try_files เป็นเส้นทางสำรองไปยัง index.html สำหรับการกำหนดเส้นทางฝั่งไคลเอนต์ และส่งต่อ /api ไปยังคอนเทนเนอร์ Fastify ด้วยชื่อบริการของคอนเทนเนอร์

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

อิมเมจ API จะติดตั้งส่วนที่ต้องใช้ในสภาพแวดล้อมใช้งานจริงและเรียกใช้เซิร์ฟเวอร์ ให้ผูกเซิร์ฟเวอร์กับ 0.0.0.0 เพื่อให้คอนเทนเนอร์อื่นเข้าถึงได้

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 เชื่อมบริการทั้งสองเข้าด้วยกันบนเครือข่ายร่วม เป้าหมายพร็อกซี fastify-api ใน nginx.conf จะตรงกับชื่อบริการที่กำหนดไว้ที่นี่

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'

การค้นหาบริการด้วยชื่อ

ภายในเครือข่าย compose คอนเทนเนอร์จะเข้าถึงกันด้วยชื่อบริการ nginx จะส่งต่อไปยัง http://fastify-api:3000 จึงไม่ต้องใช้ IP และไม่ต้องเปิดเผยพอร์ต API ต่อสาธารณะ

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

SSL ด้วย Certbot

เพิ่ม HTTPS ด้วย Let's Encrypt ผ่าน Certbot โดยเมานต์ใบรับรองเข้าไปใน nginx และกำหนดค่าบล็อกเซิร์ฟเวอร์สำหรับพอร์ต 443 พร้อมเปลี่ยนเส้นทางจาก HTTP ไปยัง 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;
}

การต่ออายุใบรับรองด้วย Certbot

ใบรับรองของ Certbot มีอายุ 90 วัน ให้เรียกใช้คำสั่งต่ออายุตามกำหนดเวลา เช่น ด้วย cron หรือคอนเทนเนอร์ข้างเคียง แล้วโหลด nginx ใหม่เพื่อให้ใบรับรองที่ต่ออายุมีผล

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

GitHub Actions CI/CD

ทำให้การ build และการนำไปใช้งานเป็นอัตโนมัติด้วย GitHub Actions โดยเมื่อ push ไปยัง main ให้ build และทดสอบ จากนั้น build และ push อิมเมจ หรือใช้ SSH เชื่อมต่อเซิร์ฟเวอร์เพื่อ pull แล้วเริ่มระบบใหม่ด้วย 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'

ความลับและสภาพแวดล้อม

อย่าฝัง secret ไว้ในอิมเมจโดยเด็ดขาด ให้ส่งค่าผ่านตัวแปรสภาพแวดล้อม (environment / env_file ของ compose) ซึ่งดึงมาจาก secret ของ GitHub Actions เก็บ JWT_SECRET, URL ของฐานข้อมูล และข้อมูลลักษณะเดียวกันไว้นอกคลังโค้ด

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับการนำระบบฟูลสแตกไปใช้งานจริง

สรุปทบทวน

คุณได้เรียนรู้การนำระบบไปใช้งานจริง:

มีสองบริการ ได้แก่ vue-nginx (ไฟล์สแตติก) และ fastify-api
nginx.conf ให้บริการ SPA และส่งต่อ /api ไปยังชื่อบริการ API
docker-compose เชื่อมบริการทั้งสองเข้าด้วยกัน โดยมีเพียง nginx ที่เผยแพร่ไปยังโฮสต์
ใช้ HTTPS ผ่าน Certbot พร้อมการต่ออายุตามกำหนดเวลา
GitHub Actions ทำการ build ทดสอบ และนำระบบไปใช้งาน ส่วน secret จะเก็บไว้ในตัวแปรสภาพแวดล้อม

คำถามที่พบบ่อย

บทเรียน “การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง”

Docker Compose สำหรับ Vue + Fastify, nginx reverse proxy, SSL ด้วย Let's Encrypt และ CI/CD คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue
การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช
การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios
การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง

← กลับไปที่ Vue Academy