w3HexSchool
. vue
. firebase
當 vue 專案完成後 , 想要讓別人可以看到成品 , 又不想公開原始碼時 , 可以選擇以下其中一種免費的部屬方式 ,
- Firebase Hosting
- heroku
由於 heroku 免費版 , 每 30 分鐘會休眠 , 要處理此問題會有點複雜 , 所以我們使用 Firebase Hosting 部屬我們的專案
註冊頁面 : https://firebase.google.com/
只要你有 google 帳號 , 你可以用 google 帳號 , 直接建立一個 Firebase 帳號
Firebase > Project > Hosting
開始使用
node.js
安裝 node.js 後 , 可能需要執行下方 4 行指令完成 firebase Hosting 專案建立 & 部屬
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
讓我們一行一行的分析各自的功用
firebase-tools
npm install -g firebase-tools
使用 firebase login
可以在命令提示字元中登入 firebase
firebase login
跳出視窗 , 登入 firebase
准許 firebase 的執行授權
完成登入
firebase init
Firebase 上有許多功能可以使用 , 這次我們只選擇 Hosting 吧 !
(Press <space> to select, <a> to toggle all, <i> to invert selection)
如果要管理的網頁是 vue 或 react 這類的 SPA 頁面 , 記得設定 rewrite 時要打 yes
設定完成後 , 在根目錄中會多出 firebase.json
& .firebaserc
檔案
// firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
// .firebaserc
{
"projects": {
"default": "your-project-name"
}
}
在 package.json 中加上 deploy
的 script
"scripts": {
...
"deploy": "firebase deploy",
},
執行 npm run build && npm run deploy
後 , 即可編譯且部屬專案到 firebase Hosting 上
查看成品
Sprak | Blaze | |
---|---|---|
價格 | 免費 每月 $0 美元 | 用多少,付多少 |
Cloud Functions | 只能串接 google service 的 webhook | $0.12/GB |