วิธีเปลี่ยน URL ของ Google Cloud Function ให้เป็นโดเมนของเราเอง

เป้าหมายของเรา

เปลี่ยนจาก URL ยาวๆ แบบนี้:

https://us-central1-lanxync.cloudfunctions.net/callGetTextFromPDF

ให้เป็น URL สั้นๆ ที่ใช้โดเมนของเราเอง:

https://lanxync.com/callGetTextFromPDF

ทำไมต้องทำแบบนี้?

URL เดิมของ Cloud Function มันยาวและจำยากใช่ไหมครับ การเปลี่ยนมาใช้โดเมนตัวเองมีข้อดีหลายอย่าง:

สวยและจำง่าย ใช้ในเอกสาร API หรือส่งให้ลูกค้าก็ดูเป็นมืออาชีพกว่า
ซ่อนโครงสร้างเบื้องหลัง คนภายนอกไม่รู้ว่าเราใช้ Google Cloud อยู่ ย้าย backend ทีหลังก็ไม่กระทบ URL
เลี่ยงปัญหา CORS เพราะ frontend กับ API อยู่โดเมนเดียวกัน (same-origin) เลยไม่ต้องตั้งค่า CORS ให้ปวดหัว

เตรียมก่อนเริ่ม

ก่อนลงมือ เช็กให้ครบก่อนนะครับ:

มีโปรเจกต์ Firebase ที่อยู่บนแพลน Blaze (จ่ายตามใช้จริง) เพราะ Cloud Functions ต้องใช้แพลนนี้
เชื่อมโดเมนของเรา (เช่น lanxync.com) เข้ากับ Firebase Hosting เรียบร้อยแล้ว
รู้ชื่อ function และ region ที่ deploy ไว้ (เช่น us-central1)

ขั้นตอนการทำ (4 ขั้นตอน)

1. Deploy Cloud Function ก่อน

อัปโหลด function ที่ต้องการขึ้น Google Cloud Functions ให้เรียบร้อย
ตรวจสอบว่า function ทำงานได้ปกติ

2. เตรียม Firebase Hosting

ตั้งค่า Firebase Hosting ให้พร้อมใช้งาน
เชื่อมโยงโดเมนของคุณ (lanxync.com) เข้ากับ Firebase Hosting

3. ตั้งค่าเส้นทาง (Routing) ใน firebase.json

เพิ่มส่วน rewrites เข้าไปในไฟล์ firebase.json:

{
   "hosting": [
      {
         "target": "lanxync",
         "public": "web/dist",
         "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
         ],
         "rewrites": [
            {
               "source": "/callGetTextFromPDF{,/**}",
               "function": "callGetTextFromPDF"
            },
            {
               "source": "**",
               "destination": "/index.html"
            }
         ]
      }
   ]
}

หมายเหตุ:

source: "/callGetTextFromPDF{,/**}" = เมื่อมีคนเข้า URL ที่ขึ้นต้นด้วย /callGetTextFromPDF
function: "callGetTextFromPDF" = ให้ส่งต่อไปที่ function ชื่อ callGetTextFromPDF
{,/**} = รองรับทั้งแบบมี path ต่อท้ายหรือไม่มีก็ได้

4. Deploy และทดสอบ

firebase deploy --only hosting

Deploy เว็บไซต์ขึ้น Firebase Hosting
ทดสอบเรียกใช้ผ่าน URL ใหม่ที่ https://lanxync.com/callGetTextFromPDF

ใช้ Firebase Hosting เป็นตัวกลางรับ request จากโดเมนของเรา แล้วส่งต่อไปที่ Cloud Function ที่ต้องการ

ข้อควรระวังและแก้ปัญหาที่เจอบ่อย

function ต้องอยู่ region เดียวกับที่ Hosting รองรับ Firebase Hosting เชื่อมตรงได้กับ function ที่อยู่ใน us-central1. ถ้า function อยู่ region อื่น อาจต้องใช้ Cloud Run หรือย้าย region ก่อน
เรียกแล้วขึ้น 404 ส่วนใหญ่มาจาก source ใน rewrites ไม่ตรงกับชื่อ function หรือลำดับ rewrites ผิด (ตัว "**" ต้องอยู่ล่างสุดเสมอ ไม่งั้นมันจะดักทุก request ไปที่ index.html ก่อน)
โดนแคช Hosting แคชแรงมาก ถ้าแก้แล้วยังเห็นของเก่า ลองเปิดแบบ incognito หรือเติม query string มั่วๆ ต่อท้ายเพื่อ bypass แคช
Cold start รอบแรกที่เรียกอาจช้าหน่อยเพราะ function ต้องตื่นขึ้นมาก่อน เป็นเรื่องปกติของ serverless

อ่านรายละเอียดทางการเพิ่มเติมได้ที่ Firebase Hosting: Connect Cloud Functions

ผมใช้วิธีนี้กับโปรเจกต์ LanXync ของตัวเองอยู่ เพราะไม่อยากให้ URL ของ API โผล่ว่าเป็น cloudfunctions.net แล้วก็ช่วยตัดปัญหา CORS ไปได้เลยเพราะอยู่โดเมนเดียวกับเว็บ ตั้งครั้งเดียวจบ ใช้ยาวๆ คุ้มมากครับ

เปลี่ยน URL Cloud Function เป็นโดเมนของเราเอง