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

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

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

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

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

หากคุณเพิ่งเริ่มใช้ Firebase หรือ Cloud

ทำตามขั้นตอนต่อไปนี้หากคุณเพิ่งเริ่มใช้ Firebase หรือ Google Cloud
คุณยังทำตามขั้นตอนเหล่านี้ได้หากต้องการสร้างโปรเจ็กต์ Firebase ใหม่ทั้งหมด (และโปรเจ็กต์ Google Cloud ที่เกี่ยวข้อง)

  1. ลงชื่อเข้าใช้คอนโซล Firebase
  2. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ Firebase ใหม่

  3. ป้อนชื่อโปรเจ็กต์ในช่องข้อความ

    หากคุณเป็นส่วนหนึ่งของGoogle Cloudองค์กร คุณสามารถเลือกโฟลเดอร์ที่จะสร้างโปรเจ็กต์ได้

  4. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase จากนั้นคลิกต่อไป
  5. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase") ซึ่งจะช่วยให้คุณเริ่มต้นใช้งานและ เพิ่มประสิทธิภาพกระบวนการพัฒนาได้

  6. (ไม่บังคับ) ตั้งค่า Google Analytics สำหรับโปรเจ็กต์ ซึ่งจะช่วยให้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้นเมื่อใช้ผลิตภัณฑ์ Firebase เหล่านี้ Firebase A/B Testing Cloud Messaging Crashlytics In-App Messaging และ Remote Config (รวมถึง การปรับเปลี่ยนในแบบของคุณ)

    เลือกบัญชี Google Analytics ที่มีอยู่ หรือสร้างบัญชีใหม่ หากสร้างบัญชีใหม่ ให้เลือก Analyticsสถานที่ตั้งการรายงาน จากนั้นยอมรับการตั้งค่าการแชร์ข้อมูลและGoogle Analyticsข้อกำหนด สำหรับโปรเจ็กต์

  7. คลิกสร้างโปรเจ็กต์

Firebase จะสร้างโปรเจ็กต์ จัดสรรทรัพยากรเริ่มต้นบางส่วน และ เปิดใช้ API ที่สำคัญ เมื่อกระบวนการเสร็จสมบูรณ์ ระบบจะนำคุณไปยังหน้าภาพรวมของโปรเจ็กต์ Firebase ในFirebaseคอนโซล

โปรเจ็กต์ Cloud ที่มีอยู่

ทำตามขั้นตอนต่อไปนี้หากต้องการเริ่มใช้ Firebase กับGoogle Cloudโปรเจ็กต์ที่มีอยู่ ดูข้อมูลเพิ่มเติมเกี่ยวกับ "การเพิ่ม Firebase" ลงในโปรเจ็กต์ Google Cloud ที่มีอยู่

  1. ลงชื่อเข้าใช้คอนโซล Firebase ด้วยบัญชีที่ให้สิทธิ์เข้าถึงโปรเจ็กต์ Google Cloud ที่มีอยู่
  2. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ Firebase ใหม่
  3. ที่ด้านล่างของหน้า ให้คลิก เพิ่ม Firebase ไปยังโปรเจ็กต์ Google Cloud
  4. ในช่องข้อความ ให้เริ่มป้อนชื่อโปรเจ็กต์ของโปรเจ็กต์ที่มีอยู่ แล้วเลือกโปรเจ็กต์จากรายการที่แสดง
  5. คลิกเปิดโปรเจ็กต์
  6. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase จากนั้นคลิกต่อไป
  7. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase") ซึ่งจะช่วยให้คุณเริ่มต้นใช้งานและ เพิ่มประสิทธิภาพกระบวนการพัฒนาได้

  8. (ไม่บังคับ) ตั้งค่า Google Analytics สำหรับโปรเจ็กต์ ซึ่งจะช่วยให้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้นเมื่อใช้ผลิตภัณฑ์ Firebase เหล่านี้ Firebase A/B Testing Cloud Messaging Crashlytics In-App Messaging และ Remote Config (รวมถึง การปรับเปลี่ยนในแบบของคุณ)

    เลือกบัญชี Google Analytics ที่มีอยู่ หรือสร้างบัญชีใหม่ หากสร้างบัญชีใหม่ ให้เลือก Analyticsสถานที่ตั้งการรายงาน จากนั้นยอมรับการตั้งค่าการแชร์ข้อมูลและGoogle Analyticsข้อกำหนด สำหรับโปรเจ็กต์

  9. คลิกเพิ่ม Firebase

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สร้างขึ้นเพื่อสร้างและเรียกใช้เว็บแอป

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

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

firebase apphosting:backends:create --project PROJECT_ID

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

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

    โดยปกติแล้ว package.json จะอยู่ในโฟลเดอร์นี้

  • ตั้งค่าสาขาที่ใช้งานจริง

    นี่คือ Branch ของที่เก็บ 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}

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

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

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

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