CCCマーケティング データベースマーケティング研究所の Tech Blog

研究所スタッフによる格闘記録やマーケティング界隈についての記事など

モバイルオーダーシステムを手作りして娘とサイバーなカフェごっこを楽しんだ話(2 / 3)

こんにちは、データベースマーケティング研究所の三浦です!
前回の記事ではモバイルオーダーシステムのUIの作成を行いました。
今回は作成したWebアプリを公開し、スマホで表示させてみます。GoogleのFirebaseのHostingの機能を利用しました。

Firebase

FirebaseはGoogleが提供しているクラウドサービスで、Webアプリケーションのバックエンドを提供するサービスです。

f:id:miu4930:20190830172259p:plain
Built with Firebase
様々な機能が用意されていて、ユーザーはサーバの管理を意識せずにWebアプリケーションの開発・公開をすることができます。
料金体系はSpark(無料)、Flame(月額)、Blaze(従量制)の3つが用意されています。個人で利用する程度ですので、今回はHostingのSparkプランを利用します。

Firebaseプロジェクトの作成

Webアプリを作成するためにまずFirebaseプロジェクトを作成します。
Firebaseのサイトからコンソールに移動します。Googleのアカウントの選択を求められるので、使用するアカウントを選択します。
コンソールが表示されたら、[プロジェクトの作成]ボタンをクリックします。プロジェクト名やGoogleアナリティクスを利用する場合はその設定など入力すると、プロジェクトが出来上がります。

Firebase CLIのセッティング

ローカルで作成したアプリをFirebaseにデプロイするためにFirebase CLI(コマンドラインインターフェース)というツールが必要になります。
Firebase CLIにはNode.jsnpmが必要なので、事前にインストールしておきます。ただしWindowsの場合はFirebase CLIのexeファイルが公開されており、そちらを使用する場合にはNode.jsおよびnpmのインストールは不要とのことです。(2019年8月現在で試験運用版となっています。)

Firebase CLIのインストールが完了したら、コマンドラインを立ち上げて以下のコマンドでログインします。

$ firebase login

するとブラウザでGoogleアカウントの選択が求められるので、ログインするアカウントを選択、ログインできると以下の画面が表示されます。

f:id:miu4930:20190819113240p:plain
Firebase CLI ログイン成功画面
次にローカルにFirebaseプロジェクトと紐づけをするディレクトリを作成します。(ここではorder-appという名前にします。)

$ cd order-app
$ firebase init

対話形式で設定を進めていきます。

  • Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.→Hostingを選択
  • Select a default Firebase project for this directory: (Use arrow keys)→先ほど作成したFirebaseプロジェクトを選択
  • What do you want to use as your public directory? (public)→public(何も入力せずにEnterでもOKです)
  • Configure as a single-page app (rewrite all urls to /index.html)?→y(今回はSPAなので)


Firebase initialization complete!と表示されればOKです。

デプロイ

initコマンドを実行したディレクトリを見ると、index.htmlなどのファイルが生成されていると思います。ディレクトリにWebアプリに必要なファイルを配置していきます。

order-app
 ┣ index.html
 ┣ firebase.json
 ┣ .gitignore
 ┣ .firebaserc
 ┣ js
 ┃┣ app.js
 ┃┣ bootstrap.bundle.min.js
 ┃┣ jquery-3.4.1.slim.min.js
 ┃┗ vue.js
 ┣ css
 ┃┣ bootstrap.min.css
 ┃┗ style.css
 ┣ img
 ┗ .firebase

私の環境では上図のように配置しました。最後にこれをクラウド上にデプロイして公開します。
order-appディレクトリでコマンドラインを開き、以下を実行します。

$ firebase deploy

デプロイが上手くいけば、メッセージの最終行にHosting URLが表示されていると思います。
ブラウザでこのURLにアクセスすれば、クラウドにデプロイしたWebアプリにアクセスできるようになります!

次回

次回はWebアプリと連動してLEDを光らせるIoTの部分を作り、モバイルオーダーのシステムを完成させます。