1. GoogleFirebase無料アカウント
2. React＆Reduxをよく理解している

React Reduxアプリの作成に時間を費やすことはありませんが、既製のredux-scaffold-projectを共有させていただきます。こちらのgithubリポジトリからコピーを入手してください。アプリケーションをテストする場合は、プロジェクトReadmeに記載されているインストール手順に従ってください。

このプロジェクトには3つのルートがあります。認証ステータスとTodoはReduxストアに保存されます。
1.ログイン
2.約
3.ホーム（保護）
このプロジェクトの作成中は標準的な方法に従っているので、プロジェクトのスターターとして自由に使用してください:)

Firebaseプロジェクトの設定

Firebaseでは、最初にプロジェクトを作成してから、その中にアプリケーションを作成します。1つのプロジェクト内に複数のアプリケーションを含めることができます。多くのFirebaseサービスには、愛好家向けの無料プランがあります。ユーザーフレンドリーで、Firebaseを使用するためにDevOpsの担当者である必要はありません。

プロジェクトを作成するには、ログイン後にFirebaseコンソールを開きます。過去にプロジェクトを作成したことがない場合は、次のようになります。[プロジェクトの作成]ボタンをクリックします。

次に、プロジェクト名とFirebaseAnalyticsを有効にするかどうかを尋ねられます。具体的にするためにオフにしましたが、ご自分でお試しください。リアルタイムのオーディエンス、ロケーションベースのオーディエンス、訪問者の年齢層、その他多くの統計情報を提供します。以下は、firbeaseプロジェクトを作成するためのスクリーンショットです（左から右）

Firebaseホスティング

FirebaseHostingは非常に簡単です。数回練習すれば、プロジェクトのデプロイに2分以上かかることはありません。プロジェクトをSSDにキャッシュし、世界中に分散させます。これにより、ユーザーはサイトにすばやくアクセスできます。その上、無料のSSL証明書も提供されるため、サイトは常に安全です。

[プロジェクトの概要]の下の左側のサイドバーで[ホスティング]を選択し、右側のヘッダーの[開始]ボタンをクリックします。以下のスクリーンショットを参照してください。

下部にあるビデオをご覧になることを強くお勧めします。また、ビデオと一緒に提供されているリンクも参照してください。

私たちは、Reduxのリアクト開くプロジェクトVscode＆打ち上げは、端末（統合でのルートディレクトリを表示]> [ターミナル）。

1. Vscodeの統合ターミナルで以下のコマンドを実行して、npmからFirebaseCLIをインストールします。（スキップするよりも前に行ったことがある場合）

npm install -g firebase-tools

firebase login

2. デフォルトのブラウザで「サインインGoogleアカウント」のWebページが開きます。
3. FirebaseにリンクされたGmailアカウントを選択します。その後、「FirebaseCLIがGoogleアカウントにアクセスしようとしています」と表示されたら[許可]をクリックします。
4. 最後に、「FirebaseCLIログインに成功しました」という確認メッセージが表示されます。（このWebページは今すぐ閉じることができます）

firebase init

• 次に、プロジェクトのセットアップを行うように求められます。最初のオプションを選択します既存のプロジェクトを使用します。（Enterキーを押します）
• すべてのFirebaseプロジェクトのリストが表示されます。Firebaseプロジェクトの設定中に作成したものを選択してください（図3）
• 今、あなたがするように求められます、公開ディレクトリの名前型ビルド＆プレス入力します
• 重要：次に、reactプロジェクトをシングルページアプリとして構成するかどうかを尋ねられます。はい（Yを入力してEnterキーを押します）
• GitHubで自動ビルドとデプロイを設定しますか？今のところ必要ありません（NとEnterキーを入力してください）このFirebaseの初期化が完了しました！


上記の手順を完了すると、2つのファイルがプロジェクトルートに追加されることに注意してください。
1. firebase.jsonは、すべてのホスティングのプロパティが含ま
2.を.firebasercプロジェクトIDが含まれています。
必要に応じて、これらをプロジェクトのgithubリポジトリにコミットできます。

デプロイスクリプトの追加

今のところ統合端末を安全に閉じることができます。また、Firebaseコンソールの[コンソールに進む]ボタンをクリックして、[ Firebaseホスティングのセットアップ]ダイアログを閉じることもできます。（図4の[開始]をクリックしたときに表示されます）。



Vscodeのプロジェクト内で、package.jsonを開き、scriptsプロパティの下にデプロイスクリプトを追加します。（イジェクトスクリプトの最後に、を置くことを忘れないでください）

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "npm run build && firebase deploy --only hosting"
},

エンジンを始動させてください！



ターミナルで以下のコマンドを実行すると、プロジェクトが2分以内にFirebaseHostingプラットフォームにデプロイされます。

npm run deploy

       

        Fig 7 : Deploying Project to Firebase Hosting
       

https://<project-id>.web.app



エピローグ

Delta Authは、このプロジェクトと記事に関する架空の名前です。デモンストレーション目的でのみ使用されます。サードパーティのエンティティとの類似点は、まったくの偶然です。

私はDockerとNextJsを学んでいます。おそらく、次回はそれについて何か書きます。この記事が気に入った場合は、拍手を残してください。下のコメントボックスで疑問を共有してください。次回お会いしましょう！