มา Deploy Next.js ด้วย Vercel กัน

Vercel เป็น Cloud platform สำหรับ build และ deploy ให้ซึ่งถ้าเรามีการเชื่อมต่อกับ Github ก็สามารถที่จะ Automate deployment ให้เราได้เลย และถ้าคุณมี Domain name ก็สามารถเอามาเพิ่มได้เหมือนกัน ซึ่งขั้นตอนการเพิ่ม Domain นั้นก็ง่ายมาก และยังมีพวก Analytics ซึ่งจะทำการ monitor application performance, logs และอื่นๆอีกมากมาย สามารถอ่านเพิ่มเติมได้ที่นี่

ซึ่งในตัวอย่างวันนี้จะใช้ Next.js ในการ deploy

• เรามาสร้าง Project กันก่อนด้วยคำสั่ง

npx create-next-app example-deploy-vercel

• หลังจากนั้นให้ start project ด้วยคำสั่ง

npm run dev

หลังจากนั้นเราก็จะเจอหน้าจอแบบนี้ซึ่งตอนนี้ยังอยู่ที่ Localhost

• ต่อมาให้ทำการไปสร้าง Project ที่ Github

• หลังจากนั้นให้ทำการ add remote ของเราเข้าไปใน project ที่เพิ่งสร้างขึ้นมาเมื่อกี้ได้เลย

git remote add origin https://github.com/phatpan/example-deploy-vercel.git

• หลังจากนั้นก็ให้ Push code ขึ้น github ของเราได้เลย

• ต่อไปให้ไปที่เว็บ Vercel ซึ่งถ้าใครยังไม่เป็นสมาชิกก็ให้ทำการเชื่อมต่อไปยัง Github ของคุณได้เลย เมื่อสมัครเสร็จแล้วก็จะเจอหน้าจอแบบนี้ให้ทำการกดปุ่ม Add New -> Project

• ต่อมาให้เลือก Project ที่เราสร้างไว้ เหมือนกับในภาพนี้ และให้กด Import

• หลังจากนั้นจะเจอหน้าจอนี้ จะมี Framework Preset ให้เราเลือกซึ่งก็มีเยอะมาก สามารถเลือกได้ตามอัธยาศัย แต่ในตัวอย่างนี้เราใช้ Next.js เราก็เลือกเลยและก็จะมีให้เราสามารถ config อื่นได้อีกด้วย ซึ่งถ้าโปรเจคเรามี Environment Variables หรือมี command พิเศษที่ใช้สำหรับในการ build และ deploy ก็สามารถใส่ในหน้าจอนี้ได้เช่นกัน แต่ตัวอย่างของเรานั้นไม่ต้อง config เพิ่มเติมให้กดปุ่ม deploy ได้เลย

• เมื่อ deploy เสร็จเราก็จะเลือกหน้าจอนี้

• ให้กดปุ่ม Continue to Dashboard หลังจากนั้นก็จะเจอหน้าจอแบบนี้

• มาถึงขั้นตอนนี้เราก็กดปุ่ม visit เพื่อที่จะดูเว็บที่ deploy เสร็จแล้วได้เลย จะเป็นหน้าตาแบบนี้จะเห็นว่าชื่อ Domain นั้นจะเป็นชื่อโปรเจคที่เราตั้งขึ้นมาและตามด้วย vercel.app ซึ่งในอนาคตถ้าอยากให้เป็น Domain name ที่เราต้องการก็สามารถเข้าไป config ได้เช่นกัน

• ถ้าต้องการที่จะ Config domain name ให้ไปที่ Settings ของโปรเจคที่เราต้องการและใส่ Domain name เข้าไปได้เลย หลังจากนั้นก็จะมีพวก CNAME ต่างๆ ให้เราเอาไป config ที่ domain ที่เราไปซื้อมา

• ต่อมาลองแก้ไข Code กัน

• หลังจากนั้นให้ push code ขึ้นไปได้เลย หลังจากนั้นให้เข้าไปดูใน Project ของเราตรง Tab -> Deployments ก็จะเจอ commit ที่เราเพิ่ง push code ขึ้นไปล่าสุดและก็ทำงาน Automate deployment

• เมื่อ deploy เสร็จก็จะเปลี่ยนสถานะเป็น Ready ให้เรากดเข้าไปอันบนสุดได้เลยก็จะเจอ path ที่ deploy เสร็จแล้ว

• หลังจากนั้นเราก็ได้หน้าจอแบบนี้แล้ว เสร็จแล้วเย้ๆ

มี version แบบวีดีโอด้วยน๊าา สามารถมาดูได้ที่นี่

หวังว่าจะเป็นประโยชน์กับคนที่เข้ามาอ่านน๊าาค่ะ

ผิดพลาดตรงไหนบอกได้เลยน๊า

เจอกันใหม่บทความหน้า ^-^