ご依頼を検討されている方

【画像付き】Firebase Hostingを使用してReactアプリをデプロイする

URLをコピーする
URLをコピーしました!
想定読者

ReactアプリをFirebase Hostingを活用してデプロイする方法を知りたい

本記事は上記の方向けです。

おにちゃん

執筆者:Reactアプリを何度もデプロイしている僕が「firebaseのhosting」について詳しく解説します。

本記事の難易度
  1. 本記事は、かなり簡単にデプロイできるように何枚も画像を使用しています。
  2. 本記事を参考にして、デプロイできない場合はお問い合わせやTwitterなどで無料相談に乗っています。

本記事は下記の記事レベル1の内容となっています。

目次

Firebase HostingでReactアプリをデプロイする手順

Firebase HostingでReactアプリをデプロイする手順は下記の通りです。

Firebase HostingでReactアプリをデプロイする手順
  1. Firebase Hostingの準備をする
  2. Reactアプリを作成しよう
  3. Reactアプリとfirebaseを紐付けよう
  4. Hostingのためにターミナルからfirebaseにログインする
  5. Hostingのためにfirebaseの初期化
  6. Reactアプリをfirebase Hostingでデプロイする


手順1:Firebase Hostingの準備をする

Firebase Hostingの準備をする

まずはfirebaseのトップページへと行き、プロジェクトを作成をクリックしましょう。

プロジェクトネームをつける

次に、プロジェクトネームをつけて、【続行】をクリックしましょう。

プロジェクトネーム:好きな名前

続行をクリック

【続行】をクリック

プロジェクトを作成をクリック

【続行】をクリックしましょう。数十秒でプロジェクトが完成するはずです。


おにちゃん

firebaseにWebアプリを追加していきましょう。

Firebaseにアプリを追加しよう

ウェブマークのロゴをクリックしましょう。

アプリを登録しよう

アプリ登録の手順としてアプリネームを作成しましょう。

アプリネーム:好きなもので問題なし

次へ

2,3と次へをクリックしましょう。

おにちゃん

ここでのコマンドは必須なのですが、一旦ここは無視で構いません。

デプロイの準備する

コンソールへ進むをクリックしましょう。

おにちゃん

これにて、firebaseで準備する内容は終了です。


手順2:Reactアプリを作成しよう

次にHostingを使ってデプロイするアプリをReactで作成していきましょう。

Reactアプリを作成しよう

  1. mkdir react
  2. cd react
  3. npx create-react-app firebase-auth
  4. cd firebase-auth
  5. npm start
作成しよう
おにちゃん

このような画像が表示されれば問題なしです!!

Reactアプリの作成手順が分からない方は下記の記事を参考にしてみてください。


手順3:firebaseとReactアプリを紐付けしよう

  1. npm install -g firebase-tools
おにちゃん

インストールできた方はReactアプリに.envファイルを追加し下記のコードを入力してください。

REACT_APP_API_KEY=xxxxx
REACT_APP_AUTH_DOMAIN=xxxxx
REACT_APP_PROJECT_ID=xxxxx
REACT_APP_STORAGE_BUCKET=xxxxx 
REACT_APP_MESSAGING_SENDER_ID=xxxxx
REACT_APP_APP_ID=xxxxx

これらのIDはfirebaseプロジェクト概要から閲覧することが可能です。

その後に、firebase.jsを作成し下記のコードを貼り付けましょう。

import firebase from 'firebase/app';
import 'firebase/analytics';

const config = {
  apiKey: process.env.REACT_APP_APP_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

firebase.initializeApp(config);

export default firebase;


手順4:Hostingのためにターミナルからfirebaseにログインする

下記のコマンドを入力しましょう。

firebase login

入力後、

Allow Firebase to collect CLI usage and error reporting information? (Y/n) //Yを選択

おにちゃん

firebase側が情報収集しても良いか聞かれています。基本YでOKです。

firebaseからauth設定の準備をする

アカウントを選択しましょう。

アカウントを設定しよう
おにちゃん

許可をクリックしましょう。

許可する

これにてターミナルからのfirebaseログインは完了です。


firebase loginが上手くできない場合

: command not found: firebase

上記のコマンドが出力される方は下記のコマンドを使用しましょう。

export PATH=$PATH:`npm bin -g`

上記のコマンドを入力後、firebase loginを入力してみてください。

おにちゃん

僕はこの方法で解決しています。


手順5:Hostingのためにfirebaseの初期化

firebase init

Hostingのためにターミナルからfirebaseの初期化
おにちゃん

今回はhostingのみにチェックしましょう。

hostingのみの設定

今回は、先ほど作成したfirebaseプロジェクトを活用しますので、Use an existing projectを選択しましょう。

What do you want to use as your public directory?
→build

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

Set up automatic builds and deploys with GitHub?
→No


手順6:Reactアプリをfirebase Hostingでデプロイする

 npm run build

Compiled successfully.と表示された方は下記のコマンドを入力しましょう。

firebase deploy

おにちゃん

Reactアプリをfirebaseにデプロイできたはずです!!

Hosting URL:ーーーーーーーー
→Reactアプリを確認してみてください。

デプロイ成功


まとめ:Reactアプリをfirebase Hostingを活用してデプロイする方法

ここまでで「【画像付き】Firebase Hostingを使用してReactアプリをデプロイする」の解説は以上です。

firebase の次のステージは下記の通りです。

Reactの情報が気になる方は下記の記事です。

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる