More than 5 years have passed since last update.

FirebaseとReactjs - Hosting

Last updated at 2019-05-05Posted at 2017-10-06

はじめに

最近FirebaseやReactの勉強をはじめたばかりで、自分なりに備忘録をつけていこうと思います。
ご指摘等ありましたら、ぜひお願いします。
今回は環境設定について書いていきます。

Reactの導入にはcreate-react-appコマンドを使います。
今回は get-start-fr という名前のプロジェクトを作成していきます。

$ create-react-app get-start-fr

firebaseのコンソールで新しいプロジェクトを作成します。

次にコマンドを叩いていきます。一行目でFirebase CLIをインストールしていますが、インストールするにはNode.jsをインストールする必要があります。

$ npm install -g firebase-tools

これでFirebaseコマンドが使えるようになりました。
次はログインです。

$ firebase login

すでにログインしているときはAlready logged in as <アカウント名>と表示されます。アカウントを切り替えたいときは$firebase logoutでログアウトできます。
ログインしたら、さっき作ったディレクトリに移動してFirebaseを初期化します。

$ cd get-start-fr
$ firebase init

$ firebase initを叩くと色々と質問が飛んできます。

? Which Firebase CLI features do you want to setup for this folder? Press Spa
ce to select features, then Enter to confirm your choices.

->Hosting: Configure and deploy Firebase Hosting sites

? Select a default Firebase project for this directory:

->get-start-fr (get-start-fr)

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

->public

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

->No

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

->No

次に、npm run buildでbuildファイルを生成します。
現在の状態のままでデプロイすると、publicがデフォルトで読み込まれるので、buildファイルが読み込まれるようにfirebase.jsonを編集します。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

を次のように編集しました。

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

これでFirebaseの準備ができました。

ではビルドします。

npm run build

ビルドしたらデプロイします。

$ firebase deploy

すると、

Hosting URL: https://get-start-fr.firebaseapp.com

と出るのでurlを叩くと、デプロイできているか確認できます。

「とりあえず動く」くらいのハードルでやって見ました。これでうまくいくとはちょっと思えないので