EeBlog(テクニカルブログ)

新人プログラマーのアプリ開発 第7回 Firebaseデプロイ

今回は、これまでに作成したアプリを 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 上からもデプロイしたことが確認できます。


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

2019年5月17日 | カテゴリー：アプリ開発

│トップ│