Firebase-202 สร้าง Serverless API ด้วย Cloud Functions

ในปัจจุบันการเขียน Web Frontend เนี่ยค่อนข้างง่ายและสะดวกสบายมากแล้ว เพราะเวลาเราจะเอาขึ้น Host เพื่อให้คนอื่นไปทดลองใช้นั้นทำได้ด้วยบริการ Static Host มากมายที่ทั้งฟรีและง่ายสุดๆ ไม่ว่าจะเป็น Firebase Hosting หรือ Netlify

แต่สำหรับฝั่งหลังบ้านหรือ API นั้นการจะหา Host หรือเขียนขึ้นมาลองอะไรง่ายๆ นิดๆหน่อยๆนั้นค่อนข้างจะยุ่งยากกว่า Frontend อยู่พอสมควร แต่จริงๆมันก็มีบริการอยู่บ้างแหละใช่ว่าจะไม่มีเลยอย่าง Cosmic.js ก็พอโอเค …แต่วันนี้เราจะมาพูดเรื่อง Serverless กัน มันคือ ? ก็ตามชื่อเลยครับ การเขียน API โดยไม่ต้องมี Server !!

ความหมายจริงๆน่าจะหมายถึงการเขียน API โดยไม่ต้อง Build หรือ Maintain Server เองมากกว่า.. เราโฟกัสแค่การเขียน Code ก็พอ ที่เหลือเรื่อง Scaling, Management ต่างๆก็ให้เป็นหน้าที่ของ Service Provider เป็นคนจัดการซะ ในปัจจุบันบริการเหล่านี้ก็มีอยู่มากมายอย่าง AWS Lambda Functions, Google Cloud Functions และแน่นอนพระเอกของเราในวันนี้อย่าง Firebase Cloud Functions

ทำไมถึงเลือกใช้ Firebaase ก็แน่นอนครับจุดเด่นของ Firebase คือ…

ง่าย… ฟรี… และ แหล่มเป็ด

อย่างที่บอกบางทีเราต้องการจะขึ้นอะไรง่ายๆ ก็ต้องการอะไรง่ายๆ มันจะได้เสร็จเร็ว ได้ลองเร็ว และปรับตัวได้เร็ว ซึ่ง Firebase ตอบโจทย์ในเรื่องนี้นั่นเอง

เริ่ม !! สมัคร และ ติดตั้ง Firebase

ก็ไม่มีอะไรมากสมัคร Gmail และเข้า Firebase Console จากนั้นทำการ login อะไรให้เรียบร้อยก็จะขึ้นหน้าต่างตามนี้

จากนั้นก็สร้างโปรเจคซะให้เรียบร้อย (อย่าลืมชื่อโปรเจคซะละ) เป็นอันเสร็จสิ้น กลับมาที่เครื่องของเราสร้าง folder ตั้งชื่อะไรก็แล้วแต่แป๊ะ… จากนั้นเปิด terminal ขึ้นมาเพราะเราต้องติดตั้ง firebase cli ด้วย npm ถ้าใครยังไม่ติดตั้ง node ก็ไปติดตั้งกันก่อนเด้อ ถ้าใครที่ลง node & npm ไว้อยู่แล้วก็รันคำสั่งด้านล่างโลด

npm install -g firebase-tools

เมื่อเรียบร้อยแล้ว ก็ต้อง login ก่อน ก็ใช้คำสั่ง

firebase login

จากนั้นก็ follow โฟลว authentication ของมันไปจนจบ เราก็จะสามารถสร้างโปรเจคผ่าน cli ได้ด้วยคำสั่ง…

firebase init

ก็จะขึ้นหน้าต่างดังนี้

เลือกไปที่ Functions เคาะ Spacebar 1 ทีจากนั้นกด Enter มันจะให้เลือก Firebase Project (ที่เราสร้างไว้ตอนแรกผ่านเว็บ) ก็เลือก และ follow ตามไปจนจบ (ตอบ y ไปรัวๆ) มันก็จะสร้าง folder และ file ต่างๆที่จำเป็นให้เรา ก็เป็นอันเสร็จสิ้น

Implement API เสร็จได้ใน 10 นาที !!

เมื่อติดตั้งเรียบร้อยก็เข้าไปที่ functions/index.js

ใครทำถูกจะได้ตามนี้เบย จากนั้นเปิด comment ตรง code ตัวอย่าง…จบ !!!

เสร็จแล้วก็…สั่ง firebase deploy และก็รอ…

ปล. ถ้าใคร deploy แล้ว error RESOURCE_DIR อะไรสักอย่างให้ไปที่ firebase.json ลบในส่วนของ predeploy ทิ้งไปเลย ให้เหลือแค่นี้พอ

{
"functions": {}
}

เมื่อ deploy เรียบร้อยแล้วก็จะขึ้น url มาพร้อมใช้งานได้ทันที

https://us-central1-fire-api-cloud-fn.cloudfunctions.net/hello/

