ทำให้การตั้งค่า Netlify ตาม Branch เป็นอัตโนมัติด้วย Bash Script - คู่มือทีละขั้นตอน

โครงสร้างโปรเจกต์และสถานการณ์

ลองจินตนาการว่าคุณมีเซิร์ฟเวอร์ 2 ตัวสำหรับโปรเจกต์: หนึ่งสำหรับ staging environment (deploy บน Render) และอีกตัวสำหรับ production environment (deploy บน Google Cloud Run)

คุณยังมี client deploy 2 ตัวบน Netlify แต่ละตัวมี API_BASE_URL ของตัวเอง ที่ถูก serve โดยเซิร์ฟเวอร์ที่เกี่ยวข้อง

ใน frontend deployment ของแต่ละ client ทุก request ที่เริ่มต้นด้วย /api/v1/ จะถูกส่งไปยังเซิร์ฟเวอร์ ส่วน route อื่นๆ จะอยู่ใน frontend เพื่อนำทางไปหน้าต่างๆ ใน client ดังนั้นคุณต้องเขียน redirect rules หรือ rewrites ให้ถูกต้อง

Redirects/Rewrites คืออะไร?

Redirects หรือ rewrites คือกฎที่สร้างขึ้นเพื่อให้ URL บางตัวไปยังตำแหน่งใหม่ที่ใดก็ได้บนอินเทอร์เน็ต เรียกอีกอย่างว่า URL forwarding ใช้ได้ทั้งเว็บไซต์ทั้งหมด ส่วนของเว็บไซต์ หรือเว็บแอปพลิเคชัน

ในเว็บแอปพลิเคชัน Redirects มักใช้เพื่อกำหนดวิธีประมวลผล request แพลตฟอร์มโฮสติ้งอย่าง Netlify และ Vercel ให้ผู้พัฒนากำหนดว่าเว็บแอปประมวลผล request อย่างไร

Netlify ประมวลผล Redirects อย่างไร?

Netlify มี 2 วิธีระบุ redirect rules: ใช้ _redirects file syntax หรือ netlify.toml configuration file syntax ทั้งคู่ทำเป้าหมายเดียวกัน แต่ netlify.toml ให้ตัวเลือกและความสามารถมากกว่า

ใช้ _redirects file syntax

สร้างไฟล์ _redirects ใน public folder ของ client app แล้วระบุกฎ redirect ภายใน ไฟล์ตัวอย่าง:

