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

หากมีแอป 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

คอนโซล 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 แล้วเลือกดูแดชบอร์ดสําหรับแบ็กเอนด์ รายการตารางจะแสดงการคอมมิตที่เฉพาะเจาะจงซึ่งเชื่อมโยงกับการเปิดตัวที่เกิดจากการเปลี่ยนแปลงของคุณ

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