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

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

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

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

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

  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 หรือหากต้องการลองใช้ขั้นตอนกับแอปตัวอย่าง ให้เริ่มต้นด้วยการจัดเตรียมตัวอย่างสำหรับ Next.js หรือ Angular ดังนี้

npm init @apphosting

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

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

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

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

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

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

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

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

    โดยปกติแล้ว ไฟล์ package.json จะอยู่ที่ตำแหน่งนี้

  • ตั้งค่าสาขาที่ใช้งานอยู่

    นี่คือสาขาของที่เก็บ 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} --location us-central1

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

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

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

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