こんにちは、開発の片岡です。
標題の通り、今回はFirebaseを活用したサーバーレスWEBアプリケーションの作り方をご案内していきます。

あらかじめfirebaseに設定したデータをWEBアプリケーション側で取得＆表示確認するところがゴールです。
※なお、長くなったので、3回に分けて執筆予定です。1回目となる今回の記事は4番までを解説していきます。

以下の通り進めていきます。

1. vueプロジェクト作成

vue-cli のインストール

$ npm install -g @vue/cli

プロジェクトを作成する階層で以下

$ vue create hello-prj

※ここで以下の文言が出る場合は、表示されている通りにコマンドを打ってからもう一度vue createを行ってください。

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli 
npm install -g @vue/cli

vue createのコマンドの後、

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

といった質問が表示されていきます。
今回は特に設定を変更しないので、Enter押下で進めていきます。
終わりにこちらが表示されますので、その通りに進めます。

?  Successfully created project hello-prj.
?  Get started with the following commands:

 $ cd hello-prj
 $ npm run serve

上記打ち込むと、ターミナルに表示されるURLにアクセスすると、立ち上がったサイトが確認できます。
➡︎　http://localhost:8080/

2. vuetifyを導入

次にここからはvuetifyを導入していきます。
vuetifyはweb開発でよく使うコンポーネント群を予め美麗なデザイン込みで用意してくれるVue UIライブラリです。使わない方はスキップでも構いません。
立ち上がっているserveをcontrol+Cで一旦停止して
プロジェクト階層のまま、以下を打ちます。

vue add vuetify

やはりここでも設定を聞かれますがdefaultのままEnterで進めましょう。
あっという間に導入が終わりました。

3. firebaseにプロジェクト追加

firebaseは初期費用無料で使えるgoogleのサービスの一つです。認証周りやDBからのデータ取得など、サーバーサイドの処理をある程度firebaseが代行してくれるので、フロントエンドの開発に工数をかけたい場合などにおすすめです。
さて、
https://firebase.google.com/から、コンソールに進みます。(gmailログインしていない場合はしましょう。)
プロジェクトを作成、もしくは追加していきます。名称はなんでも構いませんがここでは先ほど決めたプロジェクト名と合わせて、hello-prjで作成します。
firebaseプロジェクト向けgoogle analyticsをonで良いか確認を求められます。
特に不都合がない場合はそのまま進めます。規約に同意チェックでプロジェクト作成完了です。

4. firebaseの各種設定

アプリの登録

</>(ウェブ)とある部分をクリックして、プロジェクトの設定を開始します。

アプリの登録では、アプリのニックネームを入力します。ここでは先ほどのhello-prjを入力
「このアプリのFirebase Hostingも設定します」にもチェックを入れておきます。
※Firebase Hostingを利用すると、開発物をfirebaseでdeployすることができます。
するとfirebaseのhttps://プロジェクト名.web.appというリンクにdeploy結果が適用されるので開発物の実行結果を簡単に他人と共有できるようになります。どうすれば出来るかはまた後述します。

プロジェクトにfirebase SDKを導入

画像のようにスクリプトが表示されます。
これをプロジェクトの以下に設定します。
今回bodyタグがあるのはhello-prj>public>index.htmlなので、こちらに記載します。

設置するとこんな感じです。

Firebase CLIのインストール
今回Firebase Hostingを使用するので、専用のCLI(コマンドラインツール)をインストールします。

npm install -g firebase-tools

Firebase Hostingへのデプロイ
まだコードには何も手を加えていないので、やり方だけ先に確認という形になりますが、以下のコマンドでfirebaseへのデプロイが可能です。
まずgoogleアカウントにログイン

$ firebase login

次にプロジェクトの開始(ここからは必ずアプリのルートディレクトリから実行 (今回で言うとhello-prj直下です))

$ firebase init

initするとこんな画面が表示されます。必要に応じて設定していきます。
今の所、Hostingにだけ用があるので、Hostingだけ選択(矢印+スペースキー）しましょう。
次に参照するプロジェクトを聞かれるので、既存のプロジェクトを選択します。

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

選択後

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: 
❯ hello-prj (hello-prj)

と出るのでEnter。

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

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

には、defalutのpublicではなくdistと入力します。
※今回作成したvueプロジェクトのビルドファイルがdist以下に作成されるためこちらを指定します。

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

こちらはyを選択しましょう。hosting環境でのサイト再読込みを可能にしてくれます。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
? Set up automatic builds and deploys with GitHub? (y/N)

GitHubのコードと自動同期してくれる設定です。今回はnで回答しました。
さて、ここまでで、ターミナルにおけるFirebase組み込みは一区切りつきました。

第2回はFirebaseにデータを登録していきます。
引き続きお付き合いくださいね

中編はこちらからどうぞ。