หากมีแอป Next.js หรือ Angular ที่มีอยู่ (Next.js เวอร์ชัน 13 ขึ้นไปหรือ Angular 17.2 ขึ้นไป) ในที่เก็บ GitHub การเริ่มต้นใช้งาน App Hosting จะง่ายดายเพียงการสร้างแบ็กเอนด์ App Hosting แล้วเริ่มการเปิดตัวด้วยการพุชไปยังสาขาที่ใช้งานจริง หากไม่มีแอป ให้ใช้แอปตัวอย่างของเราเพื่อทําตามขั้นตอนที่อธิบายไว้ในคู่มือนี้
ก่อนเริ่มต้น
คุณต้องสร้างโปรเจ็กต์ Firebase (หากยังไม่มี) และอัปเกรดเป็นแพ็กเกจ Blaze ก่อนจึงจะตั้งค่า Firebase App Hosting ได้
วิธีสร้างโปรเจ็กต์
-
ในคอนโซล 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: สร้างแบ็กเอนด์ App Hosting
App Hostingแบ็กเอนด์คือคอลเล็กชันของทรัพยากรที่มีการจัดการซึ่ง App Hosting สร้างขึ้นเพื่อสร้างและเรียกใช้เว็บแอป คุณสามารถสร้างและแสดงรายการApp Hostingแบ็กเอนด์ได้โดยใช้คอนโซล Firebase หรือ Firebase CLI
คอนโซล 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 ที่เผยแพร่แล้ว คุณจะทริกเกอร์การเปิดตัวเว็บแอปเวอร์ชันใหม่ได้เมื่อใดก็ตามที่พุชการเปลี่ยนแปลงไปยัง Branch ที่เผยแพร่อยู่ของที่เก็บ GitHub วิธีทดสอบการตั้งค่า App Hosting
- ใน GitHub ให้พุชการเปลี่ยนแปลงไปยังสาขาที่ใช้งานจริงของเว็บแอป
- เปิดแท็บ App Hosting ในคอนโซล Firebase แล้วเลือกดูแดชบอร์ดสําหรับแบ็กเอนด์ รายการตารางจะแสดงการคอมมิตที่เฉพาะเจาะจงซึ่งเชื่อมโยงกับการเปิดตัวที่เกิดจากการเปลี่ยนแปลงของคุณ
ขั้นตอนถัดไป
- เจาะลึก: ดู Codelab ของ Firebase ที่ผสานรวมแอปที่โฮสต์กับฟีเจอร์ Firebase Authentication และ AI ของ Google ดังนี้ Next.js | Angular
- เชื่อมต่อโดเมนที่กำหนดเอง
- กำหนดค่าแบ็กเอนด์
- ตรวจสอบการเปิดตัว การใช้งานเว็บไซต์ และบันทึก