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

Firebase Hosting ช่วยให้คุณโฮสต์เนื้อหาแบบคงที่ของแอป (HTML, CSS, JavaScript, ไฟล์สื่อ ฯลฯ) รวมถึง แสดงเนื้อหาแบบไดนามิกและโฮสต์ไมโครเซอร์วิสได้อย่างรวดเร็ว ปลอดภัย และเชื่อถือได้

การโฮสต์ระดับเวอร์ชันที่ใช้งานจริงของเราได้รับการสนับสนุนจากเครือข่ายการนำส่งเนื้อหา (CDN) ทั่วโลก Hosting จะแสดงเนื้อหาผ่าน SSL โดยค่าเริ่มต้น และสามารถใช้ กับ โดเมนที่กำหนดเอง หรือโดเมนย่อยของโปรเจ็กต์ได้โดยไม่มีค่าใช้จ่ายใน web.app และ firebaseapp.com

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

คุณต้อง สร้างโปรเจ็กต์ Firebaseก่อนจึงจะตั้งค่าFirebase Hostingได้

ขั้นตอนที่ 1: ติดตั้ง Firebase CLI

ไปที่เอกสารประกอบของ Firebase CLI เพื่อดูวิธี ติดตั้ง CLI หรือ อัปเดตเป็นเวอร์ชันล่าสุด

ขั้นตอนที่ 2: เริ่มต้นโปรเจ็กต์

หากต้องการเชื่อมต่อไฟล์โปรเจ็กต์ที่อยู่ในเครื่องกับโปรเจ็กต์ Firebase ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ที่อยู่ในเครื่อง

firebase init hosting

ระหว่างการเริ่มต้นโปรเจ็กต์ ให้ทำดังนี้จากข้อความแจ้งของ Firebase CLI

  1. เลือกโปรเจ็กต์ Firebase ที่จะเชื่อมต่อกับไดเรกทอรีโปรเจ็กต์ที่อยู่ในเครื่อง

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

  2. ระบุไดเรกทอรีที่จะใช้เป็นไดเรกทอรีรูทสาธารณะ

    ไดเรกทอรีนี้จะมีไฟล์แบบคงที่ทั้งหมดที่แสดงต่อสาธารณะ รวมถึงไฟล์ index.html และเนื้อหาอื่นๆ ที่คุณต้องการนำไปใช้งานกับ Firebase Hosting

    • แอปแบบคงที่: หากคุณกำลังนำแอปแบบคงที่ไปใช้งาน ให้ทำดังนี้

      • ไดเรกทอรีรูทสาธารณะเริ่มต้นจะชื่อว่า public

      • คุณระบุไดเรกทอรีรูทสาธารณะได้ตอนนี้หรือคุณจะ ระบุในภายหลังในไฟล์การกำหนดค่า firebase.json

      • หากคุณเลือกค่าเริ่มต้นและยังไม่มีไดเรกทอรีที่ชื่อว่า public Firebase จะสร้างไดเรกทอรีดังกล่าวให้คุณ

      • หากคุณยังไม่มีไฟล์ index.html หรือไฟล์ 404.html ที่ถูกต้องในไดเรกทอรีรูทสาธารณะ Firebase จะสร้างไฟล์ดังกล่าวให้คุณ

    • เลือกใช้ App Hosting: หาก CLI ตรวจพบฟีเจอร์ของ เว็บเฟรมเวิร์ก SSR เช่น Next.js หรือ Angular Universal ระบบอาจแนะนำให้เริ่มต้น Firebase App Hosting แทน App Hosting เป็นโซลูชันการนำไปใช้งานที่ แนะนำสำหรับแอปเฟรมเวิร์กแบบเต็มสแต็ก คุณสามารถดำเนินการตั้งค่า App Hosting ต่อหรือใช้ Hosting (แบบคลาสสิก) ต่อไปสำหรับการนำไปใช้งานแบบคงที่เท่านั้น

  3. เลือกการกำหนดค่าสำหรับเว็บไซต์

    หากคุณเลือกสร้างแอปหน้าเดียว Firebase จะเพิ่ม การกำหนดค่าการเขียนใหม่ให้คุณโดยอัตโนมัติ

เมื่อสิ้นสุดการเริ่มต้น Firebase จะสร้างและเพิ่มไฟล์ 2 ไฟล์ลงในรูทของไดเรกทอรีแอปในเครื่องโดยอัตโนมัติ ดังนี้

ขั้นตอนที่ 3: นำไปใช้งานกับเว็บไซต์

หากต้องการนำไปใช้งานกับเว็บไซต์ ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง

firebase deploy --only hosting
 --only hosting,functions

คำสั่งนี้จะนำเนื้อหาและการกำหนดค่า Hosting ไปใช้งานกับโดเมนย่อยที่ Firebase จัดสรรให้ต่อไปนี้

  • PROJECT_ID.web.app
  • PROJECT_ID.firebaseapp.com

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

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

ตอนนี้เว็บไซต์ของคุณพร้อมให้คนทั่วโลกเข้าชมแล้ว