アルパカログ

Webエンジニアでマネージャーな人がプログラミングやマネジメントの話題を中心に書いているブログです。

Firebase HostingでReactアプリをデプロイする方法

f:id:otoyo0122:20200913100111p:plain:w300

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

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

Firebaseプロジェクトの作成

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

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

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

Firebase CLIのインストール

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

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

$ npm install -g firebase-tools

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

$ firebase

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

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

$ cd <react-app>

Firebase CLIの初期設定

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へのデプロイ

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

Hostingの停止

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

$ firebase hosting:disable

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

? Are you sure you want to disable Firebase Hosting?

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

以上です。

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

参考になった方は、ぜひ「はてブ」やSNSでシェアしていただけると嬉しいです。