開発
タグ Firebase React JavaScript
現在FirebaseでWebアプリを作っています。アプリを作る上でユーザー認証は欠かせないものの、作るのが大変ということが多いですが、Firebaseを使うと簡単に実装することができました。
私はWebアプリを作る上でReactを使うことが多いので、今回はFirebaseとReactでユーザー認証を行うサンプルアプリを実行して、Firebaseでホスティングしてみました。
今回参考にしたサンプルはこちらです。
rwieruch/react-firebase-authentication
Firebaseにプロジェクトを登録する
まずはFirebaseのコンソールから、プロジェクトを登録します。
アプリを設定する
プロジェクトを登録したらログインの設定を行います。
サイドメニューのAuthenticationから、メールアドレスによるログインを有効にします。
Firebaseコマンドラインツールのインストール
Firebaseにアプリをデプロイするには、Firebaseコマンドラインツールをインストールする必要があります。
npmパッケージで提供されているので、npmでインストールします。
npm intall -g firebase-tools
その後ターミナルから以下のコマンドを実行します。
firebase login
cd /path/to/project/directory // プロジェクトディレクトリに移動
firebase init
firebase initを実行すると、使用する機能やプロジェクトを聞かれるので該当するものを選択します。
この場合は、Firestore,Hosting,Storageを有効にしてみました。
また途中で、 What do you want to use as your public directory?と聞かれるので、Reactアプリに合わせるためにbuildに変更してください。
プロジェクトを作成した後も、firebase.jsonを修正すれば変更可能です。
initが終了したら、試しにdeployしてみます。
firebase deploy
これでデフォルトのページがデプロイされました。
サンプルアプリを実行する
認証用のサンプルアプリをダウンロードします。
rwieruch/react-firebase-authentication
ダウンロードしたら、
package.json
public
src
をコピーします。
その後npmパッケージをインストールします。
npm install
インストール後は、src/firebase/firebase.jsの中のconfigを自分のプロジェクトのものに変更します。
prodとdevが定義されていますが、一旦同じものを入れました。
configは、Firebaseのコンソールのトップ、ウェブアプリにFirebaseを追加から表示することができます。
設定を書き換えたら、アプリをビルドしてfirebaseにデプロイします。
npm run build
firebase deploy
以上で、サンプルアプリがFirebaseにデプロイされました。
デプロイ後以下のようなページが表示されていれば成功です。
サインアップページからユーザー登録をすると、Firebaseのユーザーが追加されます。
オススメ記事
-
2021/2/17開発
brew upgradeで Your CLT does not support macOS 11というエラーがでた
-
2020/12/1開発
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
-
2020/11/27開発
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
-
2020/6/23開発
Platform State of the Unionまとめ
Platform State of the Unioまとめ
-
2020/6/23開発
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
-
2020/5/31開発
GitHub Pagesで無料ブログを作成する - Part4 自分のオリジナルのテーマを作る
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
-
2020/5/28開発
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
-
2020/5/26開発
GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる
JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。
-
2020/5/24開発
GitHub Pagesで無料ブログを作成する - Part1 GitHubにリポジトリを作ってサイトを公開する
以前、GitHub Pagesでブログを運用し始めてから4年くらいたったというブログを書いたのですが、概要を書いただけで具体的な構築方法はあまり記述していなかったので、何回かに分けてブログを作っていく方法を書いていきたいと思います。
-
2020/1/3開発
FirebaseでCloud Storageに画像をアップロードする
今FirebaseとReactでアプリを開発中で、画像をアップロードする部分を作ったのでメモ。
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、趣味などについて書いてます