มาทำ Nuxt.js SSR ผ่าน Firebase กันเถอะ

มาอธิบายกันก่อนว่า Nuxt คืออะไร Nuxt คือ Frontend Framework ที่มี Base เป็น Javascript ที่เกิดจากการต่อยอดมาจาก Vue ซึ่ง Nuxt ถ้าพูดง่ายๆก็คือขั้นกว่าของ Vue แต่โปรเจคไหนไม่จำเป็นต้องทำ SSR ก็ใช้ Vue ก็เพียงพอแล้วหรือจะทำ Nuxt เป็น CSR ก็ได้เผื่ออนาคตอยากทำเป็น SSR จะได้ปรับแต่งนิดหน่อย

SSR (Server Side Rendering) ก็คือการ render web ผ่าน server เมื่อ render เสร็จก็แสดงผลทันที ทำให้ฝั่ง client ไม่ต้องทำงานหนัก เหมาะสำหรับทำ Dynamic Web เช่นสร้าง Web มาอันนึงแล้วอยากแสดง Og ต่างๆของ link ต่างกันเพื่อบริการลูกค้าต่างๆ และเหตุผลอีกอันคือการทำ SEO

CSR (Client Side Rendering) ก็คือการ render web ผ่าน browser นั้นๆเลยซึ่งถามว่าช้ากว่า SSR ไหมก็นิดหน่อยแต่ไม่ใช่ประเด็น ตัว CSR ไม่ได้เหมาะกับทำ SEO และไม่ได้ทำ Dynamic Og ของเว็บจะยึดหน้า Static ไว้หน้าเดียวเลย ซึ่งก็ต้องมาดูโปรเจคที่ใช้อีกทีว่าต้องการทำ Dynamic Og หรือ ต้องการทำ SEO ไหม

Firebase คือผลิตภัณฑ์ของ Google ที่มีหลาย service อยู่ข้างใน แต่ที่ผมจะนำมาใช้กับบทความนี้มี 2 อย่าง Firebase Functions และ Firebase Hosting

Firebase Functions คือบริการที่ทำงานในฝั่ง server ไม่ว่าจะการทำ API หรือการทำ SSR ซึ่งข้อดีของบริการนี้ทำการ auto scaling ให้เราทำให้เราไม่ต้องมาดูแลเลย

Firebase Hosting คือบริการ web hosting

ทำไมถึงเลือกใช้ Nuxt.js + Firebase สำหรับผมเหมาะสำหรับคนไม่อยากตั้ง server ข้อดีมากๆเลยเราไม่ต้อง maintain เวลาลาพักร้อนจะได้สบายใจ 555+ แต่ก็นั้นแหละครับ product เราเราเลือก tech เองได้ แต่ถ้าลูกค้าอยากตั้ง Server เองอันนั้นเราก็ต้องทำให้นะ 555+ มาเริ่มกันเลยครับเกริ่นนำไปเยอะแล้ว

1. เริ่มแรกเราก็สร้าง project nuxt กันได้เลย

npx create-nuxt-app nuxt-x-firebase

2. ต่อมาก็ทำการสร้าง project firebase และ ลงเครื่องมือของ firebase และทำการ init ให้เรียบร้อย
ซึ่งไปสร้าง ผ่าน https://console.firebase.google.com/ ได้เลยหน้าตาจะประมาณนี้

ให้ทำการสร้างโปรเจคให้เรียบร้อยซึ่งผมสร้างไว้ชื่อว่า firebasessrtest

และปรับให้เป็น blaze ให้เรียบร้อยเพื่อที่จะใช้ firebase functions + firebase hosting

npm install -g firebase-tools
cd nuxt-x-firebase
firebase init

ซึ่งเราจะเลือก Functions และ Hosting

และเลือกโปรเจคที่เรามีอยู่แล้วโดยผมใช้ชื่อว่า firebasessrtest

จะได้หน้าตาออกมาประมาณนี้

ต่อมาเราทำการเปลี่ยน code ใน functions/index.js

***ซึ่งข้อควรระวังตอนนี้ตัว firebase hosting รองรับ firebase functions ที่เป็น default หมายถึง region ที่เป็น us-central1 ซึ่งเป็นค่า default อยู่แล้วไม่ต้องทำอะไร แหล่งอ้างอิง https://firebase.google.com/docs/hosting/full-config?hl=en ถ้าใส่ region อื่นพังพินาศ 555+

