Firebase Hosting 靜態網站部署試用
曾經用舊版 Firebase 做了個即時線上聊天室，對於後端技能零分的人來說，的確是個很不錯的服務。在整併到 Google 大改版之後，現在也有靜態網頁的 Hosting 跟各種資源的 Storage，以及其他 Native App 的周邊服務。
Firebase 的英文教學文件非常仔細，我就先從 Hosting 服務開始試用起。在創建專案之後，必須先下載 Firebase CLI Tools 到本機上，該命令列工具運行環境需要安裝 Node.js 跟 npm（這裡假設已經完成安裝和設定）。
$ npm install -g firebase-tools
這樣就可以使用 firebase 指令了。
首先，建立一個新目錄。
$ mkdir firebaseTest
接著，跟任何軟體一樣，第一次使用當然要先登入驗證身份。Firebase 直接用 google 帳號就可以了。
firebaseTest $ firebase login
登入過程中，Firebase 會問你能不能匿名收集使用資料，選擇 yes（無論你選哪個都會被 Google 出賣）。
? Allow Firebase to collect anonymous CLI usage information? Yes
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=xxxxx
Waiting for authentication…
✔ Success! Logged in as example@gmail.com
再來，確認你身分無誤後，第一次總是要初始化。
firebaseTest $ firebase init
一串帥氣酷炫的火焰文字立馬映入眼簾，初始化程序就此展開：
You’re about to initialize a Firebase project in this directory:
/PATH/firebaseTest
問你要怎麼設定這個資料夾，本文是選 hosting。
? What Firebase CLI features do you want to setup for this folder? Hosting: Configure and deploy Firebase Hosting sites
接下來就是一堆說明資訊。詢問你要跟 Firebase Console 上創建的哪個專案做連結，這邊用 test 做為專案名稱：
=== Project Setup
First, let’s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use — add,
but for now we’ll just set up a default project.
? What Firebase project do you want to associate as default? test (test–xxxx)
重點來了！Hosting 的設定從建立一個 public 資料夾開始，然後將所有路徑設定到 index.html，這樣就完成初始化。
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote public/index.html
i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…
✔ Firebase initialization complete!
最後一步，部屬你的靜態檔案到 Firebase 上。在該資料夾 public 目錄中已經建立了一個 index.html，打開編輯器修改或將已完成的靜態檔案存成 index.html 覆蓋上去。然後就可以部署。
firebaseTest $ firebase deploy
處理程序如下所示。將檔案部署到剛剛的 test（test-xxxx）專案，最下面的兩個 URL 就是已部署的靜態網頁網址以及控制台網址。
=== Deploying to ‘test-xxxx’…
i deploying hosting
✔ database: rules ready to deploy.
i hosting: preparing public directory for upload…
✔ hosting: 1 files uploaded successfully
i starting release process (may take several minutes)…
✔ Deploy complete!
Hosting Site: https://test-xxxx.firebaseapp.com
Dashboard: https://console.firebase.google.com/project/test-xxxx/overview
Visit the URL above or run firebase open
接著打開瀏覽器複製上面的 hosting site URL 就會看到靜態網頁已經公開展示給全世界了。
使用 Firebase 自然不是為了他的靜態網頁 hosting，而是其他功能及服務。本文做為初探新版 Firebase 的第一篇文章。之後會陸續把試用心得寫完（應該吧XD）。