ลองเข้าโลด เดวจะหาว่าโม้ น่อววววว

อธิบายง่ายๆคือใน onRequest เราจะเขียนอะไรก็ได้ครับมองว่าเป็น Code หลังบ้านธรรมดาๆที่เขียนด้วย JavaScript นั่นเอง ถ้าคุณจะต่อเบส หรือ ให้มันทำงานอะไรก็แค่มีพื้นฐาน Node.js ก็พอ ติดตั้งนู่นนี่นั่นผ่าน npm แล้วก็ Implement ไปตามน้ำโลด เป็นไงล่ะไม่ถึง 5 นาทีด้วยซ้ำเนี่ยได้ endpoint ง่ายๆมาใช้งานกันละ

ยกระดับ API ด้วย Express.js

ผมลองไล่ตาม docs ของ firebase ดูเหมือนว่า onRequest ข้างต้นมันจะใช้งานได้เฉพาะ methods GET ซึ่งถ้างานของเราซับซ้อนกว่านั้นเราสามารถนำ Express.js เข้ามาใช้เพื่อทำให้ API ของเราครบเครื่องขึ้นได้ !!

ในจุดนี้การติดตั้งทุกอย่างนั้นเหมือนเดิมเลยครับ แค่เปลี่ยนวิธีการเขียนเท่านั้นเอง ก็ไปที่ไฟล์ index.js เดิมแล้วก็เอา express เข้ามาใส่ ง่ายๆ อะไรยังงั้นเลยครับ (อย่าลืม npm install ก่อนล่ะ) มาครับ มาลองดู Code กันหน่อย

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const app = express();
// Automatically allow cross-origin requests
app.use(cors({ origin: true }));
// build multiple CRUD interfaces:
app.get('/', (req, res) => {
res.send('Hello GET by noomerZx')
});
app.post('/', (req, res) => {
res.send('Hello POST by noomerZx')
});
app.put('/', (req, res) => {
res.send('Hello PUT by noomerZx')
});
app.patch('/', (req, res) => {
res.send('Hello PATCH by noomerZx')
});
app.delete('/', (req, res) => {
res.send('Hello DELETE by noomerZx')
});
// Expose Express API as a single Cloud Function:
exports.hello = functions.https.onRequest(app);

เราสามารถใช้ความสามารถต่างๆของ express ได้ตามปกติเลยครับ เช่น การทำ route หรือ การเขียน middleware มาขั้นอะไรทำนองนี้ ส่วนขั้นตอนการ deploy ก็เหมือนเดิมครับคำสั่งเดียว firebase deploy เป็นอันเสร็จสิ้นได้ url มาเหมือนเดิม

https://us-central1-fire-api-cloud-fn.cloudfunctions.net/hello/

ง่ายเหมือนปลอกมะเขือเข้าปากเลยใช่มะ ตรง exports เราสามารถ export เป็นหลายๆ function อีกทีก็ได้นะ จากตัวอย่างคือจะเป็น export function hello หรือ /hello/ นั่นเอง

ปล. การจะเรียกใช้งานนั้น.. ต้องเป็น url ตามด้วย / ตามด้วยชื่อ function และตามด้วย / อีกทีเท่านั้นนะครับ จากตัวอย่างของผมก็จะได้ว่า url/hello/ ถ้าเรียกผ่าน url/hello เฉยๆมันจะหา endpoint ไม่เจอเด้อออ

สรุป

จริงๆแล้วใน firebase console ยังมี monitoring tool ต่างๆเพื่อดู request ที่เข้ามาที่ functions ของเราได้อีก นับว่าสะดวกสบายสุดๆ แทบจะไม่ต้องทำอะไรเองกันแล้วครับเนี่ย ทีนี้หวังว่าข้อมูลจะเป็นประโยชน์กับเพื่อนๆไม่มากก็น้อยนะครับ ถ้าใครจะใช้จริงจังหรือมี request หนักๆอย่าลืมเช็ค pricing กันด้วยนะคร๊าบเพราะมัน free แบบมี limit แต่ก็จะมากพอและเหลือเฟือสำหรับ prototyping app หรือทำอะไรเล็กๆเล่นๆ

สุดท้ายมีอะไรก็ติชมกันได้ครับ หรือใครมีทริคอะไรเด็ดๆ แจ่มๆ ก็มาแนะนำกันได้ที่ comment เหมือนเดิมครับผม

--

--

--

เรื่องเล่าประสบการณ์จากการคลุกคลานของทีมงานที่อยากจะเติบโตไปด้วยกัน

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
noomerZx

noomerZx

Software Engineer, Blogger, Runner

More from Medium

Get your Serverless API in the Cloud

Continuous Deployment Pipeline for React App on AWS S3 + CloudFront

API GATEWAY WITH COGNITO AUTHORIZATION

Passing Environment Variables to NodeJS APIs Running on AWS App Runner