ข้ามไปยังเนื้อหา

The Astro CLI

หากคุณเคยรัน next dev คุณรู้ pattern นี้แล้ว Astro มาพร้อม binary astro ตัวเดียวที่จัดการทุกขั้นตอนของ development lifecycle — dev server, production build, local preview, integration scaffolding และ type checking โดยแมปกับคำสั่ง Next.js CLI ที่คุณใช้อยู่ทุกวันได้แทบทุกคำสั่ง

คำสั่งหลัก

# เริ่ม dev server (hot module reloading, port 4321 โดย default)
npx astro dev

# Production build → dist/
npx astro build

# Serve โฟลเดอร์ dist/ ใน local (จำลอง production build ได้แม่นยำ)
npx astro preview

# เพิ่ม official integration และอัปเดต astro.config.mjs อัตโนมัติ
npx astro add react
npx astro add tailwind
npx astro add sitemap

# ตรวจสอบ type ของไฟล์ .astro และ .ts ทั้งหมด
npx astro check

package.json scripts

ทั้งสอง framework ใช้ convention เดียวกันในการตั้งชื่อย่อให้กับคำสั่ง CLI ใน scripts

// package.json — Next.js project
{
  "scripts": {
    "dev":         "next dev",
    "build":       "next build",
    "start":       "next start",
    "lint":        "next lint",
    "type-check":  "tsc --noEmit"
  }
}

// package.json — Astro project
{
  "scripts": {
    "dev":     "astro dev",
    "build":   "astro build",
    "preview": "astro preview",
    "check":   "astro check"
  }
}

สองสิ่งที่ควรสังเกต:

astro preview คือ local preview server — ไม่ใช่ production server จริง ใช้ adapter (Node, Vercel, Cloudflare) สำหรับ SSR production จริงๆ
astro check แทนที่สองขั้นตอน tsc --noEmit + linter ที่โปรเจกต์ Next.js มักต้องดูแลแยกกัน

คำสั่ง `astro add`

npx astro add scaffold official integrations ในขั้นตอนเดียว: ติดตั้ง npm package, อัปเดต astro.config.mjs และพิมพ์สิ่งที่เปลี่ยนแปลง

# เพิ่ม React integration (เปิดใช้งาน .tsx islands)
npx astro add react

# เพิ่ม Tailwind CSS
npx astro add tailwind

# เพิ่ม Vercel SSR adapter
npx astro add vercel

# เพิ่มหลายอย่างพร้อมกัน
npx astro add react tailwind sitemap

ไม่มีสิ่งเทียบเท่าใน Next.js — ใน Next คุณต้อง npm install package แล้วอัปเดต next.config.js ด้วยตนเอง คำสั่ง astro add อัตโนมัติขั้นตอน config ให้

CLI flags

# กำหนด port เอง
astro dev --port 3000

# Bind กับทุก interface (มีประโยชน์ใน Docker / WSL)
astro dev --host

# แสดง output แบบละเอียดระหว่าง build
astro build --verbose

# Watch mode สำหรับ astro check (รันใหม่เมื่อบันทึกไฟล์)
astro check --watch