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

เมื่อมีแอป 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: แยกที่เก็บสาธิต

หากมีแอปพลิเคชัน Next.js หรือ Angular ในที่เก็บ GitHub อยู่แล้ว คุณสามารถข้ามขั้นตอนนี้และไปที่ขั้นตอนที่ 2: สร้างแบ็กเอนด์ App Hosting คุณไม่จำเป็นต้องแยกหรือติดตั้งที่เก็บ apphosting-adapters เพื่อทำให้แอปของคุณใช้งานได้

หากไม่มีแอปพลิเคชันอยู่แล้วและต้องการติดตั้งใช้งานแอปตัวอย่าง ให้ไปที่ https://github.com/firebase/apphosting-adapters แล้วเลือก Fork นอกจากเครื่องมืออะแดปเตอร์เฟรมเวิร์กแล้ว ที่เก็บนี้ยังมีเทมเพลตเริ่มต้น Next.js และ Angular อย่างเป็นทางการในไดเรกทอรี /starters ด้วย

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

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

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

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

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

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

  • เลือกภูมิภาคหลัก (โดยปกติจะเป็นภูมิภาคที่ใกล้กับผู้ใช้มากที่สุด)

  • เชื่อมต่อกับ GitHub เลือกที่เก็บที่คุณสร้างขึ้นโดยการแยกที่เก็บ apphosting-adapters หรือเลือกที่เก็บแอปพลิเคชันที่มีอยู่

  • ตั้งค่าไดเรกทอรีรากของแอปโดยทำดังนี้

    • หากคุณติดตั้งใช้งานแอปพลิเคชันของคุณเอง ให้ระบุไดเรกทอรีรากของแอป (ค่าเริ่มต้นคือ /) โดยปกติแล้วไดเรกทอรีนี้จะเป็นที่อยู่ของไฟล์ package.json

    • หากคุณใช้ที่เก็บสาธิต apphosting-adapters ให้ตั้งค่าไดเรกทอรีรากของแอปเป็นเส้นทางใดเส้นทางหนึ่งต่อไปนี้

    • /starters/nextjs/basic

    • /starters/angular/basic

  • ตั้งค่าสาขาที่เผยแพร่อยู่เป็น 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 ขณะที่การเปลี่ยนแปลงใหม่เปิดตัวในเวอร์ชันที่ใช้งานจริง เมื่อการเปิดตัวเสร็จสมบูรณ์ คุณจะดูการเปลี่ยนแปลงได้ในหน้าแรกของแอป

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