Skip to main content

Firebase Hosting


[Firebase Hosting] คืออะไร มาทำความรู้จัก และมาใช้งานเบื้องต้นกัน


image.png


ถ้ามีคนถามว่า Firebase คืออะไรนี่คือคำตอบเบื้องต้นสำหรับทุกคน

Firebase Hosting คือ Tools สำหร้บสร้าง Hosting ที่สะดวกและเป็นที่นิยมของ Firebase โดยเราสามารถใช้งานเบื้องต้นได้แบบไม่มีค่าใช้จ่าย ซึ่งสามารถทำให้เรามีหน้าเว็บไซต์ที่สมบูรณ์และพัฒนาไปต่อได้ แต่ก็มีข้อจำกัดในด้านการทำงานหลายๆ อย่างซึ่ง หากต้องการใช้ Feature เพิ่มเติมสามารถตรวจสอบที่ Firebase pricing ของตัว Firebase ได้เลยครับ

. . .


การสร้าง Firebase Project

สำหรับการสร้าง​ Firebase เบื้องต้นเราสามารถดูวิธีการสร้างต่างๆ ในการทำและการสร้างโปรเจคได้ใน Book เล่มนี้ใน หน้าก่อนหน้าที่จะถึงเพื่อเป็นแนวทางในการใช้งานต่อไป

. . .


เริ่มใช้งาน Firebase Hosting

เมื่อสร้าง Project เสร็จแล้ว กลับมาที่หน้า Project Overview ให้มองหาเมนู Hosting และจะคลิกที่ Card หรือที่ Sidebar ก็ได้ครับ

Screenshot 2565-11-10 at 22.45.34.png


เมื่อเข้ามาสู่หน้า Hosting เราจะพบกับหน้าจอดังภาพด้านล่าง คลิกที่ เริ่มต้นใช้งาน



Screenshot 2565-11-10 at 22.38.24.png



ขั้นตอนการใช้งาน firebase Hosting 


1.ติดตั้ง Node.js เพื่อเรียกใช้งาน Node package Manager

โดยเราจะเริ่มต้นด้วยการติดตั้งตัว Node.js เป็นอันดับแรก หากยังไม่ได้ติดตั้งสามารถติดตั้งได้ที่ Node.JS ซึ่งสาเหตุที่เราต้องติดตั้งตัว Node.js ก่อนเป็นเพราะว่าการติดตั้งตัว Package firebase ที่เป็นปัจจุบันจำเป็นต้องทำการติดตั้งผ่านทาง NPM โดยสามารถเช็ค ว่ามี Node.js บนเครื่องของเราแล้วหรือยังแล้วหรือยังโดยการใช้งานคำสั่ง 


node --version 
npm --version

หมายเหตุ: version ขั้นต่ำของ Node ที่รองรับคือ 6.0.0


image.png

เมื่อ run command ผ่านผลลัพธ์จะได้แบบนี้

2. ติดตั้ง Firebase CLI

Run คำสั่งใน terminal /cmd เพื่อทำการติดตั้งตัว FIrebase CLI ได้เลยด้วยคำสั่ง

npm install -g firebase-tools

หมายเหตุ: แนะนำให้อัพเดต Firebase CLI ด้วยคำสั่งนี้สม่ำเสมอ เนื่องจากจะได้ผลประโยชน์จากการอัพเดต patch ทำให้ได้รับการแก้ Bug และ features ใหม่ทำให้ทันสมัยอยู่สม่ำเสมอ 


Screenshot 2565-11-10 at 23.45.46.png

