はじめに
ご覧いただきありがとうございます。
今回はFirebaseを用いて、React, Reduxアプリのデプロイを行います。
Table of Contents
アプリ構成
- Node.js
- React
- Redux
プロジェクト作成
まず最初にfirebaseにログインを行います
firebaseにプロジェクト名を入力します
Googleアナリティクスの構成を選択します。
現在ログイン中のGoogleアカウントに紐づくGoogleAnaliyticsのアカウントがなければ、Default ~ を選択します
CLIでの設定
次に、CLIを使用して設定を行っていきます
cdコマンドを使用してプロジェクトが入っている場所に移動します
次にnpm install -g firebase-toolsと入力します
入力後、フォルダの中にfirebaseに必要なツールが読み込まれますので、読み込みが終了したら、
firebase loginと入力します
ログインができれば、自分のgmailのメアドが表示されますので、
次にfirebase loginと入力します
こういう画面になったら、
↓カーソルで4番目の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アプリにアクセス出来たら成功です!
参照
0件のコメント