Help us understand the problem. What is going on with this article?

Firebaseを触ってみた

More than 1 year has passed since last update.

はじめに

ラクスアドベントカレンダー 11日目担当のyusuke-nakanoです。
書く内容を特に決めていなかったので、つい最近触り始めたFirebaseについてちょこっとした記事を書きます。

Firebaseとは

Firebaseとは、ざっくり言うとGoogleが運営している"サーバー側の処理を肩代わりしてくれるサービス"のことです。モバイルアプリ開発でバックエンド側の機能を提供してくれる便利なシロモノです。この際なので提供されている機能を紹介したいところですが、あまりにも多機能すぎて紹介しきれないorz
Firebase_1.png

いま私は、勉強がてらVue.jsとFirebaseを使って簡単なWebサービスを作成しているのですが、このFirebaseがお手軽に使えたので記事にしてみます。

参考にした書籍

技術書典シリーズの『Vue.jsとFirebaseで作るミニWebサービス』。解説がわかりやすく読みやすいです。この本の内容に沿ってVue.jsをガリガリ書いて、Firebaseの設定を勉強中です。
今回は本に書いてある内容から、Vue.jsのサンプルプログラムをFirebaseにデプロイするところまで紹介します(自分用の備忘録的な意味も込めて記事を書いていきますb)。

やってみる

まずは

  1. Node.jsをインストール
  2. vueのテンプレートをダウンロードできるツールをインストール
  3. vueのテンプレートをダウンロード
// 1. 省略

// 2. vueのテンプレートをダウンロードできるツールをインストール
$ npm install -g vue-cli

// 3. vueのテンプレートをダウンロード
$ vue init webpack-simple {project}

ダウンロードできたら↓を実行。

$ npm install
$ npm run dev

↓こんな感じのお馴染みの画面が出てきたらOK。
vuejs_template.png

Firebaseを使ってみる

次はFirebaseを使ってみましょう。
まずは↓にアクセスし、Firebaseのアカウントを作成。
https://firebase.google.com/

無事ログインできたら
スタートガイド>プロジェクトを追加
プロジェクト作成.png

必要事項を入力。ここで、プロジェクトIDは全Firebaseユーザーのプロジェクト内固有のIDになります(これからデプロイするサイトのURLにもプロジェクトIDが反映されてhttps://{プロジェクトID}.firebaseapp.comになる)。
必要事項を入力したらプロジェクト作成を押してしばし待つ。。
すると↓のプロジェクト管理画面が立ち上がるので各種設定を行っていきましょう。</>をクリック(</>:Webサイト用の設定)
プロジェクト設定.png
↓モーダルが表示されたら、その中のコードをまるっとコピーして、vueのテンプートのindex.htmlにペースト(すでにあるscriptタグの一行上にペースト)。
スクリーンショット 2018-12-10 22.24.14.png

これらのタグはWebサイト上でFirebaseのデータを扱ったりするための命令を実行するための定義&設定です。この情報はHTMLに埋め込まれるためFirebaseユーザーに公開されますが、権限管理は別で行うのでこのコードは公開されても特に問題なしb
もう一度Firebaseの管理画面に戻り、今度は左のタブのHostingメニューをクリック。
スクリーンショット_2018-12-10_22_20_09.png
Hostingは"HTMLなどのデータを保存してWebサイト形式で公開できるようにする機能"です。
「使ってみる」をクリックし、出てくるモーダルの命令をそのまま実行(firebase-toolsをインストールするコマンドです)。

$ npm install -g firebase-tools

インストールできたら

$ firebase login

実行するとブラウザが起動し、Googleのアカウント認証画面が立ち上がります。OKを押しFirebase CLIへの権限追加成功画面が立ち上がればOK。
これは自身のFirebaseプロジェクトの編集をコンソールで操作しているfirebase-cliのアプリケーションに許可する手続きを意味しており、以降、コンソール上からFirebaseの設定を続けていきます。

$ firebase init

どの機能を利用するか聞かれるので、カーソル操作でHostingまで移動し、スペースキーで選択状態にしてEnter。
公開に利用するディレクトリ名の入力を求められるのでここではsampleと入力。

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

公開するページはindex.htmlだけがどうか聞かれるのでいったんそのままEnter(No)。

? Configure as a single-page app (rewrite all urls to /index.html)?

すると自動的にプロジェクトのルートに

  • .firebaserc
  • firebase.json

の2ファイルが作成されます。ここにはFirebaseで利用するプロシェクトの設定が記載されています。
次にホスティングしてもらうための準備として、テンプレートの各種パスを書き換えます。

/webpack.config.js

8: publicPath: '/',
---
78: devServer: {
79: contentBase: 'sample', //追加
80: historyApiFallback: true,
---
100: sourceMap: false,

/sample/index.htmlがfirebase-cliによって自動生成されるので削除。/index.htmlを/sample/index.htmlへ移動しつつ次のように変更。
/sample/index.html

 </sclipt>
 <sclipt src="./build.js"></script>
</body>

sampleディレクトリは標準で.gitignoreに記載されているのでgit管理する際にファイルが追加されません。sampleディレクトリにindex.htmを格納していますのでindex.htmlをgit管理するために次の行を追加
/.gitignore

!sample/index.html

デプロイ

お待たせしました。各種設定が終わったらいよいよデプロイです。
まずはデプロイするファイルを作成するために次のコマンドを実行。

$ npm run build

ビルドが成功したらデプロイ。

$ firebase deploy

デプロイに成功するとHosting URLが表示されるのでそちらにアクセス。ローカルで作成したvueのテンプレート画面と同じものが表示されたらOK!

おわりに

まだまだ勉強中なので詳しいことは書けませんでしたがいったんFirebaseにデプロイまでできました。今後も継続して勉強していきます〜

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした