Deploy โปรเจคของเรา ขึ้น Website ด้วย Vercel กัน

สวัสดีครับผม ช่วงนี้น้อง ๆ จบใหม่คงกำลังหางานหรือคนวัยทำงานกำลังมองหางานใหม่ แล้วก็ยังคิดไม่ออกว่า เราจะ deploy ฝากเว็ปไซต์ Resume , Portfolio ของเราที่ใหนดี วันนี้ผมมีเจ้าเด็ดๆ ฟรีๆ มานำเสนอนั้นคือ …. Vercel !!!

ถ้าใครคุ้นกับ now.sh ยิงดีด้วย มันก็คือ new version ของ now โดยเจ้า Vercel เนี่ย support เจ้า Jamstack frameworks (สามารถศึกษา Jamstack ได้ที่ https://snipcart.com/blog/jamstack ) ทั้งหลายแหล่อาทิเช่น

ไม่พูดพร่ำทำเพลงเยอะมาเริ่มกันเลย…

1. เตรียมโปรเจคที่จะทำการ deploy แนะนำว่าให้เก็บไว้ใน Github, Gitlab หรือ Bitbucket จะสะดวกต่อการ import มากเพราะเฮีย Vercel แก support ci/cd ด้วย

2. เปิดเว็ป https://vercel.com/ และทำการ login ในบทความนี้ผม push โปรเจคลง Github เลยจะ login กับ Github เลยละกัน

vercel-login

3. ทำการ import project โดย คลิ๊กปุ่ม import Project -> Import Git Repository (กด ปุ่ม Continue) และนำลิ้งค์ URL ของproject repository เราไปวางตามภาพ (repository ที่เป็น private ก็ได้นะฮะ)

vercel-import project

4. เมื่อ import เรียบร้อย Vercel จะสามารถ auto detect framework ของ repository ของเราได้(เลือกเองก็ได้) และเราสามารถ set build command หรือ output directory , environment variables ก่อน deploy ครั้งแรกได้

vercel setting before deploy (ci)

5. เมื่อทำการ deploy เรียบร้อยก็จะขึ้น visit link ให้เข้าไปชม website และ open dashboard เพื่อ settings options เพิ่มเติม

vercel deploy complete

6. เมื่อเรากด Open Dashboard -> Deployments tab ส่วนนี้จะมี ตารางบอก deploy preview link , State (Ready คือ deploy สำเร็จ) , ชื่อ branch + commit message , เวลาที่ทำการ deploy , creator (เนื่องจาก เราสามารถ add member เพิ่มได้ ส่วนนี้เลยมีประโยชน์บอกว่า ใคร push เข้ามา)

7. เมื่อไปยัง Settings tab ก็จะ มี sub menu , General , Domain , Git integration , Environment Variable, Security, Advanced

• General ส่วนนี้จะเหมือนกับก่อน deploy ครั้งแรกของเรา เป็นส่วนที่จะทำทุกครั้งก่อนการ deploy (CI) เราสามารถทำการ run test ก่อน build ก็ได้หรือทำการ migration , seed db ก่อนก็ก็ได้ (ให้แน่ใจด้วยนะว่า script ใน package.json เรามีมัน ) แต่ ททีเด็ดคือถ้าเป็น คำสัั่งเฉพาะ ของ jamstack framework vercel เขารองรับเลยเช่น next build บราๆ

vercel general in setting tab

• Domains ส่วนนี้เมื่อเรา push code ลง repository Vercel จะ detect ว่า branch ที่ push ไปคือ branch ใหน และเราสามารถกำหนด ชื่อของ Domain ที่จะ auto deploy ให้เมื่อเรา push code เข้าไปใน branch ที่เรากำหนด

vercel domain in setting tab

• Git integration ส่วนนี้จะเป็นตัว track repository ของ project เช่นการกำหนด git repository ที่จะเชื่อมต่อ การกำหนด production branch ของ project การ ทำ deploy hooks (Api response หลังจาก deploy เสร็จแล้ว)

vercel git integration in setting tab

• Environment Variables สามารถกำหนดได้โดยแบ่งเป็น 3 โหมด
  - Production คือ env ที่ใช้สำหรับ domain ที่ push โดย production branch
  - Preview คือ env สำหรับ Url link ที่ Vercel generate ให้ทุกๆครั้งหลังจาก deploy สำเร็จ (สังเกตได้จะมี เลขมั่วๆใน URL นั้น)
  - Development คือ env ที่เราจะเก็บไว้เพื่อให้พัฒนาใน local ของเราเอง

vercel environment vairables in setting tab

• Security ของฟรีจะปล่่อยแค่ แสดง log การรันแต่ละ domainนั้นๆ

vercel security in setting tab

• Advanced เป็นส่วนที่ delete project ของเรา

vercel advanced in setting tab

อีกทั้ง Vercel ยังมี integrations marketplace ด้วยเน้อไม่เหงาๆ

สรุป

ถ้าเราลองอ่าน Jamstack ดูแล้วจะรู้ว่ามันเป็นสิ่งที่น่าจับตามองมากในปัจจุบันและอนาคตซึ่ง Vercel ก็รองรับพวกนี้ (ไม่ jam ก็รองงรับนะจ๊ะ) อีกทั้งเราต่างมองหาทางการ deploy ที่ไม่ยุ่งยากจะได้ใช้เวลาในการเขียน code ให้เต็มที่ และ ด้วย features ที่เหมาะสำหรับการ scale project ในอนาคตผมว่า Vercel เป็นเจ้าหนึ่งที่น่าจับตามองไม่น้อยทีเดียว

อีกอย่างมันฟรี!!!