Firebase Hosting—วิธีการสร้างหลาย Web Sites ใน Firebase Project เดียว

Firebase Hosting—วิธีการสร้างหลาย Web Sites ใน Firebase Project เดียว

a·ดัม Blog

สวัสดีครับเพื่อนๆ มาเจอกันอีกแล้วสำหรับบทความเกี่ยวกับ Firebase ❤️‍🔥 สำหรับใครสาย Web App แบบผมและใช้งาน Firebase คงจะคุ้นเคยกับบริการที่ครบจบที่เดียวของ Firebase เป็นอย่างดี และบริการหนึ่งที่ผมชอบมากคือ Firebase Hosting ที่ชอบเพราะฟรี!!! 🤑 สำหรับ Firebase Hosting ถ้าหากใน Project ของเราต้องการกำหนด Link URL แต่ละ Web Page แยกกันแล้ว Firebase สามารถทำการสร้าง Multiple Sites ในหนึ่ง Project ได้เลยครับ มาลองดูกันว่ามีวิธีการทำอย่างไร 🎢

ผมขอเริ่มต้นจากการที่ผมมี Web App ที่ใช้งานบ่อยๆ อยากจะนำมารวมไว้ใน Project เดียว โดยผมสร้างหน้า Home Page และกำหนดให้มี Link URL ไปหน้า Web Page ที่กำหนดแบบนี้

ผมกำหนดโครงสร้าง Folder ของ Project ของผมแบบนี้ซึ่งจะมีหน้า Web Page จำนวน 3 หน้า โดยให้ Home Page เป็นหน้าหลักตามรูปด้านบนซึ่งแต่ละ Web Page Folder ก็จะมีไฟล์ของแต่ละโปรเจคแยกกัน

My Web App
 +- home-page/
 |
 +- thailand-search-app/
 |
 +- todo-list-app/

1. เตรียม Project

เริ่มต้นจากการเพิ่ม Project จากหน้า Firebase Console ได้เลยครับ 3 Step ง่ายๆ

2. ติดตั้ง Firebase และ Initial Firebase

2.1 ติดตั้ง Firebase โดยให้ Terminal จาก Folder นั่นคือ My Web App และพิมพ์คำสั่ง

$ npm install -g firebase-tools

2.2 หลังจากที่เสร็จก็ทำการ Initial Firebase ด้วยคำสั่ง

$ firebase init

2.3 ทำการเลือกใช้งาน Firebase Hosting แต่ถ้าจะใช้งานบริการอื่นๆ ด้วยก็เลือกได้ตามสะดวกเลยครับ

2.4 เลือก Project ที่ได้สร้างไว้แล้วที่ Firebase Console

2.5 จะมีคำถามหลักๆ ที่ต้องตอบ

  • กำหนด Public Folder ในที่นี้ผมกำหนดเป็น home-page
  • ถ้าใน folder public มี index.html แล้วก็เลือก Yes
  • สำหรับการ deploy ผ่าน Github ก็ไม่ต้องการใช้งานก็เลือก No
  • เนื่องจากมีไฟล์ index.html แล้ว จำให้เขียนทับหรือไม่ก็เลือก No
  • หลังจากผ่านคำถามามากมาย ผลที่ได้ก็จะได้ ไฟล์ firebase.json , .firebaserc

2.6 ใน Folder home-page ผมได้แก้ไขเนื้อหาในไฟล์ index.html ตามที่ต้องการ แล้วจึงทำการ Deploy ขึ้นไปที่ Firebase Hosting ด้วยคำสั่ง

$ firebase deploy --only hosting

ถ้าหาก Deploy สำเร็จ เมื่อกลับไปที่หน้า Firebase Console จะพบว่า Web Page ที่ทำการติดตั้งขึ้นมาให้เรียบร้อยครับ

