【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】

Firebase

この記事ではFirebaseを使うメリットについて紹介します。
また、Firebaseでどのくらい簡単にWebアプリを公開できるかの一例として、Vue.jsで作ったアプリをFirebaseのHostingで公開する手順について解説します。

Vue.jsを使ったSPAの作り方を記事にしました。よろしければあわせてご覧ください。

Vue.js + axios + Vue Routerで作る!シンプルなSPAの作り方
この記事では、SPAがはじめてという方向けに、"Vue.js"と"Vue Router"、"axios"を使った、SPAの作り方を紹介します。そのため、「SPAのアプリケーションを作ってみたいけれど、どこから手をつければ良いかわからない...
スポンサーリンク

誰向けの内容か?

この記事は下記のような悩みがある方に向けた内容となっています。
もし該当するものがあれば、ぜひFirebaseを試してみてください。

「制作したポートフォリオをできるだけ簡単に公開したい」
「Vue.jsやReactを使ってWebサービスを作りたいけれど、バックエンドは苦手なので避けたい」
「フロントエンドの勉強で何か作りたいけれど、バックエンドの実装に時間を掛けたくない」

Firebaseのメリット

Firebaseは”mBaaS”(mobile Backend as a Service)、または”BaaS”(Backend as a Service)と呼ばれるサービスです。

Backendとあるように、Firebaseはバックエンド(サーバサイド)の機能を提供しています。

Firebaseを使うと、バックエンド機能をある程度まかなうことができるようになります。

サーバサイドの開発期間を短縮できるため、フロントエンドエンジニアにとってだけでなく、フロントエンドを学びたいサーバサイドエンジニアにとってもFirebaseは有益なサービスです。

豊富なプロダクト

Firebaseは2018年9月11日時点で18個ものプロダクトを提供しています。

その中には”Realtime Database(NoSQLクラウドデータベース)”や、”Authentication(認証機能)”が含まれていて、複数のプロダクトを組み合わせて利用することができます。

FirebaseでVue.jsで作ったプロジェクトを公開する

ここからは、FirebaseでWebアプリを公開するまでの流れを解説したいと思います。

Firebaseを使うと手軽にWebアプリを公開できることを知ってもらうことが目的なので、Webアプリは”Vue CLI”を使って作成したデフォルトのアプリを使用します。

環境の説明

今回使用した環境は下記の通りです。

  • システムのバージョン: macOS 10.13.4
  • npmのバージョン: 6.2.0
  • Vue CLIのバージョン: 3.0.1
  • Firebase CLIのバージョン: 4.2.1

備考

npmのインストール方法を記事にしました。まだインストールしていない方は、合わせてご覧ください。

MacにNode.jsとnpmをインストールする方法【初心者向け】
この記事では、MacにNode.jsとnpmをインストールして、npmコマンドを使えるようにする方法を紹介しています。npmとはnpmは「Node Package Manager」の略称です。その名前の通り、Node.jsのパッケー...

Vue.jsのプロジェクトを作成

Vue.jsのプロジェクトは、次のコマンドで作成します。


$ vue init webpack first-firebase

? Project name first-firebase
? Project description A Vue.js project
? Author aiiro
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

ローカルサーバーでVue.jsの動作を確認

プロジェクトを作成ができたら、ローカルサーバーを起動して、アプリケーションが動くかどうかを確認します。


$ cd first-firebase
$ npm install
$ npm run dev

次の画面が表示されていれば、起動はOKです。

ターミナルで”Ctrl + C”を押して、ローカルサーバを停止しておきます。

Firebaseのセットアップ

Firebaseにログイン

アプリケーションの動作が確認できたところで、Firebaseの設定を始めます。

tps://firebase.google.com/

Firebaseにアクセスし、右上の「コンソールへ移動」をクリックして、コンソール画面に移動します。

Firebaseプロジェクトの作成

Firebaseコンソール画面の「プロジェクトを追加」をクリックします。

そうすると、プロジェクト名やプロジェクトIDを入力する画面が表示されます。

「プロジェクト名」に”first-firebase”を、「アナリティクスの地域」に”日本”を設定します。

「プロジェクトID」は、プロジェクト名のうしろに自動で設定された英数字がついていますが、今回はサンプルのプロジェクトのため、気にしないことにします。

「次へ」をクリックします。

「新しいプロジェクトのデータ共有のカスタマイズ」の画面で「プロジェクトの作成」を選択します。

