いろいろなQiita記事を読みながら「なんとなく理解した」レベルを超えられなさそうだったので、一念発起してちゃんとドキュメントを見ようと決意。
Vueを使うので、「Firebase を JavaScript プロジェクトに追加する」スタートガイドを読むことにする。
https://firebase.google.com/docs/web/setup
アプリに Firebase を追加する
まずはFirebaseのプロジェクトを追加する必要がある。なのでFirebaseコンソールでプロジェクトを追加した。
作成したプロジェクトの概要ページで、firebaseをアプリに追加するために必須の設定コードのスニペットを取得する。
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
このあと、利用したいコンポーネントごとにjsファイルをCDNからインクルードしてくる。
たとえば認証系の処理をやりたいならfirebase-auth.jsとか。
開発用ローカル ウェブサーバーを実行する
FirebaseのCLI（firebase-tools）を利用して、firebaseのローカルサーバを実行することができる。
まずはCLIをインストールする。
$ npm install --global firebase-tools
$ firebase --verison
> 4.2.1
$ firebase login
> ? Allow Firebase to collect anonymous CLI usage and error reporting information? # 匿名の情報収集を許可するかどうか
> Visit this URL on any device to log in: # 下記URLに飛んでログインする
> https://accounts.google.com/o/oauth2/auth?client_id=******
つぎにinitコマンドを打って、開発中のアプリケーションをFirebaseに関連づける。
FIrebaseのどの機能を利用するか聞かれるので、今回は4番目の「Hosting」を選択（spaceで有効）してEnterをクリック。
なおinitコマンドは、カレントディレクトリ上で実行されるので、あらかじめアプリのプロジェクトに移動しておくこと。
$ cd {アプリのディレクトリ}
$ firebase init # Generate a firebase.json (REQUIRED)
$ $ firebase init
> ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
> ◯ Database: Deploy Firebase Realtime Database Rules
> ◯ Firestore: Deploy rules and create indexes for Firestore
> ◯ Functions: Configure and deploy Cloud Functions
> ❯● Hosting: Configure and deploy Firebase Hosting sites
> ◯ Storage: Deploy Cloud Storage security rules
つぎにこのアプリケーションに割り当てるFirebaseプロジェクトを選択する。
今回はすでにコンソール上から作っているので、追加したFirebaseプロジェクトを選択する
> ? Select a default Firebase project for this directory: (Use arrow keys)
> [don't setup a default project]
> Firebase Demo Project (fir-demo-project)
> ❯ {追加されたFirebaseプロジェクト}
> [create a new project]**strong text**
つぎに公開ディレクトリを指定することができる。
未指定のままEnterを押すと、シングルページアプリケーションとして、すべてのアクセスがpublic/index.htmlにrewriteされるように設定される。
> Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
> ? What do you want to use as your public directory? (public)
> ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
ここまで終わると、いよいよローカルサーバを開始できる。
オプション未指定の場合はlocalhost:5000で開始されるよう。
firebase serve
http://localhost:5000にアクセスすると、次のようなページになるはず。
なおCtrl + Cで、サイト停止が可能。
初期設定の追加
public/index.htmlの</style>直下に、さきほど取得した設定コードのスニペットを貼り付ける。
ちなみにindex.htmlにAPI Keyなどを貼り付けてしまっていいのか不安に思ったが、どうやらcredentials（認証情報）が知られないかぎりは安全なよう。このあたりは、ちゃんと個々で調べるべきだろう。
関連記事: FirebaseのApiKeyとAppIDはHTMLソースにコピペしてもセキュア
このあと
このindex.htmlを修正しながらFirebaseの機能群を利用していってみようと思います。