create-react-appでつくったReactアプリをFirebase Hostingにデプロイします。
npmではなくyarnでやります。
アプリのベースをつくる
react-appを作成します。
yarnは最新版にしておきます。
- yarn - https://yarnpkg.com/ja/docs/install#windows-stable
- create-react-app - https://facebook.github.io/create-react-app/docs/getting-started
> 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