React appをFirebaseにデプロイ
Reactとは
Reactとは、UIを作成するための、Facebookが開発したJavaScript用ライブラリです。Facebook、Yahoo、Qiita、Wantedlyなども採用しています。
詳細: https://ja.reactjs.org/
Reactのコンセプト
-
Declarative(宣言的である)
-
Component-Based(コンポーネント思考がベースになっている)
-
Learn Once, Write Anywhere(他の分野にも適応できる)
Firebaseとは
Googleが運営するクラウドプラットフォーム。無料枠があり、HerokuのGoogle版。
詳細: https://firebase.google.com/?hl=ja
Firebaseの導入
以下のコマンドをターミナルで実行し、Firebase-CLIをインストール。
$ npm install -g firebase-tools
Googleアカウントを紐づけ
$ firebase login // 実行後、メールアドレスなどを入力する
Firebaseの初期化
以下を実行してFirebaseを初期化
$ firebase init
初期化後、以下のようにターミナルから、色々聞かれるので
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
❯◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
◯ Emulators: Set up local emulators for Firebase features
◯ Hosting: Configure and deploy Firebase Hosting sites
を選択し、 スペースキー を押した後に Enter
option
次にoptionを聞かれるので
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
すでにFirebaseプロジェクトがある場合
Firebase内に、すでにプロジェクトを作成してたら以下を選択し Enter
プロジェクトを選択し Enter
Use an existing project
Firebaseプロジェクトがない場合
初めて作成する時には以下を選択し Enter
Create a new project
次にFirebaseのブラウザからプロジェクトを作成する
プロジェクトの作成は以下参照
https://qiita.com/Watakatsu/items/667f45081a6dfbc11074
プロジェクトとローカルのフォルダを紐づけ
$ firebase use --add
デプロイ
$ firebase deploy
以上