ต่อมาต้องเปลี่ยนแปลงให้ค่าใน functions/package.json อย่างน้อยต้องมี package ที่ลงให้ nuxt ทุกอัน

อันนี้คือหน้าตาของ package functions

อันนี้หน้าตา package nuxt

เราจะทำการย้าย package nuxt ไป merge กับ package functions ซึ่งจะได้หน้าตาแบบด้านล่างนี้

จากนั้น เข้าไปใน function แล้วทำการ install

cd functions
npm install

3. ต่อมาจะทำเขียนคำสั่ง .bat เพื่อนำไปใช้ deploy โดยสร้าง file มา 2อันชื่อ functions.bat และ hosting.bat

โดยที่ file functions.bat จะมีหน้าตาดังนี้

และ file hosting.bat

จากนั้นเข้าไปแก้ file firebase.json ซึ่งตรง hosting จะมีการชี้ไปที่ firebase functions ที่เราสร้างไว้ซึ่งข้างต้นผมตั้งชื่อว่า ssrapp

จากนั้นก็ใส่ script ใน package นิดหน่อยเพื่อให้ง่ายต่อการ deploy

"deploy": "firebase deploy --only functions && firebase deploy --only hosting"

และเปลี่ยนค่าใน file nuxt.config จาก export default{} มาเป็น module.exports={} เพราะอะไรถึงเปลี่ยนเพราะว่า firebase functions เราเขียนเป็น ES5 แต่ Nuxt default ของมันคือ ES6 เราต้องปรับ nuxt.config.js ให้เป็น ES5 ให้เรียบร้อย

เมื่อปรับทุกอย่างเสร็จเราก็ทำการ deploy ได้เลย

npm run deploy

หลังจาก deploy เสร็จแล้วจะได้ url ของเว็บ hosting มาเพื่อใช้งาน

ถามว่าเสร็จหรือยังยังครับต้องเข้าไป set ค่าใน google cloud ก่อนหลังจาก deploy เสร็จ

หลังจากนั้นไปกำหน้า permissions ให้ app เข้าได้ทุกคน

ทำการแอด New principals เป็น allUsers และ Role เป็น Cloud Functions Inoker

เป็นอันเสร็จเรียบร้อยเราสามารถเข้า URL Hosting ได้แล้ว และเป็น SSR

มาต่อกันอีกหน่อยมาทำ SSR ให้เห็นภาพกันนิดหน่อยดีกว่า

โดยผมจะสร้าง folder และ _file.vue ไว้ดังภาพคือ pixel/_client.vue ตามภาพ

หลังจากนั้น ผมจะใส่ code ไปตามภาพด้านล่าง

asyncData คือ function ที่จะทำก่อน render page ขึ้นมาซึ่งจะเห็นได้ว่าผมใส่ params ไว้ 2 ตัว เพื่อจะให้ได้เห็นภาพ SSR ซึ่งถ้าใครทำ config ไว้ที่ database หรือไว้ที่ไหนก็ตามคุณก็จะทำ thumbnail ได้แบบ dynamic

ซึ่งผมได้ทำการ deploy และนำ link ไปวางบน Facebook

ซึ่งจะเห็นได้ว่าจาก code ผมเปลี่ยนแค่ title กับ description ซึ่งเมื่อเรานำ link ไปวางไว้ที่ไหนก็ตามที่มีการ Generate thumbnail ถ้าเรามีการแก้ code ไปแล้วพวก OG ต่างๆจะไม่ได้อัพเดทเพราะตาม platform ต่างๆจะมีการ cachce URL เวลาไม่เท่ากันบางที่ 1 เดือน บางที่ 1 วัน

ยกตัวอย่างเช่น line ผม test ตอนมันบัคแต่ line มันจำ url ไปแล้วกว่าจะอัพเดทอีกกี่ชม หรือกี่วันไม่รู้ ตามภาพด้านล่าง

วันนี้ก็จบไปแล้วนะครับขอบคุณที่อ่านมาจนถึงตรงนี้นะครับหวังว่าจะเป็นประโยชน์ไม่มากก็น้อยนะครับ ใครชอบแนวสาย serverless สามารถอ่านบทความอันอื่นผมต่อได้เลยนะครับ