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

หากมีแอป 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) คุณปรับแต่งพรอมต์และทำซ้ำกับเอเจนต์ได้ ดูข้อมูลการติดตั้งโดยละเอียดได้ที่ ทักษะเอเจนต์ 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 เลือกที่เก็บที่คุณเพิ่งสร้างโดยการ Fork ที่เก็บ firebase-framework-tools
  • ตั้งค่าไดเรกทอรีรากของแอปเป็นไดเรกทอรีใดไดเรกทอรีหนึ่งต่อไปนี้
  • ตั้งค่ากิ่งที่ใช้งานจริงเป็น main
  • เปิดใช้การเปิดตัวอัตโนมัติ (ระบบจะเปิดใช้การเปิดตัวอัตโนมัติตามค่าเริ่มต้น)
  • ตั้งชื่อแบ็กเอนด์
  • เลือกสภาพแวดล้อมรันไทม์ โดยค่าเริ่มต้น ระบบจะเลือกเวอร์ชัน Node.js ที่แนะนําล่าสุดไว้ล่วงหน้าให้คุณ
    • กำหนดค่าการอัปเดตอิมเมจฐานอัตโนมัติ (ABIU) ABIU จะเปิดใช้โดยค่าเริ่มต้นและใช้แพตช์ความปลอดภัยกับ สภาพแวดล้อมพื้นฐานของคุณโดยอัตโนมัติ คุณเลือกไม่ใช้ ABIU ได้โดยเลือก "ไม่ได้ระบุ" สำหรับรันไทม์
  • สร้างเว็บแอป Firebase ใหม่

เลือกเสร็จสิ้นและติดตั้งใช้งาน

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

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

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

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

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

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

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

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

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

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