開発
タグ 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のユーザーが追加されます。
オススメ記事
-
2020/1/3開発
FirebaseでCloud Storageに画像をアップロードする
今FirebaseとReactでアプリを開発中で、画像をアップロードする部分を作ったのでメモ。
-
2020/1/1開発
2020年にネイティブアプリを開発する方法
去年2019年にネイティブアプリを開発する方法という記事を書きました。その中では1. ネイティブ言語、ネイティブプラットフォーム, 2. React Native, 3. Flutterの3つの方法を紹介していました。2020年はどういう感じになりそうか、という実感を書いておきたいと思います。
-
2019/12/14開発
GitHub Pagesでブログを運用し始めてから4年くらいたった
このサイトはGitHub Pagesで運用しています。運用を開始してから4年くらいたったので、GitHub Pages運用のTipsでも書いておこうかと思います。
-
2019/12/6開発
UIScrollViewとUIStackViewで、UITableViewのハイライトを作る
UITableViewのようなレイアウトを作る際に、UIScrollViewとUIStackViewを使って作る場合もあるかと思います。UITableViewは選択されたセルをハイライトすることができますが、UIScrollViewとUIStackViewの場合はそのままではハイライトができません。今回はセルのハイライトを再現する方法を紹介します。
-
2019/11/26開発
SwiftUIでNavigationLinkがクラッシュする - Tried to pop to a view controller that doesn't exist
SwiftUIで、公式チュートリアルで紹介されているPageViewの中にNavigationLinkを入れて、プッシュ遷移した後に戻るボタンでポップすると、Tried to pop to a view controller that doesn't exist というエラーが発生してクラッシュしてしまいました。
-
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から画像を取得して表示する方法を紹介します。
運営者プロフィール
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、ブロックチェーン、家族、ガジェット、Apple関係のことについて書いています。