Nuxt.js + Firebaseに入門してみた - Adwaysエンジニアブログ

前置き

こんにちわ。神戸です。
急遽先輩の代打ということで慌てて記事を書いております。

今回の記事は色々と作業量が多かったため、サービスの導入編と構築編の二部構成でお送りいたします。

最小構成のNuxt.js+Firebaseで記事を書こうと思ったのですが、ちょっと調べると良記事が沢山出てくる……。
Firebase出来ると身長が年間10cm伸びて年収1000万円になるって書いてる人もいるし書きたいな…。

う～ん。ここは何かオリジナリティを……。
簡単なブラウザアプリ…簡単ブラウザ……簡単…。

あ！！！！！

雑な家計簿（ZATSUBO）を作ろう！！

調査

1. Nuxt.js

Vue.js製のフレームワークです。
サーバーサイドレンダリングや静的ファイルの生成など、様々な機能を提供してくれています。
必要なもの全部詰め。すごい。

2. Firebase

Googleの提供するサービスのひとつ。
様々なアプリの開発ができるプラットフォームで、ストレージや認証機能の提供をしています。
個人的に、静的なページのホスティングが可能なので、社内向けに何か作れるんじゃないかと色々詮索していました。すごい。

実際に作ってみる

全体的な流れ

Nuxtでベースプロジェクトの作成
Firebaseにデプロイ
認証処理の追加
DBの追加
少し手を加える

今回は、実際に導入してみるということで、1.2.を実施して行きます。

内容は静的ページのデプロイとなります。

Nuxt.jsのインストールからスタートアップの起動までのクイックリファレンス

導入に関しては、公式を見るとすべて書いていました。
参考にできるようこちらにも記載しておきます。
npmでインストールしていますが、
yarnがあればyarnでインストールしましょう。

# vue-cliのインストール
npm install -g @vue/cli @vue/cli-init

# Nuxtのスタートテンプレートでプロジェクトを作成。(<project-name>はzatsuboです)
vue init nuxt-community/starter-template <project-name>

# 依存しているパッケージを解消します
npm install

# 事前にESLint系のモジュールをインストールします(任意)
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

# デベロップメントモードで立ち上げます
npm run dev

以上で http://localhost:3000 にアクセスするとNuxt.jsのスタートアッププロジェクトが立ち上がっている事が確認できると思います。

f:id:AdwaysEngineerBlog:20181011202609p:plain

Firebaseへのデプロイ

上記の出来立てのプロジェクトをFirebaseへデプロイ出来るようにします。

ブラウザ上からFirebaseのコンソールでのプロジェクトを新規作成を行います(無料)
プロジェクトを追加するを選択して、

f:id:AdwaysEngineerBlog:20181011202630p:plain

最初の設定を行います。

プロジェクト名：zatsubo
地域：日本

で作成しました。

f:id:AdwaysEngineerBlog:20181011202649p:plain

好きなプロジェクトを作成したらローカルに戻り、

# Firebaseのツールをインストールします。(https://firebase.google.com/docs/cli/?hl=ja)
npm install -g firebase-tools

# Firebaseの認証作業を行います。Firebaseにログインします。(ブラウザが立ち上がります)
firebase login

(注意：Cannot run login in non-interactive mode.と言われた場合、コマンドの後にオプションで--interactiveとつけて実行してください。)
( firebase login --interactive )

# ブラウザでウホー！と表示されたらログインは完了です。

f:id:AdwaysEngineerBlog:20181011202705p:plain

# 今回はブラウザ上で簡易的な家計簿の作成を想定しているのでコマンドを打ち込んだ後、設定を聞かれるので合わせていきます。
firebase init

#- このディレクトリでfirebaseを実行するか聞かれるので、Yを入力
#- hostingをスペースで選択
#- プロジェクトの選択を聞かれるので、上記で作成したプロジェクトを選択
#- デプロイするディレクトリ名を聞かれるので、そのままエンターか任意の文字列を入力します。(nuxtを用いるので"dist"がおススメです。)
#- SPA(シングルページアクション)かどうか聞かれるので喜んでyesと入力します
#- fileの生成をするかどうか聞かれるので、Noを選択します。
#- 生成した場合は、消せばいいので大丈夫です。

上記が完了すると

.firebaserc
.firebase.json

の二つのファイルが生成されるので、確認しておきます。
Windowsだとプロジェクトのディレクトリに生成されたのですが、
会社のMacだとホームディレクトリに生成されました。生成されたらJSONの記述を変更していきます。

# 各種jsonの設定を変更します。
# nuxt.config.jsonにgeneratorのフォールバックを有効にする記述を行います。
vim nuxt.config.json
---
*/
generate: { fallback: true },
head:{
---

# firebase.configでhostingの設定を記述します
# https://ja.nuxtjs.org/guide/routing/
vim firebase.config
---
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/404.html"
      }
    ]
  }
}


# デプロイ用のファイルが生成されたはずなので、上記のnuxtで作成したプロジェクトをビルドして、distファイルを作成します。
npm run generate

(firebaseのディレクトリを指定した場合出来たソースを対象のディレクトリにコピーする：任意)
cp dist <firevase project>


# ローカルでの動作確認をしておきます。(localhost:5000)
firebase serve

# 完了したらfirebaseのプロジェクトにデプロイします。
firebase deploy

すると、Firebaseのコンソール上にデプロイされた履歴が表示され、

f:id:AdwaysEngineerBlog:20181011202813p:plain