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

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

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

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

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