Try   HackMD

將 Vue 專案部屬到 firebase Hosting 上

tags : w3HexSchool . vue . firebase

當 vue 專案完成後 , 想要讓別人可以看到成品 , 又不想公開原始碼時 , 可以選擇以下其中一種免費的部屬方式 ,

  • Firebase Hosting
  • heroku

由於 heroku 免費版 , 每 30 分鐘會休眠 , 要處理此問題會有點複雜 , 所以我們使用 Firebase Hosting 部屬我們的專案

註冊 Firebase

註冊頁面 : https://firebase.google.com/

只要你有 google 帳號 , 你可以用 google 帳號 , 直接建立一個 Firebase 帳號

Firebase Hosting 的建立 & 管理

Firebase > Project > Hosting

開始使用

設定 Firebase Hosting

安裝 firebase-tools

安裝 node.js 後 , 可能需要執行下方 4 行指令完成 firebase Hosting 專案建立 & 部屬

npm install -g firebase-tools firebase login firebase init firebase deploy

讓我們一行一行的分析各自的功用

  • 下載 firebase-tools
npm install -g firebase-tools

在命令提示字元中登入 firebase

使用 firebase login 可以在命令提示字元中登入 firebase

firebase login

跳出視窗 , 登入 firebase

准許 firebase 的執行授權

完成登入

firebase init

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 上

查看成品

參考資料

FireBase 價目表

Sprak Blaze
價格 免費 每月 $0 美元 用多少,付多少
Cloud Functions 只能串接 google service 的 webhook $0.12/GB

https://firebase.google.com/docs/hosting/quickstart