วิธีการ Deploy Project ขึ้น Cloudflare
บทความนี้จะสอนวิธีการ Deploy Project ไปที่ Cloudflare โดยผมจะแนะนำตั้งแต่การสมัครสมาชิกไปถึงการ Custom Domain ครับ
เริ่มต้นสมัครสมาชิกที่ CloudFlare
ไปที่เมนู Sign Up หรือหากมีบัญชีอยู่แล้ว ให้ไปที่เมนู Login
จากนั้นใส่ Email และ Password ให้ครบถ้วนตามที่เว็บไซต์ Cloudflare กำหนดไว้
จากนั้นเมื่อกดปุ่ม Create Account เพื่อทำการสมัครสมาชิก
ที่นี้หากมี Domain กันอยู่แล้ว ให้กดไปที่ปุ่ม Add site ได้เลย แต่หากยังไม่มี Domain ให้ดู “ขั้นตอนการจดโดเมนผ่าน Freenom” ครับ
ขั้นตอนการ Add Site ผ่าน Cloudflare
ไปที่เมนู “Website” ที่ https://dash.cloudflare.com/
ใส่ชื่อ Domain แล้วกดปุ่ม Add site
ทีนี้จะมาที่หน้า Select a plan จะมีรายละเอียดแต่ละ Package ให้เราดู แต่ในตัวอย่างที่นี้ ผมจะขอเลือกเป็นแบบ Free ครับ จากนั้นก็กดปุ่ม Continue
Cloudflare จะทำการ Scan เพื่อหาว่า Domain ที่เราจดว่าอยู่ที่ไหน
เมื่อ Scan เสร็จจะได้หน้าจอเพื่อทำการ Add Record มาแล้วแต่เราจะยังเพิ่มไม่ได้เลย เพราะยังไม่ได้ Add DNS มาที่ Cloudflare ขั้นตอนการเพิ่ม DNS ก่อน โดยไปที่ลิงก์ https://dash.cloudflare.com/
ที่เมนู Website ตรงวงกลมสีเหลืองจากรูปด้านบนจะเห็นว่า Domain ที่ผมพึ่งเพิ่มเข้าไปยังขึ้นสถานะว่า “Pending Nameserver Update” อยู่ให้ทำการกดเข้าไปที่ Domain นั้น
จะเห็นว่าทาง Cloudflare จะให้ทำการ Replace Nameserver มาเพื่อทำการจัดการได้ง่ายขึ้น จากนั้นให้ทำการเปลี่ยน Nameserver 1 และ Nameserver 2 จากเว็บไซต์ที่ให้ทำการจด Domain
หลังจากเพิ่ม Nameserver แล้ว Domain ก็จะเปลี่ยนสถานะจาก “Pending Nameserver Update” เป็น “Active” ก็เป็นอันเสร็จสิ้น ทีนี้เราจะเข้าสู่ขั้นตอนการ Deploy Project กันซักที
ขั้นตอนการ Deploy Project ขึ้น Cloudflare
จากเมนูด้านซ้าย เข้ามาที่เมนู Page
หากยังไม่เคยมีการสร้าง Project ขึ้นมา ให้ทำการกดปุ่ม Create Project
จากรูปด้านบน จะเห็นว่าจะว่าเราสามารถ Connect Git เพื่อทำการ Deploy ได้ 2 ตัวคือ GitHub และ GitLab โดยเราสามารถดูว่า Cloudflare Support frameworks อะไรได้บ้างที่ https://developers.cloudflare.com/pages/platform/build-configuration/#framework-presets
จากรูปด้านบน ผมขอยกตัวอย่างการ Deploy project โดยใช้ GitHub และ Frameworks เป็น React
กดปุ่ม Connect GitHub
เลือก User ที่จะทำการ Connect GitHub
ใส่รหัสผ่านให้เรียบร้อย
เมื่อทำการ Login เสร็จ เราจะสามารถเลือกให้ Cloudflare สามารถเข้าถึง Repository ทั้งหมด หรือเลือกแค่บางตัวก็ได้ จากนั้นกดปุ่ม Save
กลับมาที่ Cloudflare ให้เราเลือก Repository ที่ต้องการ Deploy จากนั้นกดปุ่ม Begin Setup โดยในตัวอย่างผมจะใช้ serverless
ใส่ชื่อ Project แล้วเลือก branch ให้เรียบร้อย โดยช่อง “Framework preset” จะเลือกเป็น “Create React App” จากนั้นกดปุ่ม Save and Deploy
รอการ Deploy project สถานะยังคงเป็น In progress อยู่
Deploy project เรียบร้อย สถานะเป็น Success จากนั้นกดปุ่ม Continue to project
หน้า Project ที่ Deploy มาแล้ว สามารถตรวจสอบจาก Domain ที่ทาง Cloudflare ทำการสร้างมาก่อนจะ Custom Domain ของเรามา
หน้าเว็บไซต์ที่ทาง Cloudflare สร้างขึ้นเรียบร้อยแล้ว
ทีนี้เรามาทำการ Custom Domain กันดีกว่า
จากหน้า Pages ที่เรา Deploy project ขึ้นมา ให้เราไปที่ Tab “Custom domains”
ทีนี้กดปุ่ม Set up a custom domain
จากนั้นใส่ชื่อ Domain แล้วกดปุ่ม Continue
หากเป็น Domain ที่ได้ทำการผูกกับ Cloudflare ไว้แล้ว จะสารมารถ Activate domain ได้เลย
รอ Verify Domain
ทำการ Verify Domain สำเร็จแล้วให้ทดลองพิมพ์ชื่อ Domain เพื่อทดสอบการเข้าเว็บไซต์ได้เลย
เข้าเว็บไซต์โดยใช้ Domain ที่ผูกได้แล้ว ก็เป็นอันเสร็จภาระกิจการ Deploy Project ขึ้น Cloudflare ครับ
หากมีการ Push code เข้าไปใน GitHub ใหม่ Cloudflare สามารถใช้งาน Automatic deployments ได้ แต่หากต้องการใช้การ Deploy ก่อนหน้านี้เราจะสามารถทำการ Rollback ได้ด้วยวิธีนี้
เลือกที่ … แล้วเลือกที่ “Rollback to this deployment”
Cloudflare จะขึ้นป็อปอัพเพื่อยืนยันการ Rollback project อีกครับ หากต้องการให้กดปุ่ม Rollback เพื่อยืนยัน
ทีนี้การ Rollback project ก็สำเร็จแล้ว ดูจากเลข Source กับ Deployment ตามวงแดงจากรูปด้านบนครับ
Reference
