Easy deploy Nextjs (SSR/CSR) to server using Droplets, Cloudflare and Git (Connect with Domain name)
เรื่องยากๆ ทำให้มันง่ายขึ้น ลองอ่านกันดูนะครับ หากมีข้อสงสัยใดๆ หรือส่วนใดผิดพลาด สามารถแจ้งได้เลยนะครับ
หลังจากที่พัฒนาเว็บไซต์และอัพขึ้น Git แล้วเรียบร้อย จะทำการนำเว็บไซต์ขึ้น Server ของ DigitalOcean และทำการเพิ่มระบบป้องกันต่างๆ รวมถึงความปลอดภัยของเว็บไซต์ด้วย Cloudflare และจบด้วยการเชื่อมต่อกับโดเมนเนม
DigitalOcean
สร้าง Server ที่รวดเร็ว ง่าย และมีประสิทธิภาพ ราคาถูกสุดคือ $5 ต่อเดือน
Cloudflare
ใช้ระบบป้องกันและความปลอดภัยให้แก่เว็บไซต์ รวมถึง SSL ที่ใช้งานได้ฟรี
สิ่งที่ต้องทำ
- นำโค้ดทั้งหมดขึ้นสู่ Git สามารถใช้บริการของที่ไหนก็ได้ เพราะ DigitalOcean รองรับครอบคลุมทั้งหมด
- ใน Package.json ให้กำหนดส่วนของ script build และ run ไว้ เพื่อให้ทำงานอัตโนมัต
- สมัครสมาชิก DigitalOcean และเข้าใช้งาน
เลือก Create > Apps
ระบบจะนำเราไปยังหน้าการเชื่อมต่อ Git Source ของเรา ให้เลือก Git Provider ที่เราใช้งาน และเลือก Repository เพื่อทำการ Deploy code ของเราเข้าสู่ Server Droplet
เลือก Branch ที่จะทำการ Build ทุกครั้งเมื่อมีการ Update หลังจากนั้นกด Next
ระบบจะนำมาสู่หน้าสรุป ตรงหน้านี้เราสามารถที่จะเปลี่ยนแปลง Plan และปรับแต่ง Resource ต่างๆ ได้
หากไม่ต้องการแก้ไขอะไร กด Skip หรือ Next
ส่วนของ Evironment จะมีการกำหนดในระบบ Global และสามารถเลือกใช้เฉพาะส่วนของ Source เราได้
ส่วนของ Info สามารถแก้ไข Dummy domain และโปรเจคที่จะจัดเก็บได้
หากกดแก้ไข สามารถอัพเดทส่วนของ Dummy domain และโปรเจคที่จะจัดเก็บ
หลังจนากนั้นจะเข้าสู่ส่วนของการรีวิว หากไม่ต้องการแก้ไขอะไรเพิ่มเติม สามารถกด Create Resource ได้เลย รอจนกว่าจะแสดงการสถานะเป็น Live จึงถือว่าจบการเชื่อมต่อ Git และ Deploy code เข้าสู่ Server ของ DigitalOcean Droplets
เชื่อมต่อ Cloudflare กับ Domain name
ทำตามขั้นตอนในเว็บไซต์ของ Cloudflare ได้เลย
เชื่อมต่อ DigitalOcean Droplets กับ Cloudflare
ไปยัง Tab Setting
ไปยังส่วนของ Domains กด Edit
กด Ad Domain
กรอกชื่อ Domain ที่ได้จดทะเบียนไว้
เลือก You manage your domain
คัดลอก CNAME และเปิดเว็บไซต์ Cloudflare
ไปยังเมนู DNS กด Add record
เลือก Type เป็น CNAME ใส่ Sub domain ที่ตั้งไว้ในช่อ Name และใส่ข้อความที่คัดลอกลงในช่อง Target และกด Save เป็นอันเสร็จสิ้น
รอระบบอัพเดทสักครู่ ทดสอบการเชื่อมต่อ หากไม่มีข้อผิดพลาดใดๆ ก็จะแสดงเว็บไซต์ที่เราได้พัฒนาไว้
ขอบคุณที่เข้ามาอ่านครับ
