Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away