สร้าง Multiple Sites ใน Firebase Hosting เบื้องต้น ตอนที่ 3

เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdee
firebase firebase hosting multiple site

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ firebase firebase hosting multiple site

ดูแล้ว 5,109 ครั้ง


จากตอนที่แล้ว เราได้ทำความรู้จัก และใช้งาน Hosting ใน
Firebase ไปแล้ว เนื้อหาต่อไปนี้ เราจะมาดูต่อเกี่ยวกับการ
สร้าง multiple site หรือการเพิ่มเว็บไซต์เข้าไปใน server
ที่อยู่ใน Firebase Project เดียวกัน 
    ทบทวนตอนที่แล้วได้ที่
    ใช้งาน Firebase Hosting ผ่าน Firebase CLI เบื้องต้น ตอนที่ 2 http://niik.in/967 
 
 
สมมติเราพัฒนาระบบอะไรสักอย่าง เราก็อยากจะมีเว็บไซต์ที่เป็น Static ไว้สำหรับประชาสัมพันธ์
ข้อมูลของงานหรือผลิตภัณฑ์ของเรา และก็อยากมีอีกเว็บไซต์หนึ่งที่เป็นแบบ Dynamic โต้ตอบ
การใช้งานกับผู้ใช้  ตัวอย่างเช่น เราใช้ชื่อเรียกเป็น web และ app ตามลำดับ
    และใน Firebase Hosting ก็รองรับการสร้าง multiple site หรือการเพิ่มเว็บไซต์เข้าไปใน server
เนื้อหาตอนที่แล้ว สมมติเราให้เป็นส่วนของ static เว็บไซต์ เราเรียกว่า web เนื้อหานี้ เราจะเพิ่มอีกเว็บไซต์
เป็นแบบ dynamic เราเรียกว่า app ดังนั้นเราจะทำการเพิ่ม site ใหม่เข้าไปดังนี้
 
 

การใช้งาน Multiple Site

    ให้เราไปที่เมนู Hosting ใน Firebase Console จะแสดง ชื่อของ Hosting site ที่เรากำลังใช้งานอยู่ กรณียังมีรายการ
เดียว ตามรูปด้านล่าง จะเป็น web-firebase-2eb84
 
 

 
 
    เราจะใช้ web-firebase-2eb84 เป็น web static และ เราจะสร้าง site ใหม่เพิ่มเข้ามา โดยเลื่อนลงมาด้านล่าง จะมีคำว่าา 
"Add another site" คลิกแล้วเลือกชื่อที่ต้องการ ในที่นี้จะใช้ชื่อคล้ายเดิม แต่เปลี่ยนเป็น app ดังนี้ "app-firebase-2eb84" 
โดยชื่อที่เรากำหนด สามารถกำหนดได้ตามต้องการ แต่ต้องไม่ซ้ำ จะมีขีดหรือไม่ก็ได้ 
 
 

 
 
    กด Add site รอสักครุ่ เมื่อทำการเพิ่ม site เรียบร้อยแล้ว หน้า Hosting จะแสดงลิสรายการของชื่อ Hosting Site แทน ดังนั้น
เมื่อเรากลับมายังหน้า Hosting เราต้องเลือกว่าจะจัดการ หรือใช้งาน Hosting Site ไหน
 
 

 
 
    เราลองคลิกเข้าไปที่ site ใหม่ที่เพิ่งเพิ่มเข้ามา จะเห็นว่า เรายังไม่ได้ทำการ deploy หรืออัพโหลดข้อมูล app ใดๆ ขึ้นมา ถ้าเรา
เข้ายัง url ที่เป็น domain เริ่มต้น เช่น https://app-firebase-2eb84.firebaseapp.com/ ก็จะแสดงข้อมูลตามรูปด้านล่าง
 
 

 
 
    ตอนนี้เราได้สร้าง multiple site ขึ้นมาเรียบร้อยแล้ว ในตัวอย่าง จะมี 2 Hosting site คือ
        -  app-firebase-2eb84
        -  web-firebase-2eb84
    เราจะเรียกค่าทั้งสองข้างต้นว่า resource-name
 
 

การกำหนด Deploy targets

    เมื่อเราเตรียม Hosting site เรียบร้อยแล้ว เราก็มาดูต่อในส่วนของการ deploy จากตอนที่แล้ว ในไฟล์ .firebaserc จะเป็นการ
กำหนดการจัดการต่างๆ ของการ deploy ค่าเริ่มต้น จะเป็นเพียงการระบุ project id ที่เป็นค่า default ที่เราใช้งานอยู่
 
{
  "projects": {
    "default": "web-firebase-2eb84"
  }
}
 
    และเป็น resource target เริ่มต้น ที่เมื่อเราทำคำสั่ง deploy โดยไม่ระบุ target name ก็จะเป็นการส่งไปยัง resource name หลัก
 
    ตอนนี้เรามีโฟลเดอร์ public สำหรับใช้กับ resource name [web-firebase-2eb84] ให้เราทำการสร้างโฟลเดอร์ด้านในอีก 2 โฟลเดอร์
