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

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

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

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

ขั้นตอนที่ 1: ฟอร์กที่เก็บข้อมูลเดโม

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

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

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

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

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

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

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

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

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

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

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