Tutorials7 ม.ค. 2562

Deploy Angular 7 ฟรี ๆ ไปยังเว็บ netlify

สำหรับบทความนี้ใครที่กำลังมองหา Free Frontend Hosting ผมอยากจะแนะนำเว็บ netlify.com ซึ่งตัว netlify นั้นสามารถ deploy static web ได้ทั้ง Angular, Vue.js หรือแม้แต่ React ก็ไม่มีปัญหาครับ นอกจากจะฟรีแล้วระบจัดการต่าง ๆ ก็น่าใช้งาน และใช้งานไม่ยากด้วยครับ
หลังจากสมัครสมาชิกที่ netlify และได้เตรียมระบบที่พัฒนาโดย angular ไว้บน git provider แล้ว ซึ่งตัว netlify รองรับทั้ง GitLab, GitHub และ Bitbucket ตอนนี้ก็ถึงเวลาฤกษ์งามยามดีที่เราจะ deploy ไปยัง netlify แล้ว
Let's go
1. ก่อนอื่นเลยก็เข้าเว็บ netlify.com เข้าสู่ระบบให้เรียบร้อย เราก็จะพบในส่วนของ "Sites" ซึ่งส่วนนี้จะแสดง site ของเราทั้งหมด ถ้าใครยังไม่เคยสร้างก็จะว่างเปล่าดังรูปด้านล่างนี้ครับ เมื่อพร้อมจะสร้าง site ใหม่ ก็คลิกที่ปุ่ม "New site from Git" ที่มุมขวาบนได้เลยครับ
2. หลังจากที่คลิกปุ่ม "New site from Git" เราก็จะได้เจอหน้า "Create a new site" ในส่วนนี้เราต้องเลือกเชื่อมต่อกับ Git provider ที่เราเก็บ source code ระบบที่เราต้องการ deploy
3. หลังจากนั้นระบบก็จะแสดงส่วนที่ให้เราเลือก repository จาก git provide ที่เราเลือกมาก่อนหน้านี้ ซึ่งเราสามารถคลิกเลือก repository ที่ต้องการได้เลยครับ
4. หลังจากนั้นระบบจะให้เราทำการตั้งค่าต่าง ๆ นิดหน่อย ไม่ว่าจะเป็น branch สำหรับ deploy ที่ส่วน "Branch to deploy" คำสั่งสำหรับ build เมื่อ deploy เสร็จ ที่ส่วน "Build command" และ path ที่ได้จากการ build เพื่อ run ระบบ ที่ส่วน "Publish directory" เมื่อตั้งค่าเสร็จก็คลิกที่ปุ่ม "Deploy site" ได้เลยครับ
5. ขั้นตอนสุดท้าย ระบบจะพามาที่หน้า Overview จะเห็นว่าตรงส่วน "Production deploys" จะแสดงสถานะการ "building" อยู่ ซึ่งเราสามารถคลิกเข้าไปดูได้ และเมื่อระบบ deploy สำเร็จ สถานะก็จะเปลี่ยนเป็น "published" นั่นหมายความว่ากระบวนการการ deploy นั้นไม่มีปัญหาครับ
และทั้งหมดนี้ ก็เป็นขั้นตอนทั้งหมดของการ deploy Angular project ของเรามายัง netlify ซึ่งก็ยังมีส่วนของการจัดการ domain เพื่อให้ระบบผูกกับ domain ของเรา หรือแม้แต่การตั้งค่าอื่น ๆ เพื่อน ๆ ก็สามารถติดตามได้ในบทความถัดไปนะครับ