SPAサイトをFirebaseで公開するまでの手順

概要

firebaseとvue.jsをほぼ使ったことない人向けに、簡単にSPAのサイトを公開するまでの手順を説明します。
とりあえず動くもの公開したい！って人のために最短の手順になります。
今回はvue.jsを例にしますが、他のフロントフレームワークでもほぼ同じなので大丈夫です。
※この前一度聞かれたので、いっそ記事にしてしまえと思って書きました。

手順

1,firebase のプロジェクト作成

以下のURLからfirebaseのコンソールを開き、サイトを公開するプロジェクトを作成します。
https://console.firebase.google.com

2,firebaseのcliツールをインストール

以下ページにcliツールのインストール方法がOSごとにいくつか書かれているので、どれかを使用します。
https://firebase.google.com/docs/cli
個人的にはスタンドアローンにOSごとに準備されたインストーラーを使用することをお勧めします。
npmを使用した場合、バージョンの切り替えが発生したときにいきなりコマンドが使えない、ようなしょうもない事故が起きたためです。

npmは便利ですがツールのインストール方法は考えましょう。

3,vueのプロジェクトを作成(各言語ごとに置き換えてください)

npmが入っている前提で書いています。
インストール方法はコチラ→公式ダウンロードサイト
npm install -g @vue/cli-service-global
vue create hello-world

4,作ったプロジェクトにfirebase のプロジェクトを紐付け

公式サイトはコチラ→公式ドキュメント
すでに作成済のプロジェクトに対してfirebaseに公開するための設定を行います。
・firebaseに紐づくGoogleアカウントでログイン
$ firebase login
・公開したいプロジェクトのディレクトリ内でfirebaseを実行
$ fireabse init
・firebaseの設定ファイル確認
$ cat firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

プロジェクトがvueであれば上記のような設定ファイルになっていればOK。
簡単に要素の説明をすると、、、
public：デプロイするファイルが入ったディレクトリ名
ignore：デプロイする際に対象から外すディレクトリ、ファイル名のリスト

5,ビルド＆デプロイ

一通り設定が終わったらあとは公開するファイルを作り、デプロイするだけです。
$ npm run build
$ firebase deploy

コマンド実行後、このURLで見れますよーというリンクが表示されるのでクリック！

6,確認

サイトを開き、vueのheloworldページが表示できればOKです。
あとは自分で作りたいものをどんどん作っていきましょう。

個人的に初めてfirebaseで公開したプロジェクトをgithubに置いているので参考までに。

まとめ

いかがだったでしょうか？
一度この手順を踏んで公開してしまえば、あとはデプロイしたいときにfirebase deployのコマンドを使えばいいので、楽ちんです。

やってみると簡単なので、ぜひともfirebaseを使って色々なアプリケーションを作ってみてください！