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

create-react-appで作ったアプリをFirebaseで公開する方法

More than 1 year has passed since last update.

create-react-appで作ったアプリをFirebase(Hosting)で利用する方法についいてまとめました。
ほぼ同じ目的の記事があり参考にさせていただきました。

前提

  • Firebaseでもうプロジェクトが作られている

必要なツールのインストール

まだの人は以下の通り、必要に応じてインストール

npm install -g create-react-app
npm install -g firebase-tools

プロジェクトの作成と動作確認

create-react-app my-app
cd my-app
npm start

ローカルの3000ポートで下記のような画面が起動するはず。

スクリーンショット 2019-09-23 6.47.03.png

これをFirebase上に展開します。

Firebaseで利用できるように設定

ログインしてるか確認。してないならする。

firebase login

Firebaseで利用するための初期化を開始。

firebase init

どの機能使う?

今回はHostingを使うので、Hostingを選びます。

? Which Firebase CLI features do you want to set up for this folder?

 ◯ 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

どのプロジェクト使う?

私は既存のプロジェクト(Firebase側の話)を利用するので、既存のプロジェクトを選択(その後、具体的なプロジェクトを選ぶ)。

? Please select an option: (Use arrow keys)

❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

どのディレクトリをpublicにする?

create-react-appではbuildフォルダにビルドされたアップ対象のフィアル群が出力されるのでbuildを記入。

? What do you want to use as your public directory? build

SPAとして設定する?

Reactで作ったWebはSPAなので、yを選択

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

buildとdeploy

今回は編集も何もせず、そのままテンプレートファイルをbuildしてdeployしてみます。

build

buildは以下の通り。

npm run build

deploy

deployは以下の通り。

firebase deploy --only hosting

deployが完了するとURLが表示されるので、それをブラウザで見てみます。
https://{project_name}.firebase.com/となるようです。

動作確認

ではURLを開いてみます。

スクリーンショット 2019-09-23 6.47.10.png

動いているようです。後はひたすら開発するだけ。

zaburo
こんにちは。自分用のメモをだらだら公開しています。
Why not register and get more from Qiita?
  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