如何使用firebase hosting架設靜態網站

今天來介紹一下firebase hosting這個服務,firbase hosting可以幫助我們直接用很簡單的方式把靜態網頁(html, js)部屬到到firebase上。
多簡單呢?只需要三個步驟就可以完成一個具有https加密的網站,還可以綁定自己的網址

  1. install
  2. init(包含 login)
  3. deploy

install

第一步需要安裝firebase-tools

1
npm install -g firebase-tools

init(包含 login)

第二步建立一個資料夾(demo-web)並登入firebase,在登入時它會詢問是否讓它匿名收集使用資訊,輸入Y or n選擇後會打開一個授權網頁,點選確認就完成登入了。
firebase auth
另外firebase綁定gmail,請事先先去申請一個。
有些時候我們可能會想要另外申請一個專門for firebase的google帳號,而該帳號又不是在你常用的瀏覽器(e.g., chrome)登入的話,可以複製terminal下的那一長串網址到其他的瀏覽器(e.g., firebase, safari)來登入。

1
2
3
4
5
6
7
8
9
10
$ mkdir demo-web
$ cd demo-web
$ firebase login
Allow Firebase to collect anonymous CLI usage information?(Y/n)

https://accounts.google.com/o/oauth2/auth?xxxxxxxxxx

Waiting for authentication...

✔ Success! Logged in as your_firebase@gmail.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ firebase init

選擇第二個選項Hosting
What Firebase CLI features do you want to setup for this folder?
◉ Database: Deploy Firebase Realtime Database Rules
❯◉ Hosting: Configure and deploy Firebase Hosting sites

輸入Database Rules的檔案名稱,可以直接按Enter使用database.rules.json
What file should be used for Database Rules?(database.rules.json)

輸入網頁檔案要放置的資料夾名稱,可以直接按Enter使用public
What do you want to use as your public directory? (public)

決定是否設定為single-page app
Configure as a single-page app (rewrite all urls to /index.html)?

如何還沒在firebase的console建立新的project的話,就選擇new
What Firebase project do you want to associate as default?

✔ Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

若沒有事先建立project,請到console建立,再透過firebase use --add來設定網站對應的project
進入console點選Create Project建立一個新的project
Create project
建立成功之後,點選左方選單的database可以看到https://fir-web-apple01.firebaseio.com/類似的網址,其中的fir-web-apple01就是project的名稱

1
2
3
4
5
6
$ firebase use --add
? Which project do you want to add? fir-web-apple01
? What alias do you want to use for this project? (e.g. staging) demo-web

Created alias demo-web for fir-web-apple01.
Now using alias demo-web (fir-web-apple01)

deploy

輸入deploy就完成啦。

1
$ firebase deploy

除了第一次弄要登入,初始化等比較麻煩一些之外,之後修改完public內的檔案直接firebase deploy就可以更新網站了。
Enjoy it.