reveal.js

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

Lesson 6 - Testing, DevOps และการ Deploy

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

---

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

<pre class="mermaid">
%%{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
</pre>

---

## แนวคิดสำคัญ

- **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

| Platform | ข้อดี | เหมาะกับ |
|---|---|---|
| Firebase Hosting | CDN, deploy ง่าย | Angular static app |
| Netlify | Git auto deploy, preview | โปรเจกต์ static/SPA |
| VPS + Nginx | ควบคุม server สูง | งานที่ต้อง custom infra |
| Docker VPS | deploy เหมือนกันทุกเครื่อง | full-stack หลาย service |

---

## Mermaid Diagram: Deploy Flow

<pre class="mermaid">
%%{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
</pre>

---

## Code Example

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

```nginx
# 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 จริง
```

```powershell
# 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](https://www.youtube.com/results?search_query=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

---

## End

<a href="/web-programming/14-testing-deploy/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>