# 將 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](https://firebase.google.com/) > Project > Hosting

開始使用

## 設定 Firebase Hosting


### 安裝 firebase-tools

- 下載 & 安裝 `node.js`
https://nodejs.org/zh-tw/download/

安裝 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 價目表](https://firebase.google.com/pricing?authuser=0)
|| Sprak | Blaze |
|--| ----------------- |:----------------------- |
|價格| 免費 每月 $0 美元 | 用多少，付多少 |
| Cloud Functions | 只能串接 google service 的 webhook | $0.12/GB |

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