開発
タグ 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のユーザーが追加されます。
オススメ記事
-
2019/11/2開発
GitHub Sponsorsに登録する方法
先日GitHub Sponsorsに承認されました。GitHub Sponsorsに登録することで、スポンサーを募ることができます。逆に、OSS開発をしている開発者のスポンサーになることができます。
-
2019/10/21開発
SwiftUIでListの中でNavigationLinkを複数使うとうまく動かない
SwiftUIでListの中でNavigationLinkを複数使うとうまく動かなかったのでメモです。
-
2019/10/15開発
SwiftUIでActivityIndicatorを使う方法
SwiftUIでActivityIndicatorを使う方法を紹介します。
-
2019/10/14開発
iPhoneシミュレーターでダークモードにする方法
iPhoneシミュレーターでダークモードにする方法を紹介します。
-
2019/10/12開発
SwiftUIでURLから画像を取得して表示する方法
SwiftUIでURLから画像を取得して表示する方法を紹介します。
-
2019/10/12開発
SwiftUIでUIPageViewControllerとSegmentedControlを使う方法
SwiftUIでUIPageViewControllerとSegmentedControlを使う方法を紹介します。
-
2019/8/11開発
1Passwordを6にダウングレードしました
パスワード管理には昔から1Passwordを使っているのですが、最近1Passwordが7にアップグレードされました。AppStoreからインストールしていたので、確かそのままインストールしたはずですが、1Password7になると、月額のサブスクリプションに登録しないと、readonly と言う表示になり、既存のデータを更新できなくなってしまいました。
-
2019/8/5開発
no submodule mapping found in .gitmodulesを解決する
no submodule mapping found in .gitmodulesを解決する
-
2019/7/25開発
SwiftUIでWebViewを使う
SwiftUIでWebViewを使ってみました。SwiftUI専用のWebViewはまだないようで、WebKitのWKWebViewや、SafariServiceのSFSafariViewControllerを使う必要があります。
-
2019/6/15開発
macOSにPythonの環境を構築する方法
Pythonは機械学習やデータ分析でもっとも人気のある言語だと思います。ここではmacOSにPythonの環境を作る方法を紹介します。
運営者プロフィール
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、ブロックチェーン、家族、ガジェット、Apple関係のことについて書いています。