/api/v1/*  https://your-api-base-url.com/api/v1/:splat  200
/*       /index.html  200

กฎแรก: ส่ง request ที่ match /api/v1 ไปที่ API URL ที่ระบุ คืน status 200 ตัว * หลัง /api/v1/ จะ append extension ของ URL เดิมไปที่ API URL ตัว :splat เป็น placeholder

กฎที่สอง: serve route เริ่มต้นอื่นๆ ผ่าน index.html เพื่อป้องกันหน้าแตกเมื่อ.navigate ย้อนกลับ

ใช้ netlify.toml configuration file syntax

netlify.toml ให้ความยืดหยุ่นมากกว่า รวมถึง matching route, destination, status code, header rules, signatures, country restrictions, roles และอื่นๆ

หมายเหตุสำคัญ: ใช้ _redirects file สำหรับ redirect ไป API ได้ แต่ถือเป็นความเสี่ยงด้านความปลอดภัยหาก API_BASE_URL ควรเป็นความลับ เพราะไฟล์ใน public folder เข้าถึงได้โดยใครก็ได้

ถ้า URL ที่ redirect เป็น public ใช้ _redirects ได้ แต่ถ้าต้องการ URL เป็นความลับ ควรใช้ netlify.toml ร่วมกับ environment variables

ปัญหา: การจัดการหลาย netlify.toml สำหรับ Branch ต่างๆ

เมื่อใช้ netlify.toml กำหนด build commands และ environment-specific settings การ push changes และเปิด pull requests จะต้อง ignore หรือ edit netlify.toml ในแต่ละ branch ด้วยมือ ซึ่งเครียดและ error-prone

นอกจากนี้ เราต้องการหลีกเลี่ยงการ hardcode API URLs ใน _redirects หรือ netlify.toml ใน codebase เพื่อความปลอดภัย จะใช้ environment variables จาก Netlify UI สำหรับ production และ staging contexts

เพื่อแก้ปัญหาเหล่านี้ เราจะใช้ script เล็กๆ ใน codebase เพื่อ generate netlify.toml ที่ถูกต้องสำหรับแต่ละ branch แบบ dynamic วิธีนี้ขจัด conflict และลด manual intervention

วิธีเขียน Script สร้าง Configuration File อัตโนมัติ

Sample Netlify.toml file

นี่คือ netlify.toml ที่เราต้องการให้สร้างขึ้นสำหรับแต่ละ build Request ที่ match api/v1/ จะถูก route ไปยัง API

ขั้นตอนที่ 1: สร้างโฟลเดอร์ script และเพิ่มไฟล์ script

ใน client directory สร้าง scripts/ directory และ configure-netlify.sh script file ทำในทุก branch เนื้อหาเหมือนกัน

#!/bin/bash
# ตรวจสอบว่า API_BASE_URL ถูกตั้งค่า
if [ -z "$API_BASE_URL" ]; then
    echo "Error: API_BASE_URL environment variable is not set."
    exit 1
fi
echo "Using API endpoint: $API_BASE_URL"

# กำหนด Netlify configuration ที่ต้องการ
NETLIFY_CONFIG="
[build]
command = \"npm install && npm run build\"
base = \"client\"
publish = \"dist\"

[[redirects]]
from = \"/api/v1/*\"
to = \"$API_BASE_URL/:splat\"
status = 200
force = true

[[redirects]]
from = \"/*\"
to = \"/index.html\"
status = 200
"

# สร้างหรืออัปเดต netlify.toml
if [ ! -f "netlify.toml" ]; then
    echo "Creating netlify.toml file..."
else
    echo "Updating existing netlify.toml file..."
fi
echo "$NETLIFY_CONFIG" > netlify.toml

echo "netlify.toml file has been configured successfully!"

Script ทำ 3 สิ่ง:

1. ตรวจสอบ environment variable API_BASE_URL ถ้าไม่ได้ตั้งค่า ให้ exit build และ fail - ป้องกัน deployment ที่สำเร็จแต่มี URL ผิดใน production
2. สร้างเนื้อหา netlify.toml ตามตัวอย่าง ปรับโครงสร้าง API endpoint ได้ตามต้องการ
3. ตรวจสอบว่า netlify.toml มีอยู่แล้วหรือไม่ ถ้าไม่มีสร้างใหม่ ถ้ามีอัปเดตด้วย API_BASE_URL จาก environment variables

ขั้นตอนที่ 2: แก้ไข package.json ให้รวมคำสั่ง script

เพื่อ integrate script กับ build process เพิ่มคำสั่งใน package.json ให้เรียก script ก่อน build จริง

เพิ่มคำสั่ง configure-netlify: "configure-netlify": "bash scripts/configure-netlify.sh" ใน scripts ของ package.json

อัปเดต build command: "build": "npm run configure-netlify && vite build"

วิธี Deploy Client ไป Netlify

ต้องใช้วิธี import existing project จาก Git repository (GitHub/GitLab) Drag-and-drop ไม่ได้ เพราะต้องการ build process ที่รัน script

Deployment ครั้งแรก

1. Sign in Netlify > netlify.com
2. Click "Add new site" > "Import an existing project" > "Deploy with GitHub"
3. Click "Configure Netlify on GitHub" > Search repository > Select
4. ตั้งชื่อ site ให้ unique
5. Configure deploy settings: เลือก branch main (production branch)
   • Branch: main/master
   • Build command: npm run build
   • Publish directory: dist (หรือ build ขึ้นกับ tool)
6. ตั้ง environment variables: อย่าลืม API_BASE_URL จากเซิร์ฟเวอร์ - จำเป็นตาม script
7. Click "Deploy site"

Deployments ต่อไป / ตั้งค่า Branch Deployments

ขั้นตอนที่ 1: ตั้ง Environment Variables ใน Netlify สำหรับแต่ละ branch context

หลัง deploy สำเร็จ ตั้งค่า staging branch:

1. ไปที่ site list > เลือก site ที่ deploy สำเร็จ
2. Click "site configuration" > "environment variables" > "Add a variable"
3. เลือก import ทีละตัวหรือ import .env file ทั้งไฟล์
4. Uncheck production branch (ป้องกันแทนที่ main branch)
5. Select "branch deploys"
6. Paste .env file content และเพิ่ม API_BASE_URL สำหรับ staging

สำคัญ: ไม่ใช้ค่าเดียวกันสำหรับทุก context ใช้ "different value for each deploy context" เพื่อกำหนดค่าแต่ละ branch

ขั้นตอนที่ 2: Trigger new deploy

หลัง import variables สำเร็จ ไป "deploys" > กด "Trigger deploy" > clear cache > deploy ใหม่

ตรวจสอบ Deployments

ยืนยันว่า script ทำงานได้ โดยเลือก deployment > ดู "Deploy log" > เลือก building dropdown จะเห็นคำสั่งรัน และ API URL สำหรับ deployment นั้น

สรุป

ด้วยขั้นตอนนี้ และ script + คำสั่งที่อัปเดตในทุก branch เมื่อ push changes Netlify จะ generate หรือ update netlify.toml ในแต่ละ branch อัตโนมัติ ให้การตั้งค่าและ environment variables ที่ถูกต้องสำหรับแต่ละ environment ถูกใช้ในขณะ build

Script เดียวกันใช้ในทุก branch ให้คุณโฟกัสที่ code changes อื่นๆ ขณะ script จัดการ configuration ให้อย่างปลอดภัยและง่ายดาย

ลอง push changes ไป branch ใดก็ได้เพื่อดูการทำงาน