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

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

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

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

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

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

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

Cloud Shell

ขั้นตอนที่ 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 เป็น โซลูชันการนำไปใช้งานที่แนะนำสำหรับแอปเฟรมเวิร์กแบบ Full-Stack คุณสามารถดำเนินการตั้งค่า App Hosting ต่อหรือใช้ Hosting (Classic) ต่อสำหรับการนำไปใช้งานแบบคงที่เท่านั้น

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

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

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

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

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

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

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

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

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

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

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