Chapter 02

ReactとFirebaseの初期設定

masalib
masalib
2020.12.20に更新
このチャプターの目次

Reactの初期設定

初心者がいきなりnpm initから作るのはWebpackなどの設定など大変なので

create-react-app

を使います。

$ cd 作業用Folder
$ npx create-react-app ProjectFolder

create-raect-appで環境を作成するといらないCSSやロゴなどがある。
開発には必要ないので削除する

/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
/src/App.js
function App() {
  return (
    <div className="App">
      Hello,World
    </div>
  );
}
export default App;

確認用に

$ cd 作業用Folder\ProjectFolder
$ npm start

問題なくコンパイルができたら

と表示されていると思います。

もし失敗した人はcloneコマンドで作成してください

$ git clone -b create-raect-app-initial-delete https://github.com/masalib/Learn-Firebase

Firebaseの初期設定

アプリで使うためにはプロジェクトとAPIキーと呼ばれいるものが必要です。
プロジェクトがない前提です。また2020/11/22の時点での画面です。UIがちょくちょく変わるので注意です。

https://firebase.google.com/

にアクセスして使ってみるを押してからの手順になります

  1. プロジェクトを作成する。今後も使っていくならわかりやすい名前にした方がいいです。

  2. Googleアナリティクスの設定を有効にする

  3. Googleアナリティクスのアカウントの選択画面がでるので該当のユーザーを設定する

  4. プロジェクトの設定の全般を開く

  5. マイアプリの設定で「</>」になっているアイコンを開く

  6. マイアプリの名前の設定

  7. APIキーのコピー

  8. reactのプロジェクトに戻ってきて「.env.local」または「.env.development.local」のファイルを作成してAPIキーなどを設定します。もしreactのプロジェクトが起動している場合はrestartする(環境設定ファイルを読み込むため)

.env.development.local
REACT_APP_APIKEY=
REACT_APP_AUTHDOMAIN=
REACT_APP_DATABASEURL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=
REACT_APP_MEASUREMENT_ID=

(環境変数は「REACT_APP_」のプリフィックスが必須です)

確認のために出力します

/src/App.js
function App() {
  return (
    <div className="App">
      Hello,World
+     <div>{`REACT_APP_APIKEY:${process.env.REACT_APP_APIKEY}`}</div>
+     <div>{`REACT_APP_AUTHDOMAIN:${process.env.REACT_APP_AUTHDOMAIN}`}</div>
+     <div>{`REACT_APP_DATABASEURL:${process.env.REACT_APP_DATABASEURL}`}</div>
+     <div>{`REACT_APP_PROJECT_ID:${process.env.REACT_APP_PROJECT_ID}`}</div>
+     <div>{`REACT_APP_STORAGE_BUCKET:${process.env.REACT_APP_STORAGE_BUCKET}`}</div>
+     <div>{`REACT_APP_MESSAGING_SENDER_ID:${process.env.REACT_APP_MESSAGING_SENDER_ID}`}</div>
+     <div>{`REACT_APP_APP_ID:${process.env.REACT_APP_APP_ID}`}</div>
+     <div>{`REACT_APP_MEASUREMENT_ID:${process.env.REACT_APP_MEASUREMENT_ID}`}</div>
    </div>
  );
}
export default App;

ここでAPIキーが出力されれば初期設定が完了しました