Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hisayuki

【Firebase】Firebaseのチュートリアルでチャットアプリを作ってみた【ホスティング編】

Last updated at Posted at 2020-01-03

Google Codelabs チュートリアル

個人的にAngularでやりたかったので、こちらのチュートリアルを選定しました。
Cloud Functions for Firebase (Angular)

スクリーンショット 2020-01-03 10.36.03.png

Git clone

Gitからサンプルプロジェクトを持ってきます。

スクリーンショット 2020-01-03 10.37.32.png

console
git clone https://github.com/firebase/friendlychat-web

スクリーンショット 2020-01-03 10.37.11.png

ただ、この中で今回使うのは、cloud-functions-angular-startだけなので、中身を取り出してほかは消します。

スクリーンショット 2020-01-03 10.40.08.png]

ここは自由ですが、僕はここでgit initでバージョン管理します。
あとで修正する場所とかわからなくなるの嫌なので・・・

Firebaseのプロジェクト作成

まずプロジェクトを作っていきます。

スクリーンショット 2020-01-03 10.45.44.png

プロジェクト名をFriendlyChatにして、続行します。

スクリーンショット 2020-01-03 10.46.24.png

今回はサンプル作成なのでAnalyticsは使わずに行きます。
これを有効にした場合は、Analyticsを紐付けるGoogleアカウントを聞かれますのでｗ
もちろん、あとから有効にすることも可能です。
このままプロジェクト作成に進みます。

スクリーンショット 2020-01-03 10.50.54.png

少ししたらプロジェクトが完成します。
続行で次に行きます。

スクリーンショット 2020-01-03 10.52.04.png

ダッシュボードに移動するので、これでベースになるプロジェクトは完成です。

スクリーンショット 2020-01-03 11.01.03.png

WebApplicationの初期化

Firebaseへアプリの登録

サンプルコードにFirebaseを追加していきます。
まずはダッシュボードにあるWebアプリへの追加ボタンを押します。

スクリーンショット 2020-01-03 11.17.46.png

次の画面ではApplicationのニックネームを入力します。
ここでは、friendlychat-angularと入力します。
プロジェクト名と一緒にせずに見分けが付くようにしました。

加えて、Hostingの設定も自動で設定させるためのチェックをつけて、アプリ登録に進みます。

スクリーンショット 2020-01-03 11.35.19.png

Firebase SDK の追加

次の画面では、<body>タグに埋め込むscriptのスニペットが表示されます。

スクリーンショット 2020-01-03 11.36.23.png

先程Githubからcloneしたプロジェクトのindex.htmlに埋め込みます。
埋め込んだら次に進みます。

index.html
<body>
  <app-root>Loading...</app-root>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="/__/firebase/7.6.1/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#available-libraries -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

Firebase CLI のインストール

次はfrebase-toolsをnpmで取得します。
画像ではグローバル領域にインストールしてますが、嫌なので yarnでプロジェクト内の、devDependenciesみにします。

スクリーンショット 2020-01-03 12.12.31.png

プロジェクト内で開発時利用にするので、こちらのコマンドで追加

console
$ yarn add --dev firebase-tools

package.jsonにscriptを追加します。
追加したのは"fb": "firebase"です。

package.json
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "fb": "firebase"
  },

Firebase Hosting へのデプロイ

次の画面では、Firebase CLIからFirebaseへdeployする作業ですが、実際はログイン作業のみでOKです。

console
$ yarn fb login
yarn run v1.21.1
$ firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=**********

Waiting for authentication...

✔  Success! Logged in as *******@gmail.com
✨  Done in 121.47s.

コマンド結果は上記のとおりですが、途中ブラウザが立ち上がって以下の画面が表示されます。

まず、自分のGoogleアカウントを選びFirebaseからのアクセスを許可します。
このあたりは他のGoogleAuthenticationとか変わらないです。

スクリーンショット 2020-01-03 12.22.40.png

