เมื่อใช้แอป 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
- เชื่อมต่อโดเมนที่กำหนดเอง
- กำหนดค่าแบ็กเอนด์
- ตรวจสอบการเปิดตัว การใช้งานเว็บไซต์ และบันทึก