見出し画像

Firebaseの導入

結構前になりますが、AngularにFirebaseの導入をしたので忘れないうちに書き留めておこうと思います。

Firebase とは Google が提供しているモバイルおよび Web アプリケーションのBaaS(バックエンドサービス)です。

Firebaseの機能としては、認証(Authentication)、データベース(Database)、ストレージ(Storage)、ホスティング(Hosting)、Functionsなど便利な機能がたくさんあります。

右上のコンソールへ移動をおして新規のプロジェクトを作成する。

プロジェクトを作成したら、自分が使いたい機能を有効にしていきます。僕は、認証(Authentication)、データベース(Database)、ストレージ(Storage)、ホスティング(Hosting)、Functionsを使います。今後追加があるかもしれませんが

認証(Authentication)は、

スクリーンショット 2020-01-19 6.35.51

自分が使用したい認証方法を選択します。僕はGoogle認証を使いたいので有効にします。

続いてデータベースです。これは本番環境、テストモードの2つがあるのですが、これはどちらでも大丈夫ですが、最終的には本番環境にしましょう。テストモードでは30日間は誰でもデータベースをいじれます。

続いてロケーションです。

スクリーンショット 2020-01-19 6.45.18

自分の地域を選択しましょう。

次にストレージ(Storage)です。ここは画像・音声・動画などを保存する場所です。ここも

スクリーンショット 2020-01-19 6.50.20

この画面になったら完了しましょう。

次にホスティング(Hosting)です。

スクリーンショット 2020-01-19 6.53.04

この画面が出てきます。firebaseをまだインストールしたことがない人はこのコマンドを叩きましょう。

npm install -g firebase-tools

-g をつけるとfirebaseをグローバル環境にインストールすると言う意味です。簡単に言うとこの一回インストールしてしまえばこのPCのどこからでもFirebaseを使えますよとういことです。

次へ押すと下記の画面になります。したがってターミナルでコマンドを叩きましょう。

スクリーンショット 2020-01-19 6.57.50

firebase login
firebase init

firebase init するとこのような画面、似たような画面になると思います。

スクリーンショット 2020-01-19 7.04.35

この質問は何を聞かれているかと言うと、現在のプロジェクトでこの中のどの機能を使いたいですか?と聞かれているので使いたいものをすべて選択します。

スクリーンショット 2020-01-19 7.16.10

スクリーンショット 2020-01-19 7.16.26

ここからずっと質問攻めですw ここはプロジェクトによって、人によって全然違うので僕のを参考程度にスクショを貼っておきます。これを正常に行うと完了で、Firerbaseのコンソールの方に戻ります。

スクリーンショット 2020-01-19 14.15.34

コンソールに進むをクリックします。

スクリーンショット 2020-01-19 14.30.09

この画面でドメインが2つありますが、上のドメインをクリックします。

スクリーンショット 2020-01-19 14.30.17

とりあえずまだ何もしていないのでこの画面が出ていればOKです!!デプロイしないと表示はされないので。

僕はフォルダ構造がめちゃくちゃになっていたのでこのFirebaseの環境構築するのに結構時間がかかりました。

FunctionsではSaas(Software as a Service)の略でクラウドで提供されるソフトウェアのことを指します。このSaaS外部サービスの連携を行うために使用します。今回僕のプロジェクトではSendGrid (メールを送ることができるサービス)、Algolia(検索エンジンを提供してくれるサービス)、Stripe(決済、クレジットカード決済などをすることができるサービス)を使っていきます。Funcionsはまだ触りませんのでこれで環境構築は終了です。

プロジェクトのフォルダをみてみるとFirebaseファイルが作成されていたらOKです!!

スクリーンショット 2020-01-19 14.51.25

Firebaseはとても便利なBaaSです。僕も勉強中なのでたくさん利用者が増えて情報共有したいです!!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

3
法学部生/フロントエンド/SPA開発しています/Javascript/TypeScript/express/React/Angular/Firebase/主にAngularとFirebaseのことについて書いていますhttps://twitter.com/masaaki6262

この記事が入っているマガジン