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

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

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

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

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

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

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

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

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

  3. คลิกต่อไป

  4. (ไม่บังคับ) ตั้งค่า Google Analytics ให้กับโครงการ ซึ่งจะทำให้คุณสามารถ เพื่อรับประสบการณ์ที่ดีที่สุดโดยใช้ผลิตภัณฑ์ Firebase ต่อไปนี้

    เลือก Google Analytics บัญชี หรือสร้างบัญชีใหม่

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

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

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

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

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

npm init @apphosting

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

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

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

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

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

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

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

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

    ซึ่งโดยปกติจะเป็นตำแหน่งไฟล์ package.json ของคุณ

  • ตั้งค่า Branch แบบสด

    นี่คือ Branch ของที่เก็บ GitHub ที่ทำให้ใช้งานได้กับ URL ที่เผยแพร่อยู่ บ่อยครั้งที่มันเป็นกิ่งก้านที่แสดงถึงกิ่งก้านหรือการพัฒนา ผสาน Branch แล้ว

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

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

ขั้นตอนที่ 2: ดูแอปที่ทำให้ใช้งานได้แล้ว

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

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

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

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

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

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

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