こんにちは、データベースマーケティング研究所の三浦です!
前回の記事ではモバイルオーダーシステムのUIの作成を行いました。
今回は作成したWebアプリを公開し、スマホで表示させてみます。GoogleのFirebaseのHostingの機能を利用しました。
Firebase
FirebaseはGoogleが提供しているクラウドサービスで、Webアプリケーションのバックエンドを提供するサービスです。
様々な機能が用意されていて、ユーザーはサーバの管理を意識せずにWebアプリケーションの開発・公開をすることができます。
料金体系はSpark(無料)、Flame(月額)、Blaze(従量制)の3つが用意されています。個人で利用する程度ですので、今回はHostingのSparkプランを利用します。
Firebaseプロジェクトの作成
Webアプリを作成するためにまずFirebaseプロジェクトを作成します。
Firebaseのサイトからコンソールに移動します。Googleのアカウントの選択を求められるので、使用するアカウントを選択します。
コンソールが表示されたら、[プロジェクトの作成]ボタンをクリックします。プロジェクト名やGoogleアナリティクスを利用する場合はその設定など入力すると、プロジェクトが出来上がります。
Firebase CLIのセッティング
ローカルで作成したアプリをFirebaseにデプロイするためにFirebase CLI(コマンドラインインターフェース)というツールが必要になります。
Firebase CLIにはNode.jsとnpmが必要なので、事前にインストールしておきます。ただしWindowsの場合はFirebase CLIのexeファイルが公開されており、そちらを使用する場合にはNode.jsおよびnpmのインストールは不要とのことです。(2019年8月現在で試験運用版となっています。)
Firebase CLIのインストールが完了したら、コマンドラインを立ち上げて以下のコマンドでログインします。
$ firebase login
するとブラウザでGoogleアカウントの選択が求められるので、ログインするアカウントを選択、ログインできると以下の画面が表示されます。 次にローカルに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の部分を作り、モバイルオーダーのシステムを完成させます。