概要

ウェブアプリを開発するにあたり、限られた時間の中でコアな機能の実装に時間を割きたく、環境セットアップなどに時間を奪われるのはなるべく避けたいところです。ボイラープレートとは、アプリ毎に必要になる機能をすでに実装したテンプレで、開発開始時セットアップにかかる時間を大幅に削ることができます。

このボイラープレートでは、認証機能がすでに組み込まれています。ユーザーがログイン、サインアップし、ダッシュボードまで遷移した後から実装をスタートできます。

デモ

開発環境

Mac OS X Catalina 10.15

$ npm -v
6.12.0

$ yarn -v
1.19.1

使用したライブラリ

bootstrap: ^4.3.1
emotion: ^10.0.17
firebase: ^7.2.1
framer-motion: ^1.6.15
react: ^16.10.2
react-dom: ^16.10.2
react-loadable: ^5.5.0
react-redux: ^7.1.1
react-router-dom: ^5.1.2
react-select: ^3.0.8
reactstrap: ^8.0.1
redux: ^4.0.4
redux-logger: ^3.0.6
redux-thunk: ^2.3.0

セットアップ手順

1．アプリの登録

Firebase Consoleにログイン
プロジェクトを追加し、 Webを選択
Authentication設定
「Authentication」-> 「ログイン方法」-> 「メール/パスワード」を有効にする
Storageの設定
ユーザー毎にプロフィール画像を保存するため、Storageの設定を有効にします。

Storageを有効にした後、「default」フォルダを作成->profile.pngを追加します。profile.pngはご自身で準備するか、こちらを使用してください。
ユーザーがプロフィール画像を選択しなかった場合、このデフォルト画像を使用しています。
キーをコピー
Project Overview右の歯車アイコンをクリック->「プロジェクトの設定」->「全般」->「Firebase SDK snippet」-> 「CDN」をクリック
apiKey〜measurementIdを選択、コピーしてください。こちらのキーは後ほど使います。

2．ボイラープレートのセットアップ

レポジトリからボイラープレートをダウンロード
ダウンロードしたファイルを解凍し、firebase.jsのキーを置き換える

firebase.js

const config = {
   apiKey: 'YOUR-API-KEY',
   authDomain: 'YOUR-AUTH-DOMAIN',
   databaseURL: 'YOUR-DATABASE-URL',
   projectId: 'YOUR-PRODUCT-ID',
   storageBucket: 'YOUR-STORAGE-BUCKET',
   messagingSenderId: 'YOUR-MESSAGING-SENDER-ID',
   appId: 'YOUR-APP-ID',
 }

プロジェクトのホームディレクトリに移動し、ライブラリをインストール

$ cd path/to/your-boilerplate
$ npm install
- or -
$ yarn install

続けてFirebaseの設定

firebase initでプロジェクト側のfirebaseをセットアップできます。もしfirebase toolsをインストールしてない場合、npm install -g firebase-tools よりインストールしてください。また、firebase アカウントにログインしてない場合、 firebase login を実行し、ログインしてください。

$ npm install -g firebase-tools // 2回目以降不要
$ firebase login // 2回目以降不要
$ firebase init
$
$ ...

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ 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

=== Project Setup

? Please select an option: Use an existing project
i  Using project {your-project-id} ({your-project-name})

=== Hosting Setup 

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File build/404.html already exists. Overwrite? No
i  Skipping write of build/404.html
? File build/index.html already exists. Overwrite? No
i  Skipping write of build/index.html

=== Storage Setup

? What file should be used for Storage Rules? storage.rules

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

✔  Firebase initialization complete!

firebase.jsonの更新

上記コマンドが成功すると、firebase.jsonが作成されます。"headers"と"rewrite"を追加してください。(以下jsonファイルの内容をそのままコピーして貼り付けても問題ありません。)

firebase.json

{
  "hosting": {
    "public": "build",
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

3．テスト

2までの手順が終われば、実際に動かしてみましょう。

以下コマンドを実行すると、http://localhost:5000 が立ち上がり、挙動を確認することができます。

$ yarn build && firebase serve
- or -
$ npm build && firebase serve

４．デプロイ

ウェブアプリを公開する場合、以下コマンドを実行します。

完了後、公開URLが表示されます。

$ yarn build && firebase deploy
- or -
$ npm build && firebase deploy

【React】firebaseすぐ使えるボイラープレートを公開

概要

デモ