KAEDE Hack blog

kaede0902 技術ブログ お仕事募集中。

Firebase and React Hosting usage

Firebase + ReactのHosting やり方

なぜ?

よく忘れるからドキュメンテーション

Console of Firebase ( Browser )

Firebase consoleでcreate project

そして真っ先にdatabaseからcloud firestoreを作成する

ここでlocationの選択が出てくる, asia-northeastを選択

これができてないとRDBGCPしか使えなくなる

また作り直す場合は,消した名前が30days trashから消えないから注意が必要.

Terminal

terminalでempty dir作成

npm install -g firebase-tools

npm i firebase ではない

firebase login

firebase initでTUI設定開始

Firestore, Hositing を選択

use an existing projectを選択

kaede0902chを選択する

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

initが終わった.

view

firebase deploy

これで作成できた

f:id:kei_s_lifehack:20200505011718p:plain

scriptではこれが書かれている

    <script src="/__/firebase/7.14.2/firebase-app.js"></script>
    <script src="/__/firebase/7.14.2/firebase-auth.js"></script>
    <script src="/__/firebase/7.14.2/firebase-database.js"></script>
    <script src="/__/firebase/7.14.2/firebase-messaging.js"></script>
    <script src="/__/firebase/7.14.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script src="/__/firebase/init.js"></script>

webで見れる.拡張子はnetlifyと同じ.app

f:id:kei_s_lifehack:20200505012015p:plain

ソースを書き換えると反応した

React

前のmoneylognの時はDOMをjQで書き換えたらクソだったので Reactを絶対使う

medium.com

これを参考にする

portfolioと言う名のprojectならまずfirebase設定するときに作った

code/portofolio/で npx create react app portfolio

cd portfolio/

親dirにあるpublic/ はindex.htmlしかないからrm -rf

残りを全てmv * ..で持ってくる

package.jsonはfirebaseの方にはないからNO CONFLICT

中の方の node_modules/ は放棄

とりあえずportfolio/ でnpm i (package.jsonのdataからreact動かすため?)

そしてnpm startでlocalでreactが動作する

f:id:kei_s_lifehack:20200610194029p:plain

firebase.jsonのpublic: publicをbuild/に書き換える

そしてnpm run build, firebase deploy

これでbuild先で動く.(https://portfolio0902.web.app/)

f:id:kei_s_lifehack:20200610194651p:plain

Database crud

別の記事に書く

懸念点

spark(free)planでは作成数に上限がある……

PRJを作る度にLimitに近づいているカウントがされていく。

これは既存の適当に乱立したPRJを全て削除してもリセットされない。

削除したprojectが30days立つまで減るのを待つ必要がある.