0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ReactアプリをFirebaseにHostingしてみた

Posted at

みなさんこんにちは、グリドンです。

前回の記事を読んでくださった皆さん、ありがとうございます。
最近は、「変種型」のコロナウイルスが流行って来ているので、今まで以上に警戒が必要になってきそうですね。

さて、2020年ももうすぐ終わりですが、今日はFirebaseを利用して、Reactアプリをデプロイした流れをアウトプットして行こうと思います!

#Firebase とは
まずは、Firebaseについて軽く説明致します。
FirebaseはGoogle社が作っている、WebアプリやMobileアプリを作るサービスになります。元々は、別の会社が運営していたのを、2014年にGoogleが買収したみたいです。

個人的な意見としては、UIUXもとても使いやすく、「無料版」がはっきり分かれているので、勝手に多額の請求が来てしまった、というような心配はなさそうです。

#Firebaseの設定
それでは、今回の本題へ入ろうと思います。
まずは、プロジェクト作成します。

image.png

[Add project]から、自分のプロジェクトを作成します。
質問に答えていくだけだと思うので、基本的にここは簡単だと思います。

Firebaseの設定はここまで。

#Local環境でFirebaseを設定する
Firebaseの設定が終わったと思うので、次にLocal環境でFirebaseを設定・デプロイして行こうと思います。
まずは、Firebase toolをインストールします。

qiita.js
npm install -g firebase-tools

下記のようなエラーが出た場合は、sudoをつけて試してみてください(Mac用)

Error: EACCES: permission denied

Firebase toolがダウンロードできたら、Firebaseにログインして、Firebaseをイニシャライズします。

qiita.js
firebase login
firebase init

イニシャライズする時も、質問が出てくるので、基本的に質問に答えていけば簡単に設定が終わります。
利用目的はHostingにしてください。

ここまでやれば、ほとんど終わりです。

#Firebaseにアプリをデプロイする
最後に、アプリをFirebaseにデプロイします。

qiita.js
firebase deploy --only hosting:splitting-bill-app

これで、完了。

Firebaseのコンソールから、Hostingを選択して確認してみてください!

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?