firebase
Pocket

FirebaseとCreate React Appを使って定番のTodoアプリを何回かに分けて作っていきます。

CodeGridの記事やQiitaの記事を読めば分かりますが、Firebaseの覚え書きとして書いておきます。

一から始めるFirebase 第1回 サービスの特徴と環境整備

CodeGrid

React + Redux + Firebaseで作るTodo App

Qiita @gonta616

やることやらないことは以下

  • create-react-appを使う
  • Reduxはとりあえずやらない(そのうちやるかも)
  • Firebaseでデータを保存したり書き換えたり、ログイン機能つけたり
  • Firebaseでホスティング

Create React App

まずは以下のコマンドでプロジェクト作成。create-react-appコマンドを使えるようにしておいてください。プロジェクト名は何でもいいです。

create-react-app firebase-todo-sample

プロジェクトフォルダへ移動して

cd firebase-todo-sample

立ち上げます。

yarn start

無事立ち上がるはずです。

create-react-start

Firebaseの準備

まずは、Firebase-toolsのコマンドを使えるようにするため、以下のコマンドを打ちます。

npm install -g firebase-tools

インストールが終わって以下のコマンドを打つと、いろいろオプションなどが出てくるはずです。

firebase

Firebaseプロジェクトを作成

Firebaseのページの右上の「Go to console」から管理画面へ行きます。

https://firebase.google.com/?hl=ja

管理画面からプロジェクトを作成できます。

firebase-start

プロジェクト名と国地域を設定、プロジェクトIDは固有のものでないといけないです。

firebase-create-project

プロジェクトを登録するとこんな画面に

firebase-admin

Firebaseと連携

次に作ったFirebaseのプロジェクトとCreate React Appのプロジェクトを連携させます。

先ほどyarn startで立ち上げたものは一旦Ctrl + Cで切っておいて、以下のコマンドを打ちます。

firebase init

するとFirebaseとでかでかと絵文字がでてきて、いくつか質問されます。

firebaseinit

カーソルを上下で移動して、スペースキーで選択できます。今回はDatabaseとHostingを使うので、両方選択してEnter

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm you
r choices. 
 ◉ Database: Deploy Firebase Realtime Database Rules
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites

次にどのプロジェクトか聞かれます。上下でカーソルを合わせて、Enterを押します。

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: (Use arrow keys)
❯ [don't setup a default project] 
  TodoAppSample (todoappsample-f7358) 
  [create a new project] 

次は権限設定をするファイル名をどうするか聞かれます。ここは何も考えずEnterでいいと思います。

? What file should be used for Database Rules? (database.rules.json)

次はデプロイするディレクトリ名を聞かれます。public以下のファイルを公開するので、このままEnterでOK。

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) 

次はSPA向けの設定を聞かれます。どのページにアクセスしてもindex.htmlを返すかどうかです。ここはyでEnterで。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

最後にpublicディレクトリ以下にindex.htmlがすでにあるので上書きしてもいいか聞かれます。ここはとりあえず「y」でEnterで後から修正しましょう。

? File public/index.html already exists. Overwrite? (y/N) 

これでOKです。

database.rules.jsonやfirebase.jsonなどFirebase関連のファイルができています。

次はCreate React Appの初期画面をそのままFirebaseのホスティング機能で公開してみます。

Firebaseのホスティイング機能で公開

その前にpublic/index.htmlが上書きされているので、Firebaseの設定を残しすつ、Create React Appのコードも移植します。以下のようにすればOKです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/4.3.1/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/4.3.1/firebase-auth.js"></script>
    <script defer src="/__/firebase/4.3.1/firebase-database.js"></script>
    <script defer src="/__/firebase/4.3.1/firebase-messaging.js"></script>
    <script defer src="/__/firebase/4.3.1/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

次はfirebase.jsonを少し修正。Create React Appの場合ビルドするとbuildディレクトリに入っていくため、buildに変えておきます。コマンドの設定でpublicではなくbuildにsしておけば、最初からここが書き換わるんですがindex.htmlが面倒になるので、この手順にしてます。

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build", // ここをbuildに
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

そして、ビルドします。

yarn run build

buildディレクトリができて、中にはいろいろファイルが。

最後に以下のコマンドでデプロイ。

firebase deploy

デプロイ中の進捗は管理画面の「Hosting」ページから見れます。そのページにURLもあるので、それを開くとCreate React Appの初期画面が公開されてるはず。

https://todoappsample-f7358.firebaseapp.com/

一旦ここまでで。Firebase簡単に公開もできるので、非常に便利。次から機能面も追加して行こうと思います。

Pocket