今回は、これまでに作成したアプリを Firebase 上にデプロイします。

この記事で分かること
・Firebase デプロイの手順

Firebaseデプロイの手順

Firebase は、Googleのクラウドサービスの一つで、スマホアプリや小規模Webアプリのサーバサイドを提供するサービスです。

Firebase を使えば、サーバサイドの開発や管理を意識することなく、サーバレスにアプリ開発を行うことができます！　とりあえずアプリを公開したい、くらいの利用であれば、デフォルトの Spark プラン（無料）で十分に対応できます。

手始めに、Googleアカウントでログインし、アプリに紐づけるプロジェクトを作成します。

プロジェクトが作成できたら、デプロイまでの設定をコマンドラインで行います。
コマンドラインからFirebase関連のパッケージを使えるように、グローバルインストールを実行します。

npm install -g firebase-tools

インストールできたら、Firebase にログインします。

firebase login

アプリのプロジェクトディレクトリに移動し、Firebase 用の初期設定を行います。

firebase init

どの機能を使うか聞かれますが、今回はデプロイするだけなので、hosting のみにします。

? Which Firebase CLI features do you want to setup for this folder? Press Space to select featur
> to select)
>( ) 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 コンソールで作成したプロジェクトを選択します。

? Select a default Firebase project for this directory: (Use arrow keys)
> [don't setup a default project]
  nuxt-test-app-2019 (nuxt-test-app-2019)
　... ...

公開するディレクトリを指定します。デフォルトでは public ですが、Nuxt.js では dist ディレクトリが公開用に作成されるので、dist にしておきます。

? What do you want to use as your public directory? (public) dist

Firebase 上で作成したプロジェクトが複数ある場合、選択したいプロジェクトが候補に表示されないことがあります。その場合は、firebase init コマンドに以下のオプションで、プロジェクトIDを指定してあげるとよいです。

firebase init --project プロジェクトID

これで、アプリのプロジェクトディレクトリ内に以下のディレクトリとファイルが生成されます。

・dist
・firebase.json
・.firebaserc

このとき、dist 内には、index.html と 404.html があるだけですが、さらに、npm コマンドで dist 内に公開用のファイルを生成します。

npm run build

あとは dist ディレクトリをデプロイすれば OK です。

firebase deploy

なお、以下のコマンドで、ローカルホストでの動作確認ができます。

firebase serve

デプロイしたアプリは、以下からアクセスできます。

メモアプリ

Firebase 上からもデプロイしたことが確認できます。

これでアプリを公開できました！（つづく）