FirebaseにReact, Reduxをデプロイ

アプリ構成

• Node.js
• React
• Redux

プロジェクト作成

まず最初にfirebaseにログインを行います

firebaseにプロジェクト名を入力します

Googleアナリティクスの構成を選択します。

現在ログイン中のGoogleアカウントに紐づくGoogleAnaliyticsのアカウントがなければ、Default ~ を選択します

CLIでの設定

次に、CLIを使用して設定を行っていきます

cdコマンドを使用してプロジェクトが入っている場所に移動します

次にnpm install -g firebase-toolsと入力します

入力後、フォルダの中にfirebaseに必要なツールが読み込まれますので、読み込みが終了したら、

firebase loginと入力します

ログインができれば、自分のgmailのメアドが表示されますので、

次にfirebase loginと入力します

こういう画面になったら、

↓カーソルで４番目のHostingに移動してspaceキーを押してenterキーを押します

そうすると、この画面になるので、

Use an existing projectを選択してenterキーを押します

このように押しましたら、

作成したプロジェクトを選択してenterキーを押します

私は既に2つのプロジェクトが作成済みですので、

今回作成したsample-calc-appを選択します

しばらくすると、

一番下に

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

が出てくるのでこちらをそのままenterキーを押します

そうすると次にConfigture as a single-page app (rewrite all urls to /index.html)?と出てきますのでyesの意味のyを入力してenterキーを押します

そうすると、File public/index.html already exsists. Overwrite?と出てきますのでこちらはnoの意味のnを入力してenterキーを押します

これで準備ができたので、

最後にプロジェクトフォルダの中に

firebase.jsonというファイルが入っていると思いますので、

こちらを開きます

開くと、下の様にpublicの部分をbuildに書き換えます

書いて保存しましたら、

ターミナルに戻りまして npm run buildと入力します

しばらくするどbuildが完了するので、

最後にfirebase deployと入力します

最後にDeploy complete!と出てきて、

Hosting URLに出来上がったURLが出ていますので、

あとはアクセスするだけです！

このように出来上がったreactのwebアプリにアクセス出来たら成功です！

参照