เริ่มต้นใช้งานโฮสติ้งแอป

เมื่อมีแอป Next.js หรือ Angular (Next.js เวอร์ชัน 13.5.x ขึ้นไปหรือ Angular 18.2.x ขึ้นไป) ในที่เก็บ GitHub การเริ่มต้นใช้งาน App Hosting อาจทำได้ง่ายๆ เพียงสร้างแบ็กเอนด์ App Hosting แล้วเริ่มเปิดตัวด้วยการพุชไปยัง Branch ที่ใช้งานอยู่ หากไม่มีแอป ให้ใช้แอปตัวอย่างของเราเพื่อทำตามขั้นตอนที่อธิบายไว้ในคู่มือนี้

หากต้องการความช่วยเหลือจาก AI ให้คัดลอกพรอมต์ด้านล่างลงใน Agent การเขียนโค้ด AI (เช่น Antigravity, Claude Code, Codex และ Cursor) คุณสามารถปรับแต่งพรอมต์และปรับปรุงซ้ำๆ กับ Agent ได้ ดูข้อมูลการติดตั้งโดยละเอียดได้ที่ทักษะเอเจนต์ Firebase 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

คู่มือนี้อธิบายวิธีตั้งค่า App Hosting ในคอนโซล Firebase เพื่อให้ติดตั้งใช้งานโดยอัตโนมัติทุกครั้งที่มีการคอมมิตใหม่ในที่เก็บ GitHub เมื่อสิ้นสุดขั้นตอนนี้ คุณจะมีแอปตัวอย่าง Next.js หรือ Angular ที่ใช้งานได้จริงซึ่งจะมีการทำให้ใช้งานได้อีกครั้งทุกครั้งที่คุณคอมมิตการเปลี่ยนแปลงใหม่ไปยังสาขา main ของที่เก็บ GitHub

แม้ว่าคู่มือนี้จะเน้นที่ขั้นตอนการใช้คอนโซล Firebase ที่แนะนำ แต่ก็มีวิธีอื่นๆ ในการทำให้ใช้งานได้ ซึ่งรวมถึงการใช้ CLI ของ Firebase เพื่อทำให้โค้ดในเครื่องใช้งานได้โดยไม่ต้องเชื่อมต่อ GitHub

ขั้นตอนที่ 1: แยกที่เก็บสาธิต

ไปที่ https://github.com/firebase/apphosting-adapters แล้วเลือก Fork

ขั้นตอนที่ 2: สร้างแบ็กเอนด์ App Hosting

  1. ในคอนโซล Firebase ให้ไปที่โฮสติ้งและแบบไม่ใช้เซิร์ฟเวอร์ > App Hosting

  2. คลิกเริ่มต้นใช้งาน

  3. หากได้รับข้อความแจ้ง ให้อัปเกรดเป็นแพ็กเกจราคา Blaze แบบจ่ายเมื่อใช้เพื่อใช้ App Hosting

ภาพหน้าจอการตั้งค่าแบ็กเอนด์ของ App Hosting

ทำตามข้อความแจ้งเพื่อดำเนินการตามขั้นตอนต่อไปนี้ให้เสร็จสมบูรณ์

  • เลือกภูมิภาคหลัก (โดยปกติจะเป็นภูมิภาคที่ใกล้กับผู้ใช้มากที่สุด)
  • เชื่อมต่อกับ GitHub เลือกที่เก็บที่คุณเพิ่งสร้างขึ้นโดยการแยกที่เก็บ apphosting-adapters
  • ตั้งค่าไดเรกทอรีรากของแอปเป็นค่าใดค่าหนึ่งต่อไปนี้
  • ตั้งค่าสาขาที่เผยแพร่เป็น main
  • เปิดใช้การเปิดตัวอัตโนมัติ (ระบบจะเปิดใช้การเปิดตัวอัตโนมัติโดยค่าเริ่มต้น)
  • กำหนดชื่อให้กับแบ็กเอนด์
  • เลือกสภาพแวดล้อมรันไทม์ โดยค่าเริ่มต้น ระบบจะเลือก Node.js เวอร์ชันใหม่ล่าสุดที่แนะนำไว้ให้คุณล่วงหน้า
    • กำหนดค่าการอัปเดตอิมเมจพื้นฐานอัตโนมัติ (ABIU) ระบบจะเปิดใช้ ABIU โดยค่าเริ่มต้นและใช้แพตช์ด้านความปลอดภัยกับสภาพแวดล้อมที่สำคัญโดยอัตโนมัติ คุณเลือกไม่ใช้ ABIU ได้โดยเลือก "ไม่ได้ระบุ" สำหรับรันไทม์
  • สร้างเว็บแอป Firebase ใหม่

เลือกเสร็จสิ้นและทำให้ใช้งานได้

ขั้นตอนที่ 3: ดูแอปที่ติดตั้งใช้งาน

เมื่อคุณสร้างแบ็กเอนด์ Firebase จะให้โดเมนย่อยที่ไม่มีค่าใช้จ่ายซึ่งผู้ใช้ปลายทางสามารถเข้าชมเว็บแอปของคุณได้ โดยมีรูปแบบเป็น backend-id--project-id.us-central1.hosted.app

ในแถวข้อมูลแบ็กเอนด์ในแดชบอร์ดสำหรับแบ็กเอนด์ ให้เลือกลิงก์ไปยังแบ็กเอนด์ที่เผยแพร่อยู่เพื่อดูเว็บไซต์ใหม่

ภาพหน้าจอของแถวข้อมูลแบ็กเอนด์ที่มีการเน้นลิงก์แอปเวอร์ชันที่เผยแพร่

ขั้นตอนที่ 4: ทริกเกอร์การเปิดตัวโดยพุชการเปลี่ยนแปลง

เมื่อสร้างแบ็กเอนด์และมี URL ที่เผยแพร่อยู่แล้ว คุณจะทริกเกอร์การเปิดตัวเว็บแอปเวอร์ชันใหม่ได้ทุกครั้งที่พุชการเปลี่ยนแปลงไปยังสาขาที่เผยแพร่อยู่ของที่เก็บ GitHub วิธีทดสอบการตั้งค่า App Hosting

  1. ใน Fork ของที่เก็บ GitHub สาธิต ให้ไปที่แหล่งที่มาของหน้าแรกของแอปสาธิต ทำการแก้ไขที่จดจำได้ตามต้องการ แล้วพุชการเปลี่ยนแปลงไปยังสาขาหลัก วิธีค้นหาหน้าแรก

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. ในคอนโซล Firebase ให้ตรวจสอบ App Hosting ขณะที่การเปลี่ยนแปลงใหม่เปิดตัวในเวอร์ชันที่ใช้งานจริง เมื่อการเปิดตัวเสร็จสมบูรณ์ คุณจะดูการเปลี่ยนแปลงได้ในหน้าแรกของแอป

ขั้นตอนถัดไป