Easy CMS

ไทย

English

ไทย

English

ธีม

Deploy บน Netlify ​

หน้านี้สอนอะไร

เว็บ Next.js หรือ Nuxt พร้อม Easy CMS บน Netlify: เนื้อหาอยู่ใน Postgres ไฟล์อัปโหลดอยู่ใน Netlify Blobs รัน migration ทุกครั้งที่ deploy และมี scheduled function สำหรับการเผยแพร่ตามเวลา

ควรอ่านก่อน: เลือกที่ deploy, Next.js หรือ Nuxt

Netlify build ทั้ง Next.js (ผ่าน adapter OpenNext ของ Netlify) และ Nuxt ได้โดยไม่ต้องตั้งค่าเพิ่ม และรันโค้ดฝั่ง server เป็น function ไม่มี disk ที่เก็บได้ถาวรและไม่มี process ที่รันค้างไว้ ถ้าอยากเริ่มจากเว็บสำเร็จรูป ใช้ Deploy ด้วยคลิกเดียว

1. ฐานข้อมูล ​

  • Netlify Database (Postgres): ติดตั้ง @netlify/database แล้ว Netlify จะสร้างฐานข้อมูลตอน deploy ครั้งแรก และตั้ง NETLIFY_DB_URL ให้ ต้องใช้แพ็กเกจ Netlify แบบ credit-based
  • Postgres แบบ hosted อื่นๆ (Neon, Supabase…): ตั้ง DATABASE_URL
bash
npm install @easy-cms/db-postgres @electric-sql/pglite
bash
pnpm add @easy-cms/db-postgres @electric-sql/pglite
bash
yarn add @easy-cms/db-postgres @electric-sql/pglite
bash
bun add @easy-cms/db-postgres @electric-sql/pglite
ts
import { postgres } from '@easy-cms/db-postgres'

const url = process.env.DATABASE_URL ?? process.env.NETLIFY_DB_URL

// บน Netlify ใช้ฐานข้อมูลแบบ hosted บนเครื่องคุณใช้ PGlite ในโฟลเดอร์
db: url ? postgres({ url, max: 2 }) : postgres({ pglite: '.pglite' }),

ใช้ Turso ก็ได้ผ่าน @easy-cms/db-sqlite ดู Vercel

2. ไฟล์อัปโหลดใน Netlify Blobs ​

Netlify Blobs ไม่ต้องตั้งค่าอะไร store จะถูกสร้างตอนใช้ครั้งแรก

bash
npm install @easy-cms/storage-netlify-blobs
bash
pnpm add @easy-cms/storage-netlify-blobs
bash
yarn add @easy-cms/storage-netlify-blobs
bash
bun add @easy-cms/storage-netlify-blobs
ts
import { netlifyBlobsStorage } from '@easy-cms/storage-netlify-blobs'

// บน Netlify ใช้ Blobs บนเครื่องคุณใช้โฟลเดอร์ uploads
upload: process.env.NETLIFY ? { storage: netlifyBlobsStorage() } : {},

ไฟล์ถูกเสิร์ฟผ่าน API ของ CMS Netlify จำกัดขนาด request ของ function ไว้ที่ 6 MB (ประมาณ 4.5 MB สำหรับไฟล์ binary) ไฟล์ที่ใหญ่กว่านั้นต้องใช้ S3 storage ซึ่งรับไฟล์ตรงจากเบราว์เซอร์

3. Migration ทุกครั้งที่ deploy ​

สร้าง migration บนเครื่องกับฐานข้อมูลใหม่ (PGlite หรือไม่ตั้ง DATABASE_URL) แล้ว commit

bash
npx easy-cms migrate:create init
git add easy-cms/migrations
bash
pnpm exec easy-cms migrate:create init
git add easy-cms/migrations
bash
yarn easy-cms migrate:create init
git add easy-cms/migrations
bash
bunx easy-cms migrate:create init
git add easy-cms/migrations

จากนั้นให้ migrate ในคำสั่ง build

toml
[build]
  command = "npx easy-cms migrate && npm run build"

4. Environment variable ​

ใน Site configuration → Environment variables:

ชื่อค่า
EASY_CMS_SECRETopenssl rand -hex 32
EASY_CMS_SETUP_CODEข้อความที่คุณเลือก ตั้งไว้จนกว่าจะมี admin คนแรก
DATABASE_URLURL ของ Postgres (ไม่ต้องตั้งถ้าใช้ Netlify Database)
CRON_SECRETค่าสุ่มอีกตัว สำหรับ scheduled function ด้านล่าง

แก้ตัวแปรแล้วต้องสั่ง deploy ใหม่ deploy ที่รันอยู่ยังใช้ค่าเดิม

5. งานตามเวลา ​

scheduled function เรียก endpoint ของงานทุกห้านาที scheduled function ใช้ได้ทุกแพ็กเกจ รันได้นานสุด 30 วินาที และรันเฉพาะ deploy ที่ publish แล้ว (ไม่รันใน preview)

bash
npm install -D @netlify/functions
bash
pnpm add -D @netlify/functions
bash
yarn add -D @netlify/functions
bash
bun add --dev @netlify/functions
ts
import type { Config } from '@netlify/functions'

// รันงานของ Easy CMS ที่ถึงเวลา: เผยแพร่ตามเวลา ส่ง webhook ซ้ำ ส่งอีเมลที่รอคิว และสำรองข้อมูล
export default async () => {
  const res = await fetch(`${process.env.URL}/api/cms/jobs/run`, {
    headers: { Authorization: `Bearer ${process.env.CRON_SECRET}` },
  })
  if (!res.ok) console.error(`Easy CMS jobs: ${res.status} ${await res.text()}`)
}

export const config: Config = { schedule: '*/5 * * * *' }

URL คือที่อยู่หลักของเว็บ ซึ่ง Netlify ตั้งให้ function

6. IP ของผู้เข้าชม ​

Netlify ตั้ง X-Forwarded-For ให้ ให้เชื่อ header นี้เพื่อให้การจำกัดการ login แยกตามผู้เข้าชม:

ts
export const { GET, HEAD, POST, PATCH, PUT, DELETE, OPTIONS } = createRouteHandlers(config, {
  trustProxy: true,
})
ts
easyCms: { trustProxy: true },

ตรวจสอบ ​

Deploy แล้วเปิด /admin สร้าง admin คนแรกด้วยรหัส setup อัปโหลดรูป แล้วเผยแพร่บทความ จากนั้นตั้ง serverURL เป็นที่อยู่ของเว็บ

ถ้ามีบางอย่างไม่ทำงาน ​

  • เว็บล้มพร้อม "No database": ไม่ได้ตั้งทั้ง DATABASE_URL และ NETLIFY_DB_URL Netlify Database ต้องติดตั้ง @netlify/database และใช้แพ็กเกจแบบ credit-based ถ้าไม่ใช้ ให้ตั้ง DATABASE_URL
  • "CSRF check failed: untrusted origin" ตอนสร้าง admin คนแรก: อัปเดต Easy CMS เป็น 0.37.2 ขึ้นไป ซึ่งยอมรับ host สาธารณะที่ proxy ของ Netlify ส่งต่อมา
  • บทความที่ตั้งเวลาไว้ไม่ถูกเผยแพร่: ดู log ของ function ที่ Logs → Functions และเช็คว่า CRON_SECRET ใน environment ของ function ตรงกัน

ขั้นต่อไป ​

เผยแพร่ภายใต้สัญญาอนุญาต MIT