開発
タグ 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/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の環境を作る方法を紹介します。
-
2019/6/10開発
macOS 10.15 Catalinaのベータバージョンを安全にインストールする方法
WWDC2019でmacOS 10.15 Catalinaが発表され、Apple Beta Software Programに参加している場合はベータバージョンのCatalinaをインストールすることができます。
-
2019/3/18開発
Interface BuilderのUI要素にベースのカスタムクラスが適用されているか検出する
Interface BuilderのUI要素にベースのカスタムクラスが適用されているか検出する方法について。
-
2019/1/5開発
2019年にネイティブアプリを開発する方法
AppleがAppStoreを開始してから10年が経ちました。たくさんの人々がアプリを使っていますし、2019年もこのアプリプラットフォーム上で多くのイノヴェイションが生まれると思います。これまで様々なプラットフォームで色々なフレームワークを使ってアプリを開発してきました。今はSwiftでiOSアプリを開発していますが、過去にはWindowsアプリを開発していたり、ReactやVueといったフレームワークでWebアプリを開発したり、ReactNativeやFlutterでマルチプラットフォーム向けのネイティブアプリを開発したりしました。過去数年の間に、色々なツールが出てきては消えていきましたが、2019年にアプリを開発するとしたら以下の3つかなと思っています。
-
2018/10/15開発
FlutterでiOS12のデバイスにアプリをインストールすると日本語が明朝体になる
FlutterでiOS12のデバイスにアプリをインストールすると日本語が明朝体になる
-
2018/8/19開発
App Store ConnectにアプリをアップロードしたらToo many symbol filesと怒られた
App Store ConnectにXcodeからアプリをアップロードすると、少し時間がたってからメールが届きました。そのメールはアプリに問題が見つかりましたという題名で、Too many symbol filesというエラーが書かれていました。
-
2018/7/23開発
Flutterの始め方
Dart言語を使ったクロスプラットフォーム(iOS, Android)のモバイルアプリ開発フレームワークであるFlutterを始めました。
運営者プロフィール
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、ブロックチェーン、家族、ガジェット、Apple関係のことについて書いています。