Firebase Hosting ทำงานร่วมกับเว็บเฟรมเวิร์กสมัยใหม่ยอดนิยม ซึ่งรวมถึง Angular และ Next.js การใช้ Firebase Hosting และ Cloud Functions for Firebase กับเฟรมเวิร์กเหล่านี้ จะช่วยให้คุณพัฒนาแอปและไมโครเซอร์วิสในสภาพแวดล้อมเฟรมเวิร์กที่ต้องการ แล้วทำให้ใช้งานได้ในสภาพแวดล้อมเซิร์ฟเวอร์ที่มีการจัดการและปลอดภัย
การรองรับระหว่างการแสดงตัวอย่างก่อนเปิดตัวนี้รวมถึงฟังก์ชันการทำงานต่อไปนี้
- ทำให้เว็บแอปที่ประกอบด้วยเนื้อหาเว็บแบบคงที่ใช้งานได้
- ทำให้เว็บแอปที่ใช้การแสดงผลล่วงหน้า / การสร้างเว็บไซต์แบบคงที่ (SSG) ใช้งานได้
- ทำให้เว็บแอปที่ใช้การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ซึ่งเป็นการแสดงผลแบบเต็มบนเซิร์ฟเวอร์ตามความต้องการใช้งานได้
Firebase มีฟังก์ชันการทำงานนี้ผ่าน Firebase CLI เมื่อเริ่มต้นใช้งาน Hosting ในบรรทัดคำสั่ง คุณจะต้องระบุข้อมูลเกี่ยวกับโปรเจ็กต์เว็บใหม่หรือที่มีอยู่ และ CLI จะตั้งค่าทรัพยากรที่เหมาะสมสำหรับเว็บเฟรมเวิร์กที่คุณเลือก
ก่อนเริ่มต้น
โปรดอ่านข้อกำหนดและตัวเลือกต่อไปนี้ก่อนเริ่มทำให้แอปใช้งานได้ใน Firebase
- Firebase CLI เวอร์ชัน 12.1.0 ขึ้นไป ตรวจสอบว่าได้ติดตั้ง CLI โดยใช้วิธีที่ต้องการ
- ไม่บังคับ: เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ Firebase (จำเป็นหากคุณวางแผนที่จะใช้ SSR)
ให้บริการในเครื่อง
คุณสามารถทดสอบการผสานรวมในเครื่องได้โดยทำตามขั้นตอนต่อไปนี้
- เรียกใช้
firebase emulators:startจากเทอร์มินัล ซึ่งจะสร้างแอปและ ให้บริการโดยใช้ Firebase CLI - เปิดเว็บแอปที่ URL ในเครื่องที่ CLI แสดงผล (โดยปกติคือ http://localhost:5000)
ทำให้แอปใช้งานได้ใน Firebase Hosting
เมื่อพร้อมที่จะแชร์การเปลี่ยนแปลงกับคนทั่วโลกแล้ว ให้ทำให้แอปใช้งานได้ในเว็บไซต์จริงโดยทำดังนี้
- เรียกใช้
firebase deployจากเทอร์มินัล - ตรวจสอบเว็บไซต์ที่
SITE_ID.web.appหรือPROJECT_ID.web.app(หรือโดเมนที่กำหนดเอง หากคุณตั้งค่าไว้)
กำหนดค่าสภาพแวดล้อมต่างๆ
คุณสามารถทำให้ตัวแปรสภาพแวดล้อมหลายชุดใช้งานได้สำหรับสภาพแวดล้อมของโปรเจ็กต์ต่างๆ เช่น สภาพแวดล้อมการทดสอบและสภาพแวดล้อมจริง
เครื่องมือนี้รองรับรูปแบบไฟล์ dotenv สำหรับการโหลดตัวแปรสภาพแวดล้อมที่ระบุไว้ในไฟล์ .env เช่นเดียวกับ Cloud Functions for Firebase
- หากคุณมีนามแฝงโปรเจ็กต์
stagingคุณจะทำให้ตัวแปรสภาพแวดล้อมจากไฟล์.env.stagingใช้งานได้ - หากคุณมีนามแฝงโปรเจ็กต์
productionคุณจะทำให้ตัวแปรสภาพแวดล้อมจากไฟล์.env.productionใช้งานได้ - หากคุณมีโปรเจ็กต์ที่มีรหัส
PROJECT_IDคุณจะทำให้ตัวแปรสภาพแวดล้อมจากไฟล์.env.PROJECT_IDใช้งานได้
ดูคำแนะนำโดยละเอียดได้ในเอกสารประกอบของ Cloud Functions
ขั้นตอนถัดไป
ดูคำแนะนำโดยละเอียดสำหรับเฟรมเวิร์กที่ต้องการได้ที่นี่