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

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

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

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

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

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

firebase deploy --only hosting

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

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

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

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

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