สร้าง Vue.js app และทำการ Deploy ด้วย Firebase Hosting
Vue.js เป็น JavaScript framework หรือ JavaScript library ในการสร้าง User interfaces ตอนแรกจุดประสงค์ของ Vue.js สร้างขึ้นมาเพื่อเป็น tool ในการสร้าง prototype ให้ได้เร็วและง่าย มาถึงทุกวันนี้ Vue.js สามารถสร้าง app ที่ scalable และ app ที่มีความซับซ้อนมากๆได้ วันนี้เราจะมาทำการสร้าง Vue.js App และทำการ Deploy ด้วย Firebase Hosting กันแบบง่ายๆกัน ไม่ต้องเกริ่นอะไรมาก เริ่มกันเลยครับ
Creating A Vue Application
ในการสร้าง Vue App เราจะใช้ Vue CLI กันนะครับ สำหรับใครที่ยังไม่เคยลง Vue CLI ก่อนอื่นต้องทำการ install vue-cli ก่อนครับ
$ npm install --global vue-cliจากนั้นห็ทำการสร้าง Vue app ของเราด้วย CLI เราสามารถตั้งชื่อ project ได้ตามต้องการเลยนะครับ ในที่นี้ผมใช้ vue-fire-hosting สำหรับบทความนี้ เราจะไม่ทำการ install Vue-router นะครับ
$ vue init webpack vue-fire-hostingจากนั้นก็กด Enter เรื่อยๆ ส่วนไหนที่เราไม่ต้องการก็พิมพ์ n แล้วกด Enter ครับ
หลังจากเราทำการสร้าง app ของเราแล้ว เราก็จะมาทำการ install dependencies กันเลยครับ
$ cd vue-fire-hosting
$ npm installสำหรับวิธีการ run app
$ npm run devจากนั้นทำการเปิด browser ไปที่ http://localhost:8080 ก็จะได้ page หน้าตาแบบนี้
Creating Firebase Project in the Firebase Console
จากที่เราได้ทำการสร้าง Vue Application เสร็จแล้ว เราก็จะมาทำการสร้าง Firebase Project กัน โดยเข้าไปที่ https://console.firebase.google.com/ จากนั้นทำการคลิกเพิ่มโครงการ ตั้งชื่อโครงการ เลือกประเทศ และสุดท้ายกดสร้างโครงการเป็นอันเรียบร้อยครับ
Deploy a Vue App with Firebase Hosting
จากที่เราสร้าง Vue app และสร้าง Firebase Project เรียบร้อยแล้ว ขั้นตอนสุดท้าย เราจะทำการ Deploy Vue app ของเราด้วย Firebase Hosting กันครับ สำหรับใครที่ยังไม่ได้ install firebase-tool ก็ทำการ install firebase-tools ให้เรียบร้อยนะครับ
$ npm install -g firebase-toolsจากนั้นก็ทำการ authentication ให้เรียบร้อยด้วย
$ firebase loginเสร็จแล้วก็ทำการ run command ที่ root vue app ของเรา
$ npm run buildหลังจากที่เรา run command npm run build ก็จะทำการสร้าง dist folder และไฟล์อื่นๆที่พร้อมสำหรับทำการ deploy แล้ว
dist
├── index.html
└── static
├── css
│ ├── app.45f0fc50d0a2f0a47dd5a3491bec2cad.css
│ └── app.45f0fc50d0a2f0a47dd5a3491bec2cad.css.map
└── js
├── app.64455e174b55c2587622.js
├── app.64455e174b55c2587622.js.map
├── manifest.202f7abda7fbfa08548c.js
├── manifest.202f7abda7fbfa08548c.js.map
├── vendor.71def9dc5ca93375ca2c.js
└── vendor.71def9dc5ca93375ca2c.js.mapจากนั้นก็ทำการ initial ด้วยการ run command firebase init
$ firebase initจากนั้นก็ทำการเลือก ❯◯ Hosting: Configure and deploy Firebase Hosting sites กด Enter และเลือก Firebase Project (vue-fire-hosting) ที่เราสร้างไว้ หลังจากที่เรากด Enter เราจะได้ไฟล์ .firebaserc และ firebase.json เพิ่มเข้ามาใน directory ของเรา
จากนั้นเปิดไฟล์ firebase.json พร้อมทำการ Configure ชี้ไปที่ dist folder ที่ได้จากการ build แบบนี้
{
"hosting": {
"public": "./dist"
}
}และทำการ deploy ด้วยคำสั่ง
$ firebase deploy
เสร็จแล้ว เราก็จะได้ Hosting URL มา จากนั้นทำการเปิด browser ไปที่ https://vue-fire-hosting-214a2.firebaseapp.com (ปล. URL ตรงนี้จะขึ้นกับ Firebase project ของแต่ละคนนะครับ) ก็จะได้ vue-fire-hosting ของเราเรียบร้อยแล้ว
ในการ Deploy ใน version ถัดไปของ app เราก็แค่ run command npm run build และ firebase deploy ก็จะทำการ deploy version ให้เราครับ
ทำการเปิดไฟล์ src/components/Hello.vue จากนั้นทำการแก้ข้อความ Welcome to Your Vue.js App ในบรรทัดที่ 28 เป็นคำว่า Deploy Vue.js App ด้วย Firebase Hosting เสร็จแล้ว run command
$ npm run build
$ firebase deployจากนั้นทำการ Refresh หน้า https://vue-fire-hosting-214a2.firebaseapp.com ก็จะได้ app version ใหม่แบบนี้ เป็นอันเรียบร้อย
สำหรับบทความนี้ก็จะเป็นตัวอย่างง่ายๆในการสร้าง Vue Application และทำการ Deploy ด้วย Firebase Hosting ผิดพลาดประการใดก็ขออภัยไว้ ณ ที่นี้ด้วยนะครับ ไว้เจอกันบทความหน้า