2.7 จากนั้นให้เลื่อนหน้าจอลงไปด้านล่างสุดจะมีเมนู Add another site ให้เราเพิ่ม Web Page อื่นๆ ได้ครับ

2.8 ทำการเพิ่ม Web Page ให้ครบตามต้องการได้เลย ในที่นี้ผมมี Web App ที่ต้องการเพิ่มจำนวน 2 Project ซึ่งในรูปที่ขีดเส้นใต้ไว้จะได้ใช้กำหนดในข้อ 3.2 ครับ

3. ตั้ง deploy targets สำหรับ Web Page อื่นๆ

3.1 ตั้งค่า Target ในไฟล์ firebase.json ดังนี้

  • กำหนด target ให้แต่ละหน้า Web Page
  • กำหนด Public Folder ให้ตรงตาม Folder ที่เก็บไฟล์ index.html ของแต่ละ Web Page
{
  "hosting": [
    {
      "target": "my-web-app",
      "public": "home-page",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "thailand-search-app",
      "public": "thailand-search-app",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "ninja-todo-list-app",
      "public": "todo-list-app",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

3.2 กำหนด Deploy Target ให้ตรงกันโดยคำสั่งมีโครงสร้างแบบนี้

$ firebase target:apply hosting TARGET_NAME RESOURCE_NAME
  • TARGET_NAME : คือค่า target ในไฟล์ firebase.json ในข้อ 3.1 หมายถึงต้นทางที่จะ Deploy
  • RESOURCE_NAME : คือค่าที่ขีดเส้นใต้ในข้อ 2.8 ซึ่งหมายถึงปลายทางที่เราต้องการ Deploy ขึ้นไป

สามารถพิมพ์คำสั่งได้ 3 คำสั่ง ดังนี้

$ firebase target:apply hosting my-web-app my-web-app-28c39
$ firebase target:apply hosting thailand-search-app thailand-search-app
$ firebase target:apply hosting ninja-todo-list-app ninja-todo-list-app

พิมพ์คำสั่งเพื่อ Deploy ทั้งหมด

$ firebase deploy --only hosting

ถ้าหาก Deploy สำเร็จจะได้ Link URL แต่ละ Web Page มาใช้งานได้เลยแบบนี้

3.3 จากนั้นผมทำการแก้ไขไฟล์ index.html ใน Folder home-page และต้องการ Deploy เฉพาะหน้า Web Page นี้ ก็ทำได้โดยพิมพ์คำสั่ง

$ firebase deploy --only hosting:TARGET_NAME

นั่นคือ

$ firebase deploy --only hosting:my-web-app

หลังจาก Deploy สำเร็จก็จะได้ Web Page แต่ละ Project ที่มี Link URL แยกกัน แต่อยู่บน Firebase Project เดียวครับ จะได้ไม่ต้องมาสร้าง Project ใหม่ๆ หากเรามีการทำ Web App ไว้ไใช้งานหลายๆ อัน

ท้ายสุด เป็นอย่างไรบ้างครับกับบริการ Firebase Hosting ที่ทั้งสะดวก และมีการบริการที่หลากหลาย ตรงตามความต้องการ และที่สำคัญ ฟรี!!! 🤑 ก็หวังว่าบทความนี้จะเป็นประโยชน์และแนวทางให้เพื่อนๆ นำไปต่อยอดในงานของตัวเองได้นะครับ Happy Learning…Happy Coding…🎢

อ้างอิง
1. https://firebase.google.com/docs/hosting/multisites
2. https://fireship.io/lessons/deploy-multiple-sites-to-firebase-hosting/

ฝากร้านหนังสือมือสองของผมด้วยครับ เป็นหนังสือซื้อมาอ่านเอง แล้วต้องการขายต่อในราคาที่เป็นกันเอง เพื่อนๆ ที่สนใจสามารถติดตามหนังสือที่จะขาย และสั่งซื้อได้ที่ https://shop.line.me/@921ijoic

โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
http://bit.ly/36q8A12