如何發布 react 專案到 firebase
在本篇文章中，我們將會討論到兩個重點
我們將分成三個步驟討論
專案建立成功後，請記得專案的名稱，後面步驟會需要用到
＊目前 firebase 有提供免費方案，所以不用擔心會有額外花費
接著我們將利用 firebase-tool 這個 CLI （command line interface）來幫助我們將 react 專案發佈至 firebase。
＊本篇文章使用的 firebase-tools 版本為 3.9.2
可以透過 npm install -g firebase-tools 這個指令來安裝 firebase-tools
安裝完成後請進入到專案目錄中並執行 firebase init ，接著 firebase-tools 就會引導你連結 react 專案與 firebase 專案，步驟如下
＊使用前請確認已登入 firebase，可利用 firebase login 進行登入
What Firebase CLI features do you want to setup for this folder?
What do you want to use as your public directory?
鍵入 build，設定 build 為發布目錄
Configure as a single-page app (rewrite all urls to /index.html)?
選則 Y，將所有 request 導向 index.html
最後利用指令 firebase deploy 將 react 部署至 firebase。部署成功後最後會提示 Hosting 的位置，例如 https://react-firebase-sample-beb83.firebaseapp.com ，這個位置就可以公開被存取即表示部署工作已完成
參考連結：All you need is React & Firebase
bitbucket 連結：react-firebase
- 如何透過 create-react-app 這個指令建立 react 專案
- 如何將 react 專案發布至 firebase
我們將分成三個步驟討論
步驟一 建立 firebase 專案
首先，連結到 firebase console，並新增一個專案，名稱（react-firebase-sample）與地區（台灣）可自訂
專案建立成功後，請記得專案的名稱，後面步驟會需要用到
＊目前 firebase 有提供免費方案，所以不用擔心會有額外花費
步驟二 建立 react 專案
首先請確認已安裝 create-react-app。如果還沒有安裝過可以透過 npm i -g create-react-app 進行安裝並利用 create-react-app -V 來確認版本。
接下來執行 create-react-app react-firebase 來建立 react 專案
＊ react-firebase 為專案名稱，可自訂
接著就會看到 create-react-app 幫我們自動建立 react 專案並安裝需要的模組。完成後，進入 react-firebase 資料夾（資料夾名稱就是透過 create-react-app 建立專案時的名稱）並執行 npm start 就可以看到 react 已經成功運行在 http://localhost:3000 的位置。
同時，react 也會開啟瀏覽器
這樣就表示 react 專案已經被成功建立。
接下來執行 create-react-app react-firebase 來建立 react 專案
＊ react-firebase 為專案名稱，可自訂
接著就會看到 create-react-app 幫我們自動建立 react 專案並安裝需要的模組。完成後，進入 react-firebase 資料夾（資料夾名稱就是透過 create-react-app 建立專案時的名稱）並執行 npm start 就可以看到 react 已經成功運行在 http://localhost:3000 的位置。
同時，react 也會開啟瀏覽器
這樣就表示 react 專案已經被成功建立。
步驟三 發布至 firebase
接下來準備發佈至 firebase。由於 react 預設會運行在開發模式（development mode）我們如果要將專案發布至正式環境（例如 firebase），通常會將專案進行最佳化，刪除一些不必要的檔案，並進行精簡以利達到最佳的執行狀況。我們可以透過 npm run build 來進行最佳化，最終檔案會被放置在專案底下 build 這個資料夾。接著我們將利用 firebase-tool 這個 CLI （command line interface）來幫助我們將 react 專案發佈至 firebase。
＊本篇文章使用的 firebase-tools 版本為 3.9.2
可以透過 npm install -g firebase-tools 這個指令來安裝 firebase-tools
安裝完成後請進入到專案目錄中並執行 firebase init ，接著 firebase-tools 就會引導你連結 react 專案與 firebase 專案，步驟如下
＊使用前請確認已登入 firebase，可利用 firebase login 進行登入
What Firebase CLI features do you want to setup for this folder?
- Database: Deploy Firebase Realtime Database Rules
- Functions: Configure and deploy Cloud Functions
- Hosting: Configure and deploy Firebase Hosting sites
What Firebase project do you want to associate as default?
這裏選擇步驟一所建立的 firebase 專案名稱 react-firebase-sample
What file should be used for Database Rules?
這裡會建立一個檔案供資料庫使用，使用預設檔案（database.rules.json）即可
再執行一次 firebase init，這次選擇 Hosting: Configure and deploy Firebase Hosting sites，接著它會提示
What do you want to use as your public directory?
鍵入 build，設定 build 為發布目錄
Configure as a single-page app (rewrite all urls to /index.html)?
選則 Y，將所有 request 導向 index.html
最後利用指令 firebase deploy 將 react 部署至 firebase。部署成功後最後會提示 Hosting 的位置，例如 https://react-firebase-sample-beb83.firebaseapp.com ，這個位置就可以公開被存取即表示部署工作已完成
下一篇：存取 firebase 即時資料庫
參考連結：All you need is React & Firebase
bitbucket 連結：react-firebase
留言
張貼留言