スクリーンショット 2020-01-03 12.23.43.png

最後にこの画面がでたら、ターミナル側でSuccessが表示されています。
スクリーンショット 2020-01-03 12.23.51.png

次のコマンドのfirebase initはなしでOKです。
各Serviceの.rulesファイルを作るためのコマンドですが、Githubから取得したプロジェクトには既に.rulesファイルがあるため、行うと上書きするか問われます。

新規でプロジェクトを立ち上げる場合のみに行いましょう。

最後にdeployですが、ここも一旦スルーします。
Angularは一度buildをしないといけないのと、environmentの設定が必要なので。

ログインが終わりましたら、コンソールに戻ります。
画面に戻ると、Applicationが1つ追加されています。

スクリーンショット 2020-01-03 12.59.34.png

スクリーンショット 2020-01-03 12.57.58.png

Environmentの追記

初期化の最後に環境変数の設定を行います。
Applicationの画面から以下のボタンをで詳細画面を開きます。

チュートリアルには書いてないですが、リージョンの指定をしないとStorageの作成でコケます。
なので、このタイミングでリージョンを指定します。

スクリーンショット 2020-01-03 16.40.39.png

asia-northeast1(東京リージョン)を指定します。

スクリーンショット 2020-01-03 16.41.07.png

選択したら、完了ボタンを押します。
尚、無料枠を使っている間はリージョン変更はできないみたいです。

スクリーンショット 2020-01-03 16.41.16.png

リージョン指定が完了したら以下の様に表示されます。

スクリーンショット 2020-01-03 16.42.22.png

Firebase Cloud MessagingのID追加

環境変数に追加したmessagingSenderIdをsrc/firebase-messaging-sw.jsにも追記します。

firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  // TODO add your messagingSenderId
  messagingSenderId: '722748052014'
});
var messaging = firebase.messaging();

Google Authを有効化

開発メニューのAuthenticationを選択し、ログイン方法を選びます。

スクリーンショット 2020-01-03 23.47.06.png

Googleアカウントでのログインを有効にするため、編集のアイコンを押します。

スクリーンショット 2020-01-03 23.47.34.png

編集画面の右上のトグルボタンで有効にし、プロジェクトのサポートメールを選択します。
おそらくプロジェクトに参加されているメンバーのメールアドレスが表示されます。
今回は個人なので自分のメールアドレスしか選択肢がなかったので、自分のメールアドレスを選択しました。
メールアドレス選択後に完了ボタンを押します。

スクリーンショット 2020-01-03 23.48.04.png

Authenticationの画面で、Googleのステータスが有効になっていたら完了です。

スクリーンショット 2020-01-03 23.48.36.png

Angular CLIのインストール

チュートリアル用のプロジェクトには既にAngularCLIがpackage.jsonに含まれているため不要です。

スクリーンショット 2020-01-03 13.26.12.png

Firebase CLIのインストール

さっきインストールしたので不要です。

スクリーンショット 2020-01-03 13.26.26.png

Firebaseへのdeploy

今回の記事のゴールになる、FirebaseのHosting機能へのデプロイになります。

スクリーンショット 2020-01-04 0.40.06.png

build

deployですが、Angularは一度buildをしないといけないので先にbuildします。

console
$ yarn build
yarn run v1.21.1
$ ng build --prod
Date: 2020-01-03T03:43:00.961Z                                                          
Hash: dfb6376133e3c5ab2a35
Time: 73431ms
chunk {0} main.4af57583d537a669e5ff.bundle.js (main) 1.43 MB [initial] [rendered]
chunk {1} polyfills.0b33fa85a7a0d61fff6f.bundle.js (polyfills) 63 kB [initial] [rendered]
chunk {2} styles.b8bba95fab8adefc8f7b.bundle.css (styles) 84 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]
✨  Done in 77.08s.

プロジェクト指定

CLIでfirebase内のProfectを使うか指定します。

