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

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

誰向けの内容か？

この記事は下記のような悩みがある方に向けた内容となっています。
もし該当するものがあれば、ぜひ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

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の設定を始めます。

Firebase{:target=”_blank”}

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