プロジェクトの準備ができるとメッセージが表示されますので、「次へ」をクリックします。

プロジェクトが作成されると、作成したプロジェクトの画面が表示されます。

Firebaseをアプリケーションに組み込む

プロジェクトが用意できたので、Vue.jsにFirebaseを追加していきます。

画面左のナビゲーションにある歯車アイコンをクリックして、「プロジェクトの設定」をクリックします。

「ウェブアプリにFirebaseを追加」をクリックすると、HTMLのscriptタグが表示されるので、「コピー」ボタンでコピーします。

コピーしたコードは”first-firebase/index.html”にコピーしたコードを貼り付けます。

index.htmlは次のようになります。

Firebase CLI

Firebase CLIの導入

ターミナルでFirebaseのコマンドを実行できるようにするために、Firebase CLIを導入します。

Firebase CLI Reference  |  Firebase

次のコマンドを実行して、”firebase-tools”をインストールしてください。


$ npm install -g firebase-tools

インストールができたら、Firebase CLIを使ってFirebaseにログインします。


$ firebase login

“firebase login”を実行すると、匿名の情報を収集して良いかどうか質問されますので、回答してください。

Allow Firebase to collect anonymous CLI and error reporting information?

質問に回答すると、ブラウザが起動します。

Firebase CLIの使用を許可すると、Firebase CLIからのログインに成功します。

Firebase CLIで設定ファイルを作成

プロジェクト用のFirebaseの設定ファイルを作成します。

ターミナルで”first-firebase”ディレクトリに移動して、”firebase init”を実行してください。


$ firebase init

どの機能をセットアップするか質問されるので、”Hosting”をスペースキーで選択にして、Enterを押します。

Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

いくつか質問が表示されるので、回答していきます。

Select a default Firebase project for this directory

“first-firebase”を選択します。

What do you want to use as your public directory?

「public directory(公開用ディレクトリ)をどこにするか?」という質問には、“dist”を入力します。

Vue.jsでは”npm run build”を行うと、”dist”ディレクトリに公開用のビルドファイルが生成されるためです。

※ distはdistribution(配布)の略です。

“firebase init”が完了すると、first-firebaseディレクトリの配下に “.firebaserc” と “firebase.json” が作成されています。

lsコマンドでファイルが作られているかどうか、確認してみましょう。


$ ls -la | grep firebase

===================================
-rw-r--r--    1 aiiro  staff      58  9 10 20:37 .firebaserc
-rw-r--r--    1 aiiro  staff     132  9 10 20:37 firebase.json

Vue.jsプロジェクトをビルド

アプリケーションをデプロイする前に、ビルドして”dist/index.html”を生成しておきます。


$ npm run build

FirebaseにVue.jsをデプロイ

準備が一通り完了したので、FirebaseのHostingを利用して、Webアプリを公開します。

Firebase Hosting  |  Firebase
Firebase Hosting provides fast and secure hosting for your web app and your static and dynamic content.

デプロイには”firebase deploy”コマンドを使用します。


$ firebase deploy

公開したプロジェクトを確認

“firebase deploy”をしたときに、ターミナル上に表示されたURLにアクセスします。

デプロイに成功していると、Vue.jsのサンプルアプリが表示されます。

プロジェクトの公開を停止

デプロイしたプロジェクトの公開を停止したい場合は、”hosting:disable”を使用します。


$ firebase hosting:disable

公開を停止したあとにブラウザでアクセスして、アプリケーションが表示されなくなったことを確認します。

もし表示されたままの場合は、何度かリロードをしてみてください。

Firebaseプロジェクトの削除

Firebaseプロジェクトの削除は、この記事の”Firebaseをアプリケーションに組み込む”で、「ウェブアプリにFirebaseを追加」した画面から行います。

コンソール画面から”first-firebase”プロジェクトを選択し、左サイドメニューの歯車アイコン => 「プロジェクトの設定」を選択します。

ログイン - Google アカウント

画面最下部に「プロジェクトの削除」がありますので、クリックします。

プロジェクトIDを入力するように求められますので、入力してプロジェクトの削除を実施します。

まとめ

Firebaseを使うと、複雑な設定なしでWebアプリを公開することができるようになります。

FirebaseはWebアプリを公開するホスティング機能だけでなく、Realtime Database等、他にもいくつものプロダクトを提供しています。
プロダクトを組み合わせることで、作れる機能も増えていきますので、興味が湧いた方は調べてみてください。