การ deploy Angular Application บน Cloudflare Pages ช่วยให้เว็บไซต์ของคุณโหลดได้เร็ว มีความปลอดภัย และสามารถรองรับการเข้าถึงจากทั่วโลกได้อย่างมีประสิทธิภาพ
ในบทความนี้ ผมจะมาแนะนำวิธี deploy Angular App บน Cloudflare Pages อย่างละเอียดตั้งแต่การเตรียมไฟล์ในเครื่อง จนถึงการตั้งค่าและ deploy บน Cloudflare Pages
ขั้นตอนการ Deploy Angular App บน Cloudflare Pages
- Build ไฟล์ Angular App ใน Local
ก่อนอื่นคุณต้องสร้างไฟล์โปรเจกต์ที่พร้อมใช้งานด้วยคำสั่ง build:
npm run build
หลังจากรันคำสั่งนี้แล้ว จะได้โฟลเดอร์ dist/web/browser และ server ซึ่งเป็นไฟล์ที่พร้อมสำหรับการ deploy
- สร้างไฟล์
.nvmrcและระบุ Node.js Version
สร้างไฟล์ .nvmrc ใน root directory ของโปรเจกต์ และใส่เวอร์ชัน Node.js ที่ต้องการใช้งาน เช่น:
22.13.0
Cloudflare Pages จะอ้างอิงไฟล์ .nvmrc เพื่อกำหนด Node.js เวอร์ชันที่ใช้ในการ build
เข้าไปที่ Cloudflare Dashboard
- ล็อกอินไปที่ Cloudflare Dashboard
- ไปที่เมนู Workers & Pages
- เลือกแท็บ Pages และกดปุ่ม Create a project
เชื่อมต่อกับ Git Repository
- เลือก Connect to Git และเชื่อมต่อกับ repository ที่เก็บโค้ด Angular App ของคุณ
- เลือก branch ที่ต้องการ deploy (ปกติคือ
mainหรือmaster)
- ตั้งค่า Build Settings
ที่หน้าการตั้งค่า Build ให้กรอกข้อมูลดังนี้:
- Framework preset: Angular
- Build command:
npm run build - Build output directory:
dist/web/browser - Root directory: (ปล่อยว่าง หากโปรเจกต์ไม่มี subdirectory)
กด Save and Deploy เพื่อเริ่มต้นการ deploy
- รอให้ระบบ Build เสร็จ
หลังจากกด deploy ระบบจะทำการ build ไฟล์ใน Cloudflare Pages รอสักครู่จนกระทั่งการ build เสร็จสมบูรณ์ ถ้า build สำเร็จจะมีการแสดงข้อความยืนยัน
- เข้าไปที่หน้า Project
เมื่อ build เสร็จแล้ว ให้กดปุ่ม Continue to project เพื่อตรวจสอบหน้าเว็บไซต์ของคุณ และสามารถแชร์ URL ของ Cloudflare Pages ได้ทันที
สรุป
Deploy Angular App บน Cloudflare Pages เป็นวิธีที่ง่ายและมีประสิทธิภาพสำหรับนักพัฒนาที่ต้องการโฮสต์เว็บแอปพลิเคชันแบบ Static การเข้าถึงทั่วโลก โดยใช้เพียงไม่กี่ขั้นตอน คุณสามารถเชื่อมต่อ repository, ตั้งค่า build, และ deploy ได้ภายในไม่กี่นาที