GitHub Actions สำหรับ Static Site — CI/CD อัตโนมัติ

ทำไมต้องใช้ GitHub Actions

ปัญหาที่แก้ได้:

• Push code โดยไม่รัน build — build อาจ fail เงียบๆ
• Deploy manual — เสียเวลา ลืมได้
• ไม่มีการ review — PR ผ่านโดยไม่มีใครตรวจ build

GitHub Actions ทำให้:

1. ทุก push รัน build อัตโนมัติ
2. PR ไม่ merge ได้ถ้า build fail
3. Deploy อัตโนมัติเมื่อ merge เข้า main

Structure พื้นฐาน

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [master, main]
  pull_request:
    branches: [master, main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build

Build Check สำหรับ Astro

# .github/workflows/build-check.yml
name: Build Check

on:
  push:
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Check for TypeScript errors
        run: npx tsc --noEmit

Deploy ไปยัง GitHub Pages

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [master]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

Deploy ไปยัง Railway (แบบที่ใช้จริง)

Railway มี auto-deploy จาก GitHub built-in — ไม่ต้องใช้ GitHub Actions สำหรับ deploy แต่ยังคง actions ไว้สำหรับ build check:

# .github/workflows/build-check.yml
# ทำหน้าที่ตรวจ build ก่อน merge — Railway จะ deploy เอง
name: Build Check

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build

Branch Protection Rules

ตั้งใน GitHub → Settings → Branches → Add rule:

• Branch name pattern: main
• Require status checks before merging: ✓
• Status checks: build (ชื่อ job ใน workflow)
• Require branches to be up to date: ✓

ผลลัพธ์: ไม่มีใคร merge PR ได้ถ้า build fail

Caching สำหรับ Build เร็วขึ้น

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: npm      # cache node_modules ตาม package-lock.json

node_modules ถูก cache ระหว่าง run — ช่วยลดเวลา build จาก ~2 นาที เหลือ ~30 วินาที

Environment Variables (ถ้าจำเป็น)

- name: Build
  run: npm run build
  env:
    PUBLIC_SITE_URL: ${{ vars.SITE_URL }}   # ตัวแปรธรรมดา
    SECRET_KEY: ${{ secrets.API_KEY }}       # secret — encrypt, ไม่ show ใน log

ตั้งค่าใน GitHub → Settings → Secrets and variables → Actions

ห้าม commit secrets ลง .yml โดยตรง — ใช้ ${{ secrets.NAME }} เสมอ

Workflow ที่ใช้จริง (Panupong WS)

push → GitHub → Actions รัน build → ถ้าผ่าน → Railway auto-deploy
                              ↓
                        ถ้า fail → ไม่ deploy, แจ้งใน commit status

Railway ดึง code จาก GitHub master branch และรัน npm run build ของตัวเอง — Actions ทำหน้าที่เป็น safety net ก่อนที่ code จะเข้า main