あけましておめでとうございます。今年は公私共に実りのある１年にするべく，決意を新たに頑張りたいと思います。Qiitaやはてなブログでのアウトプット，GitHubでのソース公開も積極的に行っていきたいですね。(今の会社からそろそろ巣立とうかと考えながら……)
年始の時間を利用して，前から触ってみたかったGoogleのmBaaSであるFirebaseを試してみました。ホスティング機能だけしか触れていませんが，Googleアカウントさえ持っていればCLIから簡単にアプリをデプロイ出来て便利ですね。 今回はVue.jsで作ったアプリ(Vue CLIが生成するデフォアプリ)をFirebaseにデプロイしてみたので，忘備録がてら手順を書いてみたいと思います。
前提環境
- node.js: 8.9.4
- npm: 6.5.0
- Vue CLI: 3.2.2
1. Firebase Consoleからプロジェクトを作る
ブラウザからFirebase Console(https://console.firebase.google.com/u/0/?hl=ja)にアクセスしましょう。トップページから「プロジェクトを追加する」を選択し，任意の名前でプロジェクトを作成しましょう。ここで入力したプロジェクト名+乱数がアクセス先のURLになります。
2. Firebase Toolsをインストールする
Firebaseの操作をCLIから行うためのツールFirebase Toolsをnpm経由でインストールしましょう。
npm install -g firebase-tools
3. 公開対象のアプリを作る
ここは単純にVue CLIを任意の設定で実行していただければOKです。今回は雛形アプリをそのまま使うのでbuildコマンドで最終成果物まで生成しておきます。要点としては，最終成果物はdistディレクトリに出力される点だけ覚えておきましょう。
4. Firebaseにログインする
ここからFirebase Toolsを使っていきます。
firebase login
まずはログイン処理です。Vue CLIで作成したプロジェクトのルートで上記のコマンドを実行します。すると，ブラウザが起動してFirebase ToolsとGoogleアカウントの紐づけ処理および権限委譲のダイアログが表示されるので，基本的にOKで前に進めていきましょう。成功すると，コンソールに以下のメッセージが表示されるはずです。
Waiting for authentication...
+ Success! Logged in as xxxxxxxxx@gmail.com
5. Firebaseプロジェクトを初期化する
続いてVueプロジェクトをFirebaseプロジェクトとして初期化します。
firebase init
Firebaseのどの機能を使うのか聞かれるのでHostingを選択します。
firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
C:\development\firebase\sample_app
Before we get started, keep in mind:
* You are currently outside your home directory
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confi
rm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Select a default Firebase project for this directory: [don't setup a default project]
=== Hosting Setup
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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
注意すべき箇所があるとすれば以下ぐらいです。
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
- デプロイ対象は「dist」ディレクトリ
- SPA用にWebサーバのrewrite設定を追加する
- index.htmlを上書きしない
6. デプロイする
超簡単。
firebase deploy --project [projectId]
projectIdはFirebase Consoleから確認できます。
=== Deploying to 'xxxxxxxxx'...
i deploying hosting
i hosting[xxxxxxx]: beginning deploy...
i hosting[xxxxxxx]: found 8 files in dist
+ hosting[xxxxxxx]: file upload complete
i hosting[xxxxxxx]: finalizing version...
+ hosting[xxxxxxx]: version finalized
i hosting[xxxxxxx]: releasing new version...
+ hosting[xxxxxxx]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/xxxxxxx/overview
Hosting URL: https://xxxxxxx.firebaseapp.com
５分ほどで環境構築からデプロイまで終わってしまいました。Firebase……恐ろしい子ッ！！
