Firebase 架站

更新 發佈閱讀 3 分鐘
轉移自 LogDown 原文日期 June 10, 2016 14:33
Firebase 自從被 Google 收購後,從原本的即時資料庫,擴展更多的功能。
筆者這次研究的是架站功能,雖然玩過 Google App Engine 架站,但還是想體驗一下新技術。
目前 Firebase 官方支援的只有靜態網頁 (HTML, CSS, JS, images, etc.) ,如果需要搭配服務器,可以在第三方伺服器安裝 Firebase 架構。

首先到官網註冊帳號,已經有 Google 帳號的可以直接授權。
進到管理頁面後可以選擇建立新專案或是導入舊專案。
點擊專案後可以選擇專案支援的類型,這次選擇的是網站應用程式。

raw-image


如果是有玩過 Google App Engine 的開發者大概會莞爾一笑,因為 firebase 修改網站內容的功能也不在雲端,要在本機安裝開發工具。

官方英文的架站教學其實還算詳細,但筆者還是喜歡將實際的操作記錄下來。


以下操作執行於 terminal。

npm install -g firebase-tools //安裝 sdk ,如果沒有足夠權限命令前方請加上 sudo

firebase login //執行身份授權

會自動開啟授權網頁

raw-image


允許後會導向 CLI 文件頁面

raw-image


出現以下訊息就表示成功授權了

Waiting for authentication... ✔ Success! Logged in as {your email}

firebase init . //在專案目錄下初始化

忍不住截圖了,因為那個火焰文字太酷炫啦!

raw-image


因為這次的目的是架站所以選擇的是 Hosting Setup

專案目錄下會自動生成檔案: firebase.json

接著就可以進行開發作業。

預設資源放在專案目錄下的 public 目錄下,因為 public 目錄不會自動產生,所以要自己建立。

此次筆者因為是實驗所以只在 public 目錄下放進 index.html 。

開發完成後就可以選擇在本機或是雲端檢視成果。

firebase serve //本機架站

firebase deploy //把專案的資源上傳到雲端,如果有多個專案,就必須在後面指定專案名稱

大功告成了!順利在 {Hosting Site}/index.html 下看到筆者放進的網頁。

raw-image
留言
avatar-img
留言分享你的想法!
avatar-img
Kate的沙龍
7會員
45內容數
和 Kotlin 相關的系列文章。 給程式初學者的「Kotlin 學習系列」 給正在實戰的工程師「Kotlin 實戰系列」
Kate的沙龍的其他內容
2023/03/22
比起說這是新技術,不如說是統一前端規格。 以前在不同框架下,類似功能的東西名字各不相同。比如輸入文字的物件,Android叫做EditText,iOS叫做UITextField,Html叫做TextBox或是input標籤。 這讓跨平台的開發者非常痛苦,痛不欲生。 而統一規格意味著,只要專心寫一套程
2023/03/22
比起說這是新技術,不如說是統一前端規格。 以前在不同框架下,類似功能的東西名字各不相同。比如輸入文字的物件,Android叫做EditText,iOS叫做UITextField,Html叫做TextBox或是input標籤。 這讓跨平台的開發者非常痛苦,痛不欲生。 而統一規格意味著,只要專心寫一套程
2022/10/23
https://discord.gg/8GRF3YsG?event=1033340341711028224 今天(10/23)晚上七點: 《老姐要用 Kotlin 寫專案》作者分享如何把小說和技術文整合在一起。 連續三年都用Kotlin參加IT邦鐵人賽的心得分享。 關於書本、鐵人賽文章、任何遇到的K
2022/10/23
https://discord.gg/8GRF3YsG?event=1033340341711028224 今天(10/23)晚上七點: 《老姐要用 Kotlin 寫專案》作者分享如何把小說和技術文整合在一起。 連續三年都用Kotlin參加IT邦鐵人賽的心得分享。 關於書本、鐵人賽文章、任何遇到的K
2022/09/08
當初第一次參賽就得獎出書,就養成了每年都參加的習慣,今年是第三年了,這次寫的是《不解題就不能離開的房間》系列。 這還滿有趣的,三十天每天只要三百字,將自己的技術寫出來分享,就有機會出書。
2022/09/08
當初第一次參賽就得獎出書,就養成了每年都參加的習慣,今年是第三年了,這次寫的是《不解題就不能離開的房間》系列。 這還滿有趣的,三十天每天只要三百字,將自己的技術寫出來分享,就有機會出書。
看更多
你可能也想看
Thumbnail
嗨~我是夢夢 ♡ 每年到這個時候,我都會默默開始列購物清單 畢竟「蝦皮雙11」真的太好買啦 🛒✨ 這次就想跟大家分享幾樣我自己平常有在用、也準備趁雙11補貨的好物, 順便聊聊我最近開始玩的「蝦皮分潤計畫」,怎麼讓分享變成小小被動收入 💰
Thumbnail
嗨~我是夢夢 ♡ 每年到這個時候,我都會默默開始列購物清單 畢竟「蝦皮雙11」真的太好買啦 🛒✨ 這次就想跟大家分享幾樣我自己平常有在用、也準備趁雙11補貨的好物, 順便聊聊我最近開始玩的「蝦皮分潤計畫」,怎麼讓分享變成小小被動收入 💰
Thumbnail
分享如何透過蝦皮解決毛孩(多芬)因換季和食物引發的皮膚過敏問題,從選用單一蛋白質的火雞肉主食,到利用寵物防舔衣舒緩傷口,並結合蝦皮雙11購物節的優惠資訊與蝦皮分潤計畫的實用教學。
Thumbnail
分享如何透過蝦皮解決毛孩(多芬)因換季和食物引發的皮膚過敏問題,從選用單一蛋白質的火雞肉主食,到利用寵物防舔衣舒緩傷口,並結合蝦皮雙11購物節的優惠資訊與蝦皮分潤計畫的實用教學。
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
Thumbnail
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
在本篇文章中,將會設定 Cloud Run,以便每當將程式修改並推送到 GitHub 時,它都會使用 Cloud Build 自動構建和部署應用程序的最新版本。
Thumbnail
在本篇文章中,將會設定 Cloud Run,以便每當將程式修改並推送到 GitHub 時,它都會使用 Cloud Build 自動構建和部署應用程序的最新版本。
Thumbnail
本文將介紹Gitlab與GitHub的差異,以及在本地環境部署Gitlab的流程與實作。文章內容包括版本管理系統的選擇,Gitlab的基本功能,以及使用Docker進行部署的詳細步驟。
Thumbnail
本文將介紹Gitlab與GitHub的差異,以及在本地環境部署Gitlab的流程與實作。文章內容包括版本管理系統的選擇,Gitlab的基本功能,以及使用Docker進行部署的詳細步驟。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News