LoginSignup
3

More than 5 years have passed since last update.

素のReactアプリをFirebaseにデプロイする

Posted at

create-react-appでつくったReactアプリをFirebase Hostingにデプロイします。
npmではなくyarnでやります。

アプリのベースをつくる

react-appを作成します。
yarnは最新版にしておきます。

> yarn create react-app アプリ名
> cd アプリ名
> yarn

アプリにfirebaseのHostingを設定します。
WindowsではPowerShellで実行します。
firebaseのプロジェクトはconsoleであらかじめつくっておきます。

> yarn global add firebase-tools
> firebase login
> firebase init

init時に聞いてくる質問のうち、「publicのindex.html使う?」に対しては、「build」にします。
また、「index.htmlを置き換える?」に対しては、「No」にします。

ログはこんな感じです。

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confi
rm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  .firebaserc already has a default project, skipping

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File build/index.html already exists. Overwrite? No
i  Skipping write of build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

作成されたfirebase.jsonに以下を追加します。(create-react-appのドキュメントに記載してあります)

    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]

デプロイする

いきなりビルドしてデプロイします。

> yarn build
> firebase deploy

おしまい。

ローカルで実行する場合、yarn startで十分ではありますが、ビルドしたアプリを実行する場合はfirebase serveを使えます。

> firebase serve

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3