$ yarn fb use --add
yarn run v1.21.1
$ firebase use --add
? Which project do you want to add? friendlychat-58148
? What alias do you want to use for this project? (e.g. staging) friendlychat

Created alias friendlychat for friendlychat-58148.
Now using alias friendlychat (friendlychat-58148)
✨  Done in 10.08s.

What alias do you want to use for this project?はフリー入力で、ここではfriendlychatと入力してます。
指定後にはprofectディレクトリ内の.firebasercに以下のような記述がされます。

.firebaserc
{
  "projects": {
    "friendlychat": "friendlychat-58148"
  }
}

deploy

package.jsonにscriptを追加します。
追加したのは"deploy": "firebase deploy --except functions" です。

package.json
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "fb": "firebase",
    "deploy": "firebase deploy --except functions"
  },

コマンドからdeployします。

console
$ yarn deploy
yarn run v1.21.1
$ firebase deploy --except functions

=== Deploying to 'friendlychat-58148'...

i  deploying database, storage, hosting
i  database: checking rules syntax...
✔  database: rules syntax for database friendlychat-58148 is valid
i  firebase.storage: checking storage.rules for compilation errors...
✔  firebase.storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
i  hosting[friendlychat-58148]: beginning deploy...
i  hosting[friendlychat-58148]: found 12 files in dist
✔  hosting[friendlychat-58148]: file upload complete
i  database: releasing rules...
✔  database: rules for database friendlychat-58148 released successfully
✔  storage: released rules storage.rules to firebase.storage
i  hosting[friendlychat-58148]: finalizing version...
✔  hosting[friendlychat-58148]: version finalized
i  hosting[friendlychat-58148]: releasing new version...
✔  hosting[friendlychat-58148]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-58148/overview
Hosting URL: https://friendlychat-58148.firebaseapp.com
✨  Done in 22.53s.

Firebaseへのdeploy後

ホスティング画面

スクリーンショット 2020-01-03 23.56.05.png

動作検証

ページ表示

deploy後に表示されたURLに飛んでみました。

スクリーンショット 2020-01-03 17.15.15.png

ログイン

右上のログインボタンを押すと、GoogleAccountの選択画面がでます。
Authenticationの設定がされているため、GoogleAccountでのApplicationへのログインが出来るようになってます。

スクリーンショット 2020-01-04 0.02.29.png

GoogleAccountでのログインをすると右上にはアカウント情報の表示と、ログアウトが表示されるようになります。

スクリーンショット 2020-01-04 0.03.16.png

Authenticationの設定画面でも、新規のユーザーが表示されるようになります。

スクリーンショット 2020-01-04 0.04.36.png

メッセージ送信

実際にコメントを入れてSendボタンでメッセージを飛ばします。

スクリーンショット 2020-01-04 0.13.08.png

すぐその場で飛ばしたメッセージが表示されます。

スクリーンショット 2020-01-04 0.13.16.png

このときに初めてコンソール側でデータベースが作られている事が確認できます。

スクリーンショット 2020-01-04 0.15.23.png

ここまでで一応、functionで追加する機能以外は実装できたことになります。
Google Codelabの進捗としては、13ページ中6ページまでが終わったことになります。

まとめ

Qiitaを書きながらなのもありましたが、意外と時間がかかりました💦
ここまではホスティングまでなので、functionはまた別で書きたいと思います。

詳しいまとめは別途ブログの方に書いてきます。

追記 2020/1/4

全体の感想や躓いたところ、未解決部分はブログに書きました。
https://hisa-tech.site/try-firebase-chatapp-hosting/

修正 2020/1/4

Firebaseへのホスティングの場合、環境変数は<body>タグに組み込んだ<script src="/__/firebase/init.js"></script>だけで大丈夫でした！
init.jsの中身見たら同じこと書いてありました💦

こちらをご参考に
https://firebase.google.com/docs/web/setup?authuser=0#add-sdks-initialize

4
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?