使用 Firebase 的 Hosting 服務來建置靜態網站

Firebase 提供 Hosting 這個服務可以用來快速建置一個靜態且安全的網站來供 APP 使用。而所謂靜態網站指的是以 .html 檔為基礎，並可與 JavaScript、CSS 等並存。靜態網站指的是「不」包含網頁程式(如 JSP、ASP、PHP、ASP.Net…等)及資料庫的純文字及圖片網頁。

啟動 Hosting 服務並將網站佈署上去這些動作都是不需要付費的，但若是超過免費的標準則也是要付費的，以下這張圖即是 Hosting 服務的收費標準。

Hosting 收費標準

內容大綱

• 建置 Hosting 的環境並新增一個 .html 的靜態網頁並存放 JSON 格式的內容
• 利用 WebView 來顯示被建立的網站，並利用 URLSession 讀取其 JSON 格式的內容

前置作業

• 必須擁有 Google 的帳號
• 下載 Visual Studio Code 以用來編輯網頁

1. 建置 Hosting 的環境並新增一個 .html 的靜態網頁並存放 JSON 格式的內容

1.1 安裝 Firebase 的 Command Line Interface。請至 Node.js 官網 下載安裝檔並安裝

1.2 點擊下載的安裝檔，一直點選「下一步」完成安裝即可

1.3 安裝完 Node.js 和 npm 後，接著透過 npm 在 Command Line 安裝 Firebase 的 Command Line，打開 Command Line 並鍵入 sudo npm install -g firebase-tools

安裝完成

1.4 建立一個空的目錄並將路徑切換至該目錄

1.5 鍵入 sudo firebase login 來登入 firebase

1.6 鍵入 sudo firebase init 來初始化專案

1.7 開始逐步設定專案的內容

選擇一個已存在的 Firebase 的專案

安裝完成

1.8 將初始化完成的專案拖曳至 Visual Studio Code

1.9 新增一個 myJSON.html 檔並放置 JSON 格式的資料

1.10 鍵入 sudo firebase deploy 佈署專案

1.11 至 Firebase 主控台的 Hosting 查看有生成無網域名稱

1.12 點擊該網域名稱即可開啟建立的靜態網站

1.13 在網址列的網址最後加入 myJSON.html 測試新增的靜態網頁是否也有被建立

2. 利用 WebView 來顯示被建立的網站，並利用 URLSession 讀取其 JSON 格式的內容

2.1 開啟 Xcode 新增 Tabbed Application 專案

2.2 在第一個 ViewController.swift 新增 UIWebView 並設定其 Constrain，再設定其 IBOutlet

2.3 在第二個 ViewController.swift 放入 UIButton 並設定其 Constrain，並設定其 IBAction

2.4 在 FirstViewController.swift 的 viewDidLoad 加入以下程式碼來載入 Hosting 的首頁，URL 請不要跟法蘭克設為一樣，應設為你們自己的 URL

2.5 在 SecondViewController.swift 的 IBAction 裡加入以下程式碼來載入 JSON 格式的資料，URL 請不要跟法蘭克設為一樣，應設為你們自己的 URL

2.6 啟動模擬器測試是否和法蘭克的畫面一致

點擊 Get JSON Data From Hosting 按鈕查看 Console 是否有輸出資料

若有任何問題歡迎在問與答提出，如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。

參考資料

Firebase Hosting | Firebase