Firebase 架站

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

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


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

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


以下操作執行於 terminal。

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

firebase login //執行身份授權

會自動開啟授權網頁


允許後會導向 CLI 文件頁面


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

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

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

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


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

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

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

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

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

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

firebase serve //本機架站

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

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

留言
avatar-img
留言分享你的想法!
avatar-img
Kate的沙龍
6會員
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
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
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