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

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

ก่อนเริ่มต้น

ก่อนที่จะตั้งค่า Firebase App Hosting ได้ คุณจะต้องสร้างโปรเจ็กต์ Firebase (หากยังไม่มี) และอัปเกรดเป็นแพ็กเกจ Blaze

วิธีสร้างโปรเจ็กต์

  1. ในFirebase คอนโซล ให้คลิกเพิ่มโปรเจ็กต์

    • หากต้องการเพิ่มทรัพยากร Firebase ลงในโปรเจ็กต์ที่มีอยู่ Google Cloud ให้ป้อนชื่อโปรเจ็กต์หรือเลือกจากเมนูแบบเลื่อนลง

    • หากต้องการสร้างโปรเจ็กต์ใหม่ ให้ป้อนชื่อโปรเจ็กต์ นอกจากนี้ คุณยัง เลือกแก้ไขรหัสโปรเจ็กต์ที่แสดงใต้ชื่อโปรเจ็กต์ได้ด้วย

  2. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase

  3. คลิกต่อไป

  4. (ไม่บังคับ) ตั้งค่า Google Analytics สำหรับโปรเจ็กต์ ซึ่งจะ ช่วยให้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้นเมื่อใช้ผลิตภัณฑ์ Firebase ต่อไปนี้ Firebase A/B Testing Cloud Messaging Crashlytics In-App Messaging และ Remote Config (รวมถึงการปรับเปลี่ยนในแบบของคุณ)

    เลือกบัญชี Google Analytics ที่มีอยู่ หรือสร้างบัญชีใหม่ หากสร้างบัญชีใหม่ ให้เลือกAnalyticsสถานที่ตั้งการรายงาน จากนั้นยอมรับการตั้งค่าการแชร์ข้อมูลและGoogle Analyticsข้อกำหนดสำหรับ โปรเจ็กต์

  5. คลิกสร้างโปรเจ็กต์ (หรือเพิ่ม Firebase หากคุณเพิ่ม Firebase ไปยังโปรเจ็กต์ Google Cloud ที่มีอยู่)

Firebase จะจัดสรรทรัพยากรสำหรับโปรเจ็กต์ Firebase โดยอัตโนมัติ เมื่อ กระบวนการเสร็จสมบูรณ์ ระบบจะนำคุณไปยังหน้าภาพรวมของโปรเจ็กต์ Firebase ในFirebaseคอนโซล

ขั้นตอนที่ 0 (ไม่บังคับ): สร้างที่เก็บ GitHub และเว็บแอป

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

npm init @apphosting

คุณเรียกใช้แอปตัวอย่างได้ในเครื่องโดยใช้ next dev หรือ ng start หากต้องการดำเนินการต่อ ให้ สร้างที่เก็บ GitHub ใหม่ แล้วพุชโค้ดตัวอย่างที่เพิ่งเริ่มต้นไปยังที่เก็บนั้น

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

App Hostingแบ็กเอนด์คือชุดของทรัพยากรที่มีการจัดการซึ่ง App Hosting สร้างขึ้นเพื่อสร้างและเรียกใช้เว็บแอป

คอนโซล Firebase: จากเมนูสร้าง ให้เลือก App Hosting แล้วคลิกเริ่มต้นใช้งาน

CLI: (เวอร์ชัน 13.15.4 ขึ้นไป) หากต้องการสร้างแบ็กเอนด์ ให้เรียกใช้คำสั่งต่อไปนี้ จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง โดยระบุprojectID เป็นอาร์กิวเมนต์

firebase apphosting:backends:create --project PROJECT_ID

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

  • ตั้งค่าไดเรกทอรีรากของแอป (ค่าเริ่มต้นคือ /)

    โดยปกติแล้ว package.json จะอยู่ที่นี่

  • ตั้งค่าสาขาที่ใช้งานจริง

    นี่คือ Branch ของที่เก็บ GitHub ที่จะได้รับการติดตั้งใช้งานไปยัง URL ที่ใช้งานจริง โดยมักจะเป็นกิ่งก้านที่ใช้ผสานรวมฟีเจอร์หรือกิ่งก้านสำหรับการพัฒนา

  • ยอมรับหรือปฏิเสธการเปิดตัวอัตโนมัติ

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

  • ตั้งชื่อแบ็กเอนด์

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

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

หากต้องการดู URL ของเว็บแอป ให้ตรวจสอบคอนโซล Firebase หรือเรียกใช้คำสั่ง CLI ต่อไปนี้ 

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

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

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

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

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