ชื่อ app และ web โดยย้ายไฟล์ index.html และ 404.html ไปไว้ในโฟลเดอร์ web ส่วนโฟลเดอร์ app ที่จะใช้สำหรับใช้งานกับ [app-firebase-2eb84]
ให้สร้างไฟล์ index.html อย่างง่าย ดังตัวอย่างด้านล่าง
 
 

 
 
    ในโฟลเดอร์โปรเจ็คของเราตอนนี้ ก็จะมีโฟลเดอร์สำหรับ deploy ด้วยกัน 2 ส่วนคือ web และ app เราต้องทำการกำหนดชื่อ
หรือที่เรียกว่า target name สำหรับอ้างอิงไว้ในในการ deploy โดยใช้รูปแบบคำสั่ง ของ Firebase CLI ดังนี้
 
firebase target:apply type target-name resource-name
 
- type ก็คือ hosting
- target-name ชื่อที่เราต้องการ ที่สอดคล้องกับ resource จะใช้เป็น web และ app
- resource-name ชื่อ Hosting site (web-firebase-2eb84 | app-firebase-2eb84)
 
ดังนั้นเราจะได้คำสั่ง 2 คำสั่งตามลำดับการกำหนดดังนี้
 
firebase target:apply hosting web web-firebase-2eb84
 
และ
 
firebase target:apply hosting app app-firebase-2eb84
 
    รันคำสั่งผ่าน command line สังเกตว่าไฟล์  .firebaserc จะมีการอัพเดทรายการที่เรากำหนดตามรูปด้านล่าง
 
 

 
 
    หลังจากตั้งค่า deploy target ในไฟล์ Firebase resource เรียบร้อยแล้ว
    ต่อไปก็ไปตั้งค่าในไฟล์ firebase.json เพื่อใช้งาน deploy target โดยค่าเดิมเป็นดังนี้
 
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
 
    ก็ให้ปรับเป็น
 
{
  "hosting": [
    {
      "target": "app",       
      "public": "public/app",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
    },
    {
      "target": "web",      
      "public": "public/web",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
    }        
  ]
}
 
    เมื่อตั้งค่าเรียบร้อยแล้ว เราลองทดสอบดูว่า กำหนด target เรียบร้อยแล้วหรือไม่โดยใช้คำสั่ง
 
firebase target
 
    จะได้ผลลัพธ์ดังรูปแสดงรายการ target name และ target resource
 
 

 
 
    ทดสอบการทำงานบนเครื่องก่อน deploy ขึ้น server โดยใช้คำสั่ง
 
firebase serve
 
    การใช้คำสั่ง firebase serve โดยไม่ระบุ target name จะขึ้น url ของแต่ละ target ดังรูป
 
 

 
 
i  hosting[app]: Serving hosting files from: public/app
+  hosting[app]: Local server: http://localhost:5000
i  hosting[web]: Serving hosting files from: public/web
+  hosting[web]: Local server: http://localhost:5005
 
    เราสามารถนำ url ของ target ที่ต้องการไปเปิดบนบราวเซอร์เพื่อดูผลลัพธ์ได้
    หรือกรณีเราต้องการระบุ target ที่ต้องการทดสอบ ก็สามารถใช้รูปแบบคำสั่ง
 
firebase serve --only hosting:target-name
 
    เช่นต้องการดูในส่วนของ app ก็กำหนด target-name เป็น app
 
firebase serve --only hosting:app
 
    ก็จะขึ้นเฉพาะส่วนของ local server ของ app ดังรูป
 
 

 
 
    ในขณะที่เราเปิดใช้งานคำสั่ง firebase serve นั่นคือเราต้องเปิดส่วนของการทำงานใน terminal ทั้งไว้ เพื่อให้ server
ทำงานขณะที่ทดสอบ และถ้าต้องการออกจากการทำสอบ ก็สามารถกด Ctrl+C และเลือก Y เพื่อหยุดการทำงาน
กรณีเราต้องการใช้คำสั่ง command line ไปด้วย และให้ server รันไปด้วย เราจำเป็นต้องเปิดหน้าต่าง terminal อีกอันเพื่อ
ใช้งานแทน 
    สำหรับการทดสอบที่เครื่องแบบ local server จะไม่เป็นการ autorefresh นั้นคือเมื่อเราแก้ไขไฟล์แล้ว ต้องทำการรีเฟรสที่
บราวเซอร์เพื่ออัพเดท เพราะข้อมูลไม่ได้ sync กันอัตโนมัติ กรณีนี้ เราสามารถใช้ lite-server มาช่วยได้ 
 
 

การ Deploy target ขึ้น Hosting

    ตอนนี้เราทำการกำหนดทุกอย่างที่เครื่องเรียบร้อยแล้ว ต่อไปก็จะเป็นขั้นตอนสุดท้าย คือการ deploy ขึ้น server โดยใช้รูปแบบ
คำสังดังนี้
 
firebase deploy --only hosting:target-name
 
    เราจะลองอัพโหลดในส่วนของ app ขึ้นไป จะได้เป็น
 
firebase deploy --only hosting:app
 
    จะได้ผลลัพธ์ดังรูป
 
 

 
 
    ทดสอบเรียกใช้งานผ่าน บราวเซอร์ จะได้เป็น
 
 
 
 
    ตอนนี้เราก็สามารถใช้งาน multiple site ใน Firebase Hosting ได้แล้ว เป็นแนวทางสำหรับประยุกต์ใช้งานต่อไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