React Academy · บทเรียน

การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว

เชื่อมต่อรีโพ GitHub กับ Vercel กำหนดค่าตัวแปรสภาพแวดล้อม และใช้การนำไปใช้งานสำหรับพรีวิว

บทเรียน 1 จาก 413 ขั้นตอน

การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทำไมต้องใช้ Vercel

Vercel คือแพลตฟอร์มที่ทีม Next.js สร้างขึ้น โดยมีการนำขึ้นใช้งานแบบไม่ต้องตั้งค่าใด ๆ เพียงเชื่อมที่เก็บ GitHub แล้ว Vercel จะตรวจจับเฟรมเวิร์ก สร้าง และนำแอปขึ้นใช้งานโดยอัตโนมัติทุกครั้งที่มีการพุช

การเชื่อมต่อที่เก็บโค้ด

นำเข้าที่เก็บ GitHub/GitLab/Bitbucket จากแดชบอร์ด Vercel Vercel จะตรวจจับเฟรมเวิร์ก (Next.js, Vite, CRA) และตั้งค่าการสร้างโดยอัตโนมัติ

การตั้งค่าโครงการ

Vercel ตรวจจับสิ่งต่อไปนี้โดยอัตโนมัติ: เฟรมเวิร์ก คำสั่งสร้าง (npm run build) ไดเรกทอรีผลลัพธ์ (.next, dist) และคำสั่งติดตั้ง (npm install) หากจำเป็น คุณสามารถแทนที่ค่าเหล่านี้ได้ในการตั้งค่าโครงการ

ตัวแปรสภาพแวดล้อม

เพิ่มตัวแปรสภาพแวดล้อมในแดชบอร์ด Vercel ภายใต้ การตั้งค่าโครงการ → ตัวแปรสภาพแวดล้อม กำหนดค่าที่แตกต่างกันสำหรับสภาพแวดล้อมการใช้งานจริง การแสดงตัวอย่าง และการพัฒนา

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

การนำขึ้นใช้งานเพื่อแสดงตัวอย่าง

การพุชไปยังทุกสาขาของ git และคำขอรวมการเปลี่ยนแปลงแต่ละครั้งจะได้รับ URL สำหรับแสดงตัวอย่างที่ไม่ซ้ำกัน (เช่น myapp-git-feature-xyz.vercel.app) แชร์ URL นี้เพื่อขอรับการตรวจสอบก่อนรวมโค้ดได้ โดยไม่ต้องสร้างสภาพแวดล้อมเตรียมใช้งานด้วยตนเอง

โดเมนแบบกำหนดเอง

เพิ่มโดเมนแบบกำหนดเองในแดชบอร์ด Vercel ชี้ DNS ของคุณ (ระเบียน A หรือ CNAME) ไปยัง IP ของ Vercel แล้ว Vercel จะจัดเตรียมใบรับรอง SSL ให้อัตโนมัติ

การตั้งค่า vercel.json

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

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

ใช้ Vercel CLI เพื่อนำแอปขึ้นใช้งานจากเทอร์มินัล ดึงตัวแปรสภาพแวดล้อมมาใช้ในเครื่อง และจัดการโครงการ

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

ฟังก์ชันแบบไร้เซิร์ฟเวอร์

ไฟล์ใน api/ (Pages Router) หรือ app/api/*/route.ts จะถูกนำขึ้นใช้งานเป็นฟังก์ชันแบบไร้เซิร์ฟเวอร์บนรันไทม์ edge หรือ Node.js ของ Vercel โดยอัตโนมัติ

ฮุกสำหรับการนำขึ้นใช้งาน

สร้างฮุกสำหรับการนำขึ้นใช้งาน (URL ของเว็บฮุก) เพื่อเรียกการนำแอปขึ้นใช้งานจากบริการภายนอก ซึ่งมีประโยชน์สำหรับการเปลี่ยนแปลงเนื้อหาใน CMS ที่ควรทำให้เว็บไซต์ถูกนำขึ้นใช้งานใหม่

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

การนำโมโนเรโปขึ้นใช้งาน

ในโมโนเรโปของ Nx หรือ Turborepo ให้ตั้งค่าไดเรกทอรีรากของ Vercel เป็นโฟลเดอร์ของแอปที่ต้องการ และกำหนดค่าคำสั่งสร้างให้ใช้ตัวจัดการงานของโมโนเรโป

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

ตรวจสอบความเข้าใจ

การนำขึ้นใช้งานเพื่อแสดงตัวอย่างของ Vercel คืออะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

เชื่อมที่เก็บ Git กับ Vercel เพื่อการนำขึ้นใช้งานโดยไม่ต้องตั้งค่า ทุกสาขาจะได้รับ URL สำหรับแสดงตัวอย่าง จัดการตัวแปรสภาพแวดล้อมแยกตามสภาพแวดล้อมในแดชบอร์ด ใช้ vercel.json สำหรับการเปลี่ยนเส้นทางและส่วนหัว และใช้ Vercel CLI สำหรับการนำขึ้นใช้งานผ่านเทอร์มินัลและการดึงตัวแปรสภาพแวดล้อม

เริ่มต้นได้ฟรี

เรียนรู้ React ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 88
บทเรียน: 324

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว”

เชื่อมต่อรีโพ GitHub กับ Vercel กำหนดค่าตัวแปรสภาพแวดล้อม และใช้การนำไปใช้งานสำหรับพรีวิว คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว
การโฮสต์ React SPA บน AWS S3 และ CloudFront
การใส่ React/Next.js App ลงใน Docker
CI/CD ด้วย GitHub Actions สำหรับ React

← กลับไปที่ React Academy