アルパカログ

Firebase Hostingを使うと、Reactアプリを簡単に公開することができます。

このエントリでは、Reactアプリが作成済みであることを前提に、Firebase Hostingへのデプロイ方法を紹介します。

最初にReactアプリを公開するためのFirebaseプロジェクトを作成します。

下記リンクからGmailでログインし、プロジェクトを作成します。

• ログイン - Google アカウント

プロジェクトを作成したら、Firebase CLIをインストールしていきます。

下記リンクから、Firebase CLIをインストールします。

• Firebase CLI リファレンス

Node.jsがインストールされている方はnpm installでインストールすることもできます。

$ npm install -g firebase-tools

インストールが完了したらパスが通っているか確認します。

$ firebase

コマンドが見つからない場合は、ターミナルを開き直します。

以降はReactアプリのプロジェクトディレクトリで行っていきます。

$ cd <react-app>

Firebase CLIでは最初にログインを行います。

下記コマンドを実行するとブラウザが立ち上がるので、Gmailアカウントを選んでFirebaseにパーミッションを与えます。

$ firebase login

ログインが成功したら初期設定を行っていきます。

下記のコマンドを実行してFirebase CLIの初期設定を行います。初期設定は最初の一度だけで良いです。

初期設定を実行すると、いくつか設定項目が出てくるので順に答えていきます。

$ firebase init

最初に、Firebaseのどの機能を利用するか聞かれます。

↓キーでHostingまでカーソルを移動し、スペースキーを押してHostingを有効にし、エンターキーで決定します。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

次に、公開するディレクトリを聞かれるので、buildと入力してエンターキーを押します。

Reactアプリはbuildディレクトリにビルドされるためです。

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

Single Page Applicationとして設定するかどうかを聞かれるので、yを入力してエンターキーを押します。

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

すでにbuild/index.htmlが存在する場合に、上書きするかどうかを聞かれます。Nを入力してエンターキーを押します。

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

initialization complete! と出たら初期設定は完了です。

✔  Firebase initialization complete!

公開ディレクトリの設定は、作成されたfirebase.jsonに書かれています。

{
  "hosting": {
    "public": "build",
    ...
  }
}

Firebase Hostingへデプロイする前に、Reactアプリをビルドする必要があります。

下記コマンドを実行してReactアプリをビルドします。

$ npm run build

ビルドが完了したらFirebase Hostingへデプロイします。

デプロイには下記コマンドを実行します。

$ firebase deploy

デプロイが完了すると、Deploy complete! の出力と共に、Hosting URLが表示されます。

ブラウザでHosting URLにアクセスし、アプリが動いていることを確認します。

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/<project-id>/overview
Hosting URL: https://<project-id>.web.app

ホスティングを停止したいときは下記コマンドを実行します。

$ firebase hosting:disable

「本当に停止して良いですか？」と聞かれるので、確認してからyキーを入力してエンターキーを押します。

? Are you sure you want to disable Firebase Hosting?

停止が完了すると、Hosting URLにアクセスするとNot Foundになります。

以上です。

このエントリでは、ReactアプリをFirebase Hostingへデプロイする方法を紹介しました。