Firebase 架站

更新於 發佈於 閱讀時間約 2 分鐘
轉移自 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
6會員
45內容數
和 Kotlin 相關的系列文章。 給程式初學者的「Kotlin 學習系列」 給正在實戰的工程師「Kotlin 實戰系列」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Kate的沙龍 的其他內容
 轉移自 LogDown 原文日期 January 19, 2016 14:35  Android 上常有些沒有在文件上,卻應該清楚的資訊,筆者稱其為 Android 的潛規則。 下面條列出筆者遇過的部分,會隨著踩過的坑繼續更新。   鬧鈴會因為開關機被清除,所以必須重新設定。 Androi
 轉移自 LogDown 原文日期 September 09, 2015 22:18  View animation (API1) 針對 View 的鏡花水月、海市蜃樓,物件本身沒變化,比如說:點擊和觸摸仍針對原處。   Tween animation 給我一個開始和結束
轉移自 LogDown 原文日期 May 13, 2015 00:00   想將自己開發的程式碼方便他人或自己引用,可以考慮放到 JCenter 。 目前 intellij Idea 的 Gradle 專案預設就是引用 JCenter 。 1. 首先,要擁有 [Bintray](https://
轉移自 LogDown 原文日期 March 12, 2015 20:26  前陣子看到別人的 Chrome Extension 之後,筆者也開始好奇這塊領域。 官方引導全都是英文,但不會太難看懂。 簡言之只要為應用準備好一個資料夾,然後裡面有以下四個檔案即可。 manifest.js
轉移自 LogDown 原文日期 December 26, 2014 14:46  因為專案將要轉移到 jira 和 bitbucket ,所以留下記錄,以便將來輕鬆操作。 用過這兩者的人應該會知道,其實這兩家服務是同一家公司提供的,因為界面是同一個形態啊。 就因如此,它們之間有更多緊密聯繫,一
轉移自 LogDown 原文日期 December 25, 2014 12:14  在 IntelliJ IDEA 的 Preferences 選單裡,搜尋 VM Options ,看你是用什麼工具 build 的,如果是 Maven ,就在 Maven - Runner,筆者是用 Gradle ,
 轉移自 LogDown 原文日期 January 19, 2016 14:35  Android 上常有些沒有在文件上,卻應該清楚的資訊,筆者稱其為 Android 的潛規則。 下面條列出筆者遇過的部分,會隨著踩過的坑繼續更新。   鬧鈴會因為開關機被清除,所以必須重新設定。 Androi
 轉移自 LogDown 原文日期 September 09, 2015 22:18  View animation (API1) 針對 View 的鏡花水月、海市蜃樓,物件本身沒變化,比如說:點擊和觸摸仍針對原處。   Tween animation 給我一個開始和結束
轉移自 LogDown 原文日期 May 13, 2015 00:00   想將自己開發的程式碼方便他人或自己引用,可以考慮放到 JCenter 。 目前 intellij Idea 的 Gradle 專案預設就是引用 JCenter 。 1. 首先,要擁有 [Bintray](https://
轉移自 LogDown 原文日期 March 12, 2015 20:26  前陣子看到別人的 Chrome Extension 之後,筆者也開始好奇這塊領域。 官方引導全都是英文,但不會太難看懂。 簡言之只要為應用準備好一個資料夾,然後裡面有以下四個檔案即可。 manifest.js
轉移自 LogDown 原文日期 December 26, 2014 14:46  因為專案將要轉移到 jira 和 bitbucket ,所以留下記錄,以便將來輕鬆操作。 用過這兩者的人應該會知道,其實這兩家服務是同一家公司提供的,因為界面是同一個形態啊。 就因如此,它們之間有更多緊密聯繫,一
轉移自 LogDown 原文日期 December 25, 2014 12:14  在 IntelliJ IDEA 的 Preferences 選單裡,搜尋 VM Options ,看你是用什麼工具 build 的,如果是 Maven ,就在 Maven - Runner,筆者是用 Gradle ,
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
※ 需要做版本備份時: git init:初始化此資料夾,由git 開始追蹤版本控制。 git add:將檔案加入到暫存區。 git commit:把暫存區的內容提交到儲存庫。 git status:查看目前所有檔案的狀態。 git log:查看過去所有commit的記錄。 ※ 需要做修
Thumbnail
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
在本篇文章中,將會設定 Cloud Run,以便每當將程式修改並推送到 GitHub 時,它都會使用 Cloud Build 自動構建和部署應用程序的最新版本。
Thumbnail
本文將介紹Gitlab與GitHub的差異,以及在本地環境部署Gitlab的流程與實作。文章內容包括版本管理系統的選擇,Gitlab的基本功能,以及使用Docker進行部署的詳細步驟。
※ Git(三) 什麼是 staging area? 在 Git 中,staging area是暫存區的意思,也被稱為索引(index)。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。 當多人協作時你要開發個功能,但不
※ 關於Git (二) 請寫下從 Github 上複製一個專案下來,做一次遞交,然後推上去會用到的所有 git 指令。 複製專案(Clone) markdown-here: git clone https://github.com/adam-p/markdown-here.git 如果在訊息
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
※ 需要做版本備份時: git init:初始化此資料夾,由git 開始追蹤版本控制。 git add:將檔案加入到暫存區。 git commit:把暫存區的內容提交到儲存庫。 git status:查看目前所有檔案的狀態。 git log:查看過去所有commit的記錄。 ※ 需要做修
Thumbnail
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
在本篇文章中,將會設定 Cloud Run,以便每當將程式修改並推送到 GitHub 時,它都會使用 Cloud Build 自動構建和部署應用程序的最新版本。
Thumbnail
本文將介紹Gitlab與GitHub的差異,以及在本地環境部署Gitlab的流程與實作。文章內容包括版本管理系統的選擇,Gitlab的基本功能,以及使用Docker進行部署的詳細步驟。
※ Git(三) 什麼是 staging area? 在 Git 中,staging area是暫存區的意思,也被稱為索引(index)。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。 當多人協作時你要開發個功能,但不
※ 關於Git (二) 請寫下從 Github 上複製一個專案下來,做一次遞交,然後推上去會用到的所有 git 指令。 複製專案(Clone) markdown-here: git clone https://github.com/adam-p/markdown-here.git 如果在訊息