ล็อกอิน Netlify CMS ด้วย GitHub บน Vercel

จากบล็อกก่อนหน้านี้ที่ผมเพิ่ม Netlify CMS ใน Hugo ในตอนนั้นเว็บนี้ยังโฮสต์อยู่บน Netlify แต่ตอนนี้ผมย้ายเว็บมาโฮสต์บน Vercel แทน
ปัญหาคือ Vercel ไม่มี OAuth Sever ให้ใช้เหมือน Netlify ดังนั้นจึงต้องหาทางเลือกอื่น โดยใน docs ของ Netlify CMS มีตัวเลือกให้เลือกใช้หลากหลาย แต่สุดท้ายมาเจอ vercel-netlify-cms-github ซึ่งทำมาสำหรับเว็บที่โฮสต์บน Vercel โดยเฉพาะ โดยใช้ Vercel Serverless Functions ในการทำ OAuth Server
ล็อกอิน GitHub ด้วย Vercel Serverless Functions
ขั้นแรกติดตั้ง vercel-netlify-cms-github ก่อน
npm install @openlab/vercel-netlify-cms-github
จากนั้นสร้างโฟลเดอร์ api
ขึ้นมาที่ root ของ repo แล้วสร้าง 2 ไฟล์ไว้ในนั้น
ไฟล์แรก auth.ts
export { auth as default } from '@openlab/vercel-netlify-cms-github';
อีกไฟล์ callback.ts
export { callback as default } from '@openlab/vercel-netlify-cms-github';
ต่อมาไปแก้ไฟล์ config.yml
ของ Netlify CMS ในส่วน backend
ให้ใช้โค้ดตามตัวอย่างด้านล่างนี้ โดยอย่าลืมเปลี่ยนค่าต่างๆ ให้เป็นของเว็บไซต์ตัวเองด้วยนะครับ
backend:
name: github
repo: user/repo
branch: main
base_url: https://example.com/
auth_endpoint: api/auth
และไปสร้าง GitHub OAuth App โดยไปที่หน้าตั้งค่าบัญชีใน GitHub > Developer settings > OAuth Apps (หรือคลิกที่นี่) แล้วคลิกสร้างแอปใหม่
โดยในช่อง Authorization callback URL ให้ใส่เป็น https://โดเมนเว็บไซต์/api/callback
ลงทะเบียนให้เรียบร้อย จะได้ client ID และ client secret มา
ไปที่หน้าแดชบอร์ดของ Vercel แล้วไปเพิ่ม Environment Variables ให้เว็บไซต์เรา 2 ตัวคือ
OAUTH_CLIENT_ID
ใส่ value เป็น client ID ทีได้มาจาก GitHubOAUTH_CLIENT_SECRET
ใส่ value เป็น client secret ทีได้มาจาก GitHub
สุดท้าย push ไฟล์ขึ้น GitHub ให้เรียบร้อย รอให้ Vercel deploy เว็บเสร็จ แล้วลองล็อกอินเข้า CMS ดูครับ ถ้าล็อกอินเข้าได้ปกติก็เรียบร้อย
แต่ถ้าล็อกอินไม่ได้ ให้ไปที่แดชบอร์ดของ Vercel และเปิดหน้า build log ของ deployment ปัจจุบัน คลิกดูแท็บ Functions แล้วลองล็อกอินอีกรอบดูว่ามี error อะไรหรือเปล่า