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

以上