จากนั้นก็เช็คว่าตัวเครื่องของคุณได้ทำการติดตั้ง Firebase CLI เรียบร้อยแล้วหรือไม่ด้วยการรันคำสั่ง (ถ้าผ่านจะเห็นเลย เวอร์ชั่นของ Firebase แบบชัดเจน

firebase --version


Screenshot 2565-11-11 at 00.40.31.png

3. Initial Project

เริ่มต้นให้ run คำสั่งด้านล่างนี้ใน terminal หรือ commandline โดย browser จะปิดขึ้นมาแล้วให้คุณ Login ด้วย account เดียวกับที่ทำการสร้างโปรเจค

firebase login

Screenshot 2565-11-11 at 00.41.50.png

เมื่อ run command  firebase login จะเด้งหน้า authentication ของ google ขึ้นมาก็สามารถ Login ได้ด้วย email ที่ทำการผูกกับ project ไว้

 จากนั้นทำการสร้าง directory ที่จะเก็บไฟล์ แล้วก็ทำการ shell เข้าไปที่ directory นั้น 

mkdir Hosting
cd Hosting/

เมื่อเข้าไปที่ directory ที่ต้องการแล้วให้ทำการ initial project ด้วยการใช้คำสั่ง 

firebase init

จะเจอคำว่า Firebase เป็นไฟ LED เท่ๆ พร้อมแบบเมนูให้เลือก feature ของ Firebase CLI ที่ต้องการใช้งาน โดยให้เลือก Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys แล้ว enter ไปแต่ก่อน enter อย่าลืมเลือกด้วยการกด spacebar ก่อนการกด enter 


Screenshot 2565-11-11 at 00.44.50.png

และเลือก Use an existing project เพื่อเลือก Project ที่มีอยู่ในตัว Console ของ Firebase เพื่อทำการใช้งาน Project ของเราและจากนั้นก็จะเจอส่วนที่ให้เลือก project ที่มีใน Firebase console  เลือกและกด Enter ไปตามเคย

Screenshot 2565-11-11 at 00.49.38.png

ถัดไปจะพบคำถามที่ว่าต้องการสร้าง Folder ชื่ออะไร โดย Firebase CLI ส่วนมากจะตั้งชื่อ Public มาให้ซึ่งจะเปลี่ยนก็ได้ แต่ก็ไม่ได้จำเป็นต้องเปลี่ยนขนาดนั้น และหลังจากนั้นก็จะเจอส่วนที่ถามว่าจะให้ rewrite url ทั้งหมดไปที่ index.html ไหมซึ่ง Firebase CLI จะแนะนำอยู่แล้วว่าให้ตอบ No ก็ตอบไปตามนั้นเลยก็จะติดตั้งเสร็จเรียบร้อย


Screenshot 2565-11-11 at 00.54.58.png

ภาพตอน initial project เสร็จเรียบร้อย

หลังจากติดตั้งทั้งหมดเรียบร้อยแล้วเรามาดุกันดีกว่าว่าในโปรเจ็คของเราอ่ะมีไฟล์อะไรมาบ้าง 


Screenshot 2565-11-11 at 00.57.40.png


  • public/:  folder ที่เอาไว้ใช้สำหรับการเก็บรวบรวมไฟล์ static ต่างๆ โดยเริ่มต้นจะได้ index.html และ 404.html มา
  • .gitignore: เอาไว้ระบุไฟล์ที่ไม่สนใจในการเอาขึ้น git 
  • .firebaserc : ไฟล์ที่ระบุ ID ของโปรเจคไว้ใน Firebase


// ค่าเริ่มต้นของไฟล์ .firebaserc
{
  "projects": {
    "default": "<YOUR_PROJECT_ID>"
  }
}
  • firebase.json: ไฟล์ที่ระบุโฟลเดอร์ในการแสดงผลเว็บไซต์(public), การระบุไฟล์ที่ไม่ต้องการ deploy, การ redirect, การ rewrite url, การกำหนด headers และการระบุ target ในกรณีทำ Multiple sites
// ค่าเริ่มต้นของไฟล์ firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

4. Deply website

เริ่มจากการเปิด terminal/cmd แล้ว shell ไปที่ root ของโฟลเดอร์โปรเจคในขั้นตอนที่ 3 จากนั้นรันคำสั่ง

firebase deploy

หรือถ้าใครมี folder firebase Hosting และ cloud functions for firebase อยู่ใน root เดียวกัน และต้องการ reply เฉพาะเว็บไซต์ก็สามารถรันคำสั่ง

firebase deploy --only hosting

ตัว Firebase CLI จะทำการ deploy file ทั้งหมดยกเว้นไฟล์ที่ ignore ไว้ใน firebase.json ขึ้น server ซึ่งถ้า deploy success ตัว FirebaseCLI จะคืน URL ของเว็บมาให้


Screenshot 2565-11-11 at 01.08.48.png

หมายเหตุ : Firebase CLI ตั้งแต่ v4.2.0 ขึ้นไปจะ deploy เร็วมากกกกกก และจะเลือก deploy เฉพาะไฟล์ใหม่และไฟล์ที่มีการเปลี่ยนแปลง 


ลองเปิด URL ดูสักหน่อย

Screenshot 2565-11-11 at 01.11.25.png

เว็บเราสามารถใช้ได้แล้วดีใจ😊

นอกจากนี้ถ้าเราเข้าไปที่  Firebase console เลือกเมนุ Hosting จะเจอรายละเอียด domian และ ประวัติการ deploy ทั้งหมดของเรา

Screenshot 2565-11-11 at 01.13.35.png

. . .


การ Custom Domain

ในกรณีที่เราทำการจด domain ของตัวเองไว้แล้ว และต้องการทีจะนำมาผูกกับตัว Firebase Hosting เราก็สามารถทำได้โดยการคลิกที่ปุ่ม "Connect domain" ตามรุป 

 

Screenshot 2565-11-11 at 01.15.54.png

จากนั้นให้ระบุ domain ของคุณ โดยหากต้องการให้ domain สุดท้ายตัด www ออกให้กรอก domain ตามตัวอย่างด้านล่างนี้ แล้วกด continue

Screenshot 2565-11-11 at 01.19.07.png

 

จากนั้นไปเพิ่ม TXT ให้กับ DNS ที่จก domain มาแล้ว verify

Screenshot 2565-11-11 at 01.20.27.png

 

หาก verify ผ่านแล้วก็จะเจอหน้าที่ให้เอาข้อมูล A record ไปกรอกเพิ่มใน DNS ก็กรอกให้เรียบร้อยและกด Finish ได้เลยหลังจากกรอกเสร็จก็รอประมาณ 5 นาทีจะเห็นเป็น status "Need setup " จากนั้น Firebase Hostinf จะทำการ provision ตัว ssl ให้กับ domain ซึ่งจะเสร็จใน 24 ชม.

 

image.png

image.png

รูปภาพประกอบจากพี่ jirawatee Google developer expert firebase