วิธีตั้งค่า GitHub Actions เพื่อ Deploy แอป Next.js ไปยัง Vercel อย่างปลอดภัย

Overview

การใช้ GitHub Actions ร่วมกับ Vercel ช่วยให้เราสามารถ Deploy แอป Next.js อัตโนมัติทุกครั้งที่มีการอัปเดตโค้ดบน `main` หรือ `production` branch ได้อย่างรวดเร็วและปลอดภัย บทความนี้จะแนะนำขั้นตอนตั้งค่าแบบเต็มรูปแบบ พร้อมเคล็ดลับเพื่อหลีกเลี่ยงปัญหาที่พบบ่อย

Prerequisites

ก่อนเริ่มทำงานควรตรวจสอบว่ามีสิ่งต่อไปนี้พร้อมใช้งานแล้วหรือยัง

• Repository บน GitHub ที่มีโค้ด Next.js อยู่ในรูปแบบมาตรฐาน
• บัญชีผู้ใช้บน Vercel และโปรเจกต์ที่สร้างไว้สำหรับแอปของคุณ
• สิทธิ์ Admin หรือ Write บน repository เพื่อเพิ่ม Secrets

Create Vercel Token

Token จะทำหน้าที่เป็นคีย์ลับให้ GitHub Actions สามารถสื่อสารกับ Vercel ได้อย่างปลอดภัย

• เข้าสู่ระบบ Vercel แล้วเปิดเมนู Settings Tokens
• คลิก Create Token, ตั้งชื่อเช่น `github-actions-token` แล้วบันทึกค่า Token ไว้ (จะไม่แสดงอีกครั้ง)

**Tip: คัดลอก Token ทันทีและเก็บไว้ในที่ปลอดภัย เพราะหลังจากสร้างแล้วคุณไม่สามารถดูค่าเดิมได้

Add Secrets to GitHub

Secrets จะทำให้ข้อมูลสำคัญไม่ถูกเปิดเผยในไฟล์ workflow

• ไปที่หน้า Repository Settings Secrets and variables Actions
• สร้าง Secret ชื่อ `VERCEL_TOKEN` แล้ววางค่า Token ที่คัดลอกมา
• เพิ่ม Secret อีกตัวชื่อ `VERCEL_ORG_ID` (หาได้จาก Vercel Dashboard > Settings > General)
• หากต้องการระบุโปรเจกต์เฉพาะ ให้เพิ่ม Secret `VERCEL_PROJECT_ID`

Create Workflow File

ไฟล์ workflow จะอยู่ในโฟลเดอร์ `.github/workflows/` ของ repository

```yaml name: Deploy to Vercel

on: push: branches:

• main # หรือ branch ที่ต้องการ deploy

jobs: vercel-deploy: runs-on: ubuntu-latest

steps:

• name: Checkout code

uses: actions/checkout@v3

• name: Set up Node.js

uses: actions/setup-node@v3 with: node-version: '20' # หรือเวอร์ชันที่โปรเจกต์ใช้

• name: Install dependencies

run: npm ci

• name: Build Next.js app

run: npm run build

• name: Deploy to Vercel

uses: amondnet/vercel-action@v20 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} working-directory: . # ปรับตามโครงสร้าง repo หากต้องการ env: VERCEL_DEPLOYMENT: production # หรือ preview ตามความต้องการ ```

จุดสำคัญของไฟล์

• Trigger ตั้งให้ทำงานเมื่อมีการ `push` ไปที่ branch ที่กำหนด
• ใช้ actions/checkout ดึงโค้ดล่าสุดจาก repository
• setup-node ระบุเวอร์ชัน Node ให้ตรงกับที่โปรเจกต์ต้องการ
• ขั้นตอน `npm ci` ติดตั้ง dependencies อย่างแม่นยำโดยอ้างอิงไฟล์ lock
• ใช้ Action ของ Vercel (`amondnet/vercel-action`) เพื่อส่ง build ไปยัง Vercel

Configure Build Settings on Vercel

Vercel ต้องรู้ว่าให้ใช้โฟลเดอร์ใดเป็น output ของ Next.js

• เข้าไปที่ Project Settings General แล้วตรวจสอบค่า Output Directory เป็น `.next` (ค่าปกติ)
• หากต้องการตั้งค่า environment variables เพิ่มในส่วน Environment Variables เช่น `NEXT_PUBLIC_API_URL`

Test Deployment

หลังตั้งค่าทุกอย่างแล้วให้ทำการ push โค้ดไปยัง branch ที่กำหนด

• ตรวจสอบสถานะของ workflow ใน GitHub Actions ว่าผ่านทุกขั้นตอนหรือไม่
• เมื่อขั้นตอน Deploy สำเร็จ Vercel จะสร้าง URL ของ Production (เช่น `https://your-app.vercel.app`) ให้คุณตรวจสอบโดยเปิดในเบราว์เซอร์

Tip: หาก workflow ล้มเหลว ดูที่ Logs** ของแต่ละ step เพื่อหาข้อความ error ที่ชัดเจน เช่น การขาด Secret หรือปัญหาในการ build

Common Pitfalls & Solutions

Security Checklist

เพื่อให้กระบวนการ Deploy ปลอดภัยยิ่งขึ้น ควรตรวจสอบรายการต่อไปนี้ก่อนทำงานจริง

• ตรวจสอบว่า Token มีสิทธิ์ Only Deploy ไม่ได้มีสิทธิ์แก้ไขทีมหรือโปรเจกต์อื่น
• อย่าใส่ค่า Secret ลงในไฟล์ `yaml` โดยตรง ให้ใช้ `${{ secrets.VARIABLE_NAME }}` เสมอ
• เปิด Branch protection rules บน GitHub เพื่อบังคับให้ PR ต้องผ่านการตรวจสอบก่อน merge ไปยัง `main`

Summary

• สร้าง Vercel Token แล้วเก็บเป็น Secret ใน GitHub
• เพิ่ม Secrets ที่จำเป็น (`VERCEL_TOKEN`, `VERCEL_ORG_ID`, `VERCEL_PROJECT_ID`)
• เขียน workflow ไฟล์ที่ทำขั้นตอน checkout, setup Node, install dependencies, build Next.js และ deploy ด้วย Vercel Action
• ตั้งค่า Build Output บน Vercel ให้ตรงกับ `.next` และเพิ่ม environment variables ตามต้องการ
• ตรวจสอบผลลัพธ์ใน GitHub Actions & Vercel Dashboard พร้อมแก้ไขปัญหาตามตารางข้อผิดพลาด

**สิ่งที่ควรจำ: ใช้ Secrets เพื่อเก็บข้อมูลสำคัญ, ระบุเวอร์ชัน Node ให้ตรงกับโปรเจกต์, และตรวจสอบการตั้งค่า environment บน Vercel ทุกครั้งก่อน Deploy.