開発
タグ 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のユーザーが追加されます。
オススメ記事
-
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を始めました。
-
2018/7/1開発
2018年最新版 GitHub Pagesでカスタムドメインを使用する
のブログはGitHub Pagesとjekyllで運用していますが、カスタムドメインの設定をしたのでその方法を記載しておきます。
-
2018/6/30開発
FirebaseとReactとReduxで認証付きのWebアプリのサンプルを作りました
先日書いた記事 FirebaseとReactで認証付きアプリのサンプルを実行するまでの続きで、この認証サンプルをReduxを使うように変更したサンプルを作ってみました。
-
2018/6/13開発
What's new in ARKit 2 ~ ARKit2の新機能
-
2018/6/8開発
Swift4.2ではEnumを一覧で取得できるようになった
WWDC2018のWhat's new in SwiftでSwift4.2のアップデートが発表されていました。Swift4.2では、CaseIterableプロトコルをEnumに指定することで、allCasesというプロパティが使用できるようになり、Enumの一覧を取得できるようになったようです。
-
2018/6/7開発
WWDC2018で発表された機械学習モデル生成フレームワーク Create MLについて
-
2018/6/6開発
ffmpegを使ってmovファイルをgifに変換する
アプリの開発で、スクリーンを動画でキャプチャしてgifにして貼り付けるということをよく行うと思いますが、ffmpegを使用すると簡単にmovをgifに変更できました。
-
2018/6/5開発
WWDC2018キーノートまとめ
WWDC2018 キーノートまとめ iOS12, watchOS5, tvOS12, macOS 10.14 Mojave
運営者プロフィール
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、仮想通貨、家族、ガジェット、Apple関係のことについて書いています。