การ Deploy Angular บน Firebase Hosting, Netlify หรือ VPS

Deploy คือการนำแอปที่ build แล้วไปให้ผู้ใช้เข้าถึงได้จริง โดย Angular SPA สามารถ deploy ได้หลายทาง เช่น Firebase Hosting, Netlify หรือ VPS ที่ใช้ Nginx

Timeline/ประวัติศาสตร์

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค FTP Upload / Manual Deploy"]
    A["copy dist เอง
พลาดง่าย"]
  end
  subgraph Era2["ยุค Static Hosting"]
    B["Firebase Hosting
CDN อัตโนมัติ"]
    C["Netlify
Git-based deploy"]
  end
  subgraph Era3["ยุค VPS/Infra Control"]
    D["Nginx SPA Config
try_files"]
    E["Certbot SSL
HTTPS"]
  end
  A --> B --> C --> D --> E

แนวคิดสำคัญ

• Firebase Hosting ใช้ ng deploy ร่วมกับ @angular/fire และมี CDN อัตโนมัติ
• Netlify เชื่อม GitHub Repo และ Auto Deploy เมื่อ Push
• _redirects ใน Netlify ป้องกัน 404 เมื่อใช้ SPA Routing
• VPS ใช้ Linux Server และ Nginx config สำหรับ Angular SPA
• try_files $uri /index.html ส่ง request ทุก path ไปที่ Angular
• SSL Certificate บน VPS ใช้ Certbot ได้
• Environment Variables บน Hosting ใช้ตั้งค่าสำหรับ Production

ตารางเปรียบเทียบ Hosting

Mermaid Diagram: Deploy Flow

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["Angular Source
โค้ด"] --> B["ng build
สร้าง dist"]
  B --> C{"Hosting Target
เลือกปลายทาง"}
  C --> D["Firebase/Netlify
Static Hosting"]
  C --> E["VPS + Nginx
ควบคุม server"]
  D --> F["CDN/Domain
ผู้ใช้เข้าถึง"]
  E --> F

Code Example

# Netlify _redirects
# วางใน public หรือ dist root เพื่อแก้ SPA routing 404
/* /index.html 200

# nginx.conf
# Config สำหรับ Angular SPA บน VPS
server {
  listen 80;
  server_name example.com;

  root /var/www/angular-app;
  index index.html;

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

# ตัวอย่างการใช้งาน:
# build Angular แล้ว copy dist ไป /var/www/angular-app
# ใช้ certbot เพิ่ม HTTPS ให้ domain จริง

# Firebase Hosting deploy
ng add @angular/fire
ng deploy

# Netlify build command
npm run build -- --configuration production

# ตัวอย่างการใช้งาน:
# ตั้ง publish directory เป็น dist/<project-name>/browser หรือ dist/<project-name> ตาม Angular version

วิดีโอแนะนำ

• YouTube: Deploy Angular Firebase Netlify Nginx

กิจกรรมท้ายบท

1. Build Angular production
2. Deploy แบบ static hosting หนึ่ง platform
3. เพิ่ม _redirects หรือ try_files สำหรับ SPA routing
4. อธิบายวิธีตั้ง SSL Certificate และ environment variables บน production

กลับสัปดาห์ที่ 14