เมื่อใช้แอป Next.js หรือ Angular ที่มีอยู่ (Next.js เวอร์ชัน 13 ขึ้นไปหรือ Angular 17.2 ขึ้นไป) ในที่เก็บ GitHub การเริ่มต้นใช้งานโฮสติ้งแอปอาจเป็นวิธีที่ง่ายพอๆ กับการสร้างแบ็กเอนด์โฮสติ้งของแอป แล้วเริ่มการเปิดตัวด้วยการพุชไปยัง Branch ที่เผยแพร่อยู่ หากคุณไม่มีแอป ให้ใช้แอปตัวอย่างหนึ่งของเราเพื่อดูขั้นตอนต่างๆ ที่อธิบายไว้ในคู่มือนี้
ก่อนเริ่มต้น
ก่อนที่จะตั้งค่าโฮสติ้งแอป Firebase ได้ คุณจะต้องสร้างโปรเจ็กต์ Firebase (หากยังไม่มี) และอัปเกรดเป็นแพ็กเกจ Blaze
วิธีสร้างโปรเจ็กต์
-
ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์
-
หากต้องการเพิ่มทรัพยากร Firebase ไปยังโปรเจ็กต์ Google Cloud ที่มีอยู่ ให้ป้อนชื่อโปรเจ็กต์หรือเลือกจากเมนูแบบเลื่อนลง
-
หากต้องการสร้างโปรเจ็กต์ใหม่ ให้ป้อนชื่อโปรเจ็กต์ที่ต้องการ คุณยังแก้ไขรหัสโปรเจ็กต์ที่แสดงใต้ชื่อโปรเจ็กต์ได้อีกด้วย
-
-
หากได้รับข้อความแจ้ง ให้ตรวจสอบและยอมรับข้อกำหนดของ Firebase
-
คลิกดำเนินการต่อ
-
(ไม่บังคับ) ตั้งค่า Google Analytics สำหรับโปรเจ็กต์ที่จะช่วยให้คุณได้รับประสบการณ์ที่ดีที่สุดเมื่อใช้ผลิตภัณฑ์ Firebase ต่อไปนี้
เลือกบัญชี Google Analytics ที่มีอยู่หรือสร้างบัญชีใหม่
หากคุณสร้างบัญชีใหม่ ให้เลือกตำแหน่งการรายงานของ Analytics จากนั้นยอมรับการตั้งค่าการแชร์ข้อมูลและข้อกำหนดของ Google Analytics สำหรับโปรเจ็กต์
-
คลิกสร้างโปรเจ็กต์ (หรือเพิ่ม Firebase หากใช้โปรเจ็กต์ Google Cloud ที่มีอยู่)
Firebase จะจัดสรรทรัพยากรสำหรับโปรเจ็กต์ Firebase โดยอัตโนมัติ เมื่อขั้นตอนเสร็จสมบูรณ์ ระบบจะนำคุณไปที่หน้าภาพรวมของโปรเจ็กต์ Firebase ในคอนโซล Firebase
ขั้นตอนที่ 0 (ไม่บังคับ): สร้างที่เก็บ GitHub และเว็บแอป
หากคุณยังไม่มีเว็บแอปที่อยู่ในที่เก็บ GitHub หรือหากต้องการลองใช้ขั้นตอนกับแอปตัวอย่าง ให้เริ่มต้นโดยเริ่มต้นหนึ่งในตัวอย่างของเราสำหรับ Next.js หรือ Angular ดังนี้
npm init @apphosting
คุณเรียกใช้แอปตัวอย่างในเครื่องโดยใช้ next dev
หรือ ng start
ได้ หากต้องการดำเนินการต่อ ให้สร้างที่เก็บ GitHub ใหม่และพุชโค้ดตัวอย่างเริ่มต้นไปยังที่เก็บดังกล่าว
ขั้นตอนที่ 1: สร้างแบ็กเอนด์การโฮสต์แอป
แบ็กเอนด์การโฮสต์แอปคือคอลเล็กชันของทรัพยากรที่มีการจัดการซึ่งโฮสติ้งแอปสร้างขึ้นเพื่อสร้างและเรียกใช้เว็บแอป คุณจะสร้างและแสดงรายการแบ็กเอนด์การโฮสต์แอปได้โดยใช้คอนโซล 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 ที่มีการรวม Branch ของฟีเจอร์หรือ Branch ของการพัฒนา
ยอมรับหรือปฏิเสธการเปิดตัวอัตโนมัติ
การเปิดตัวอัตโนมัติจะเปิดใช้โดยค่าเริ่มต้น เมื่อสร้างแบ็กเอนด์เสร็จแล้ว คุณเลือกให้แอปใช้งานได้กับโฮสติ้งแอปทันที
ขั้นตอนที่ 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 วิธีทำการทดสอบการตั้งค่าโฮสติ้งแอป
- ใน GitHub ให้พุชการเปลี่ยนแปลงไปยังสาขาที่เผยแพร่อยู่ของเว็บแอป
- เปิดแท็บโฮสติ้งแอปในคอนโซล Firebase แล้วเลือกดูแดชบอร์ดสำหรับแบ็กเอนด์ รายการตารางจะแสดงคอมมิตเฉพาะที่เชื่อมโยงกับการเปิดตัวที่ทริกเกอร์โดยการเปลี่ยนแปลง
ขั้นตอนถัดไป
- เจาะลึกยิ่งขึ้น เรียนรู้ใน Codelab ของ Firebase ที่ผสานรวมแอปที่โฮสต์เข้ากับฟีเจอร์การตรวจสอบสิทธิ์ Firebase และ AI ของ Google: Next.js | Angular
- เชื่อมต่อโดเมนที่กำหนดเอง
- กำหนดค่าแบ็กเอนด์
- ตรวจสอบการเปิดตัว การใช้งานเว็บไซต์ และบันทึก