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.

gmailアカウントの取得

firebaseを使用するにはgmailのアカウントが必要になるので、gmailアカウントを取得する。

以下のURLのgmailアカウントを取得するから行う
https://support.google.com/accounts/answer/27441?hl=ja
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3438343237322f39333565333739342d373936392d326537662d653830392d3263323935653536636332622e706e67.png

firebaseコンソールでプロジェクトを作成

gmailアカウントがある状態でfirebaseコンソールにログインする。

https://firebase.google.com/docs?authuser=0
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3438343237322f31336131376130302d653335352d653931342d303162322d3330373166653534326136312e706e67.png

次の画面のプロジェクト作成ボタンを押す
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3438343237322f61386234393064352d623861652d373134302d303934332d3163333930323436633631642e706e67.png

プロジェクト名(なんでもOK)をつけて、規約に同意し、続行する
スクリーンショット 2019-08-25 13.27.13.png

グーグルアナリティクスが必要かどうか聞かれる。サーバーにデプロイしたいだけなので、今は必要ないにチェックしてプロジェクトを作成を押す
スクリーンショット 2019-08-25 13.29.26.png

プロジェクトが作成され、無料プランのSparkプランになっている。

料金に関してはこちら
https://firebase.google.com/pricing/?hl=ja

スクリーンショット 2019-08-25 13.41.18.png

デプロイするアプリをcreate-react-appで作成する

手順はこちら
https://qiita.com/tsuto/items/3a9aafe7982da87c9c81

Firebase-CLIのインストール

コマンドFirebaseを操作できるようになる。

npm install -g firebase-tools

firebase Cliにログインして、Firebaseプロジェクトを初期化する

firebase Cliにログインする

firebase login

以下のようなメッセージがでますが、どちらでもYとNどちらでもOK

Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)

アカウント選択画面に遷移し、そのまま進めると以下のような画面が表示される。
スクリーンショット 2019-08-25 18.17.18.png

先ほどfirebase loginコマンドを使用して、cliにログインしましたが、別のアカウントで接続したいなどの理由でログアウトしたいときは、以下のコマンドを実行する。

firebase logout

続いてFirebaseプロジェクトを初期化する。以下のコマンドを実行

firebase init

以下のメッセージが表示される。どのfirebaseの機能を選択するか聞かれています。今回はHosting機能のみなので、上下の矢印キーでHostingにカーソルを合わせてスペースキーを押す。緑色でチェックが入ったらエンターキーを押す。

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)

◯ 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プロジェクトを選択します。先ほど作成したプロジェクトを上下の矢印キーで選択してエンターキーを押す。

Select a default Firebase project for this directory: (Use arrow keys)
[don't setup a default project]
testproject-〇〇〇 (testproject)
[create a new project]

次の質問ではfirebaseのHostingにアップロードするディレクトリが聞かれていますが、create-react-appでreactを作成した場合、ビルドしたアセットはbuildディレクトリになるので、buildと入力し、エンターキーを押す。

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? (public)

シングルページアプリケーションかどうか聞かれます。yを入力してエンターキーを押す。(存在しないURLを叩くとindex.htmlにリライトされます。)
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

全ての質問に答えると、Firebase initialization complete!のテキストが表示されます。

ここまででディレクトリは以下のようになるはずです。

プロジェクトディレクトリ
├── build
├── firebase.json
├──.firebaserc
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

firebase.json、.firebasercというfirebaseの設定ファイルが生成されています。
先ほどの質問の中でpublicフォルダをbuildに変更したり、アクセスされた時の設定などはfirebase.jsonに記載されています。また、.firebasercはデプロイ先の設定が記載されています。

デプロイ手順

以下のコマンドでデプロイ用の資産を作成します。

npm run build

プロジェクトルートにbuildディレクトリが生成されます。
デプロイコマンドを実行します。

firebase deploy

Deploy complete!と表示されれば成功です。
以下のURLにアクセスするしてデプロイ内容が確認できます。
Hosting URL: https://[プロジェクトID].firebaseapp.com

実際の表示
スクリーンショット 2019-08-25 21.24.53.png

tsuto
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
Comments
No 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
ユーザーは見つかりませんでした