Firebaseで業務アプリケーションを構築しよう 1:Nuxt.jsのセットアップ

目的

Firebaseを使って業務アプリケーションを作りたい。

背景

普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。
ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。
FirebaseのCloud Functionとhostingで代用できるかも…？

バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。
バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？

ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。

やること

1. FirebaseのCloudStore/Functions/Hostingを使う
2. Nuxt.jsをTypeScriptで書いてSSRモードで動かす
3. CircleCIでデプロイフローを構築する

1と2が今回の主目的。
どれだけ簡単に構築出来るのかを知りたいのと、向かないポイントというかデメリットを知りたい。
3は仕事で使っていてうまくいっているのですが、やりかた忘れてきてるので思い出し目的。

進め方

内容が多いので何回かに分けようかと思ってます。

1. Nuxt.jsのセットアップ
2. Firebase Functions&Hostingにデプロイと動作確認
3. 一覧画面と編集画面の追加、CloudStoreにデータの保存
4. デプロイフローの構築

シリーズ

• Firebaseで業務アプリケーションを構築しよう 1:Nuxt.jsのセットアップ - takeda_san’s blog
• Firebaseで業務アプリケーションを構築しよう 2:Firebase Functions&Hostingにデプロイと動作確認 - takeda_san’s blog
• Firebaseで業務アプリケーションを構築しよう 3:一覧画面と編集画面の追加、CloudStoreにデータの保存 - takeda_san’s blog
• Firebaseで業務アプリケーションを構築しよう 4:GitHub Actionsでデプロイフローの構築 - takeda_san’s blog

Nuxt.jsのセットアップ

というわけで、始めていきます。
フロントエンドの開発は実際に書いたコードがローカル動いて、それをデプロイできるまでが、とてつもなく時間がかかる印象です。
単に私が慣れてないだけというのがあるかもですが、毎回使うライブラリとセットアップ方法が変わって格闘しているうちに日が暮れていることが多いです。
私のPCがWindowsなので、Mac/Linuxでやる場合は適宜読み替えていただけると…

Nuxt.jsのセットアップの手順を説明します。
今回はTypeScriptで書いていくのでその設定も追加します。
また、npmの導入などの基本的な環境構築手順は省略します。

初期セットアップ

create-nuxt-appでNuxt.jsの初期セットアップをします。
今回はyukitoという名前のアプリケーションを作っていきます。
Nuxt.jsのバージョンは 2.10.1 でした。

λ npx create-nuxt-app
npx: installed 350 in 22.493s

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in .
? Project name yukito
? Project description yukito project
? Author name takedasan
? Choose the package manager Npm
? Choose UI framework Element
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

この時点で npm run dev で起動してみてビルドが通ること、サンプルページが開けることを確認します。

このあと、Firebase Functionsのディレクトリと同一プロジェクトディレクトリで同居することになります。
管理しやすいようにNuxt.jsの各ディレクトリをappディレクトリを作ってその配下に格納します。

こんな感じ。

この時点でのコミットはここ。
nuxt init · takedasan/yukito@b06ec35 · GitHub

TypeScript用の設定の追加

つぎにTypeScript用の設定を追加します。
TypeScriptサポートページに従って、設定をしていきます。
Setup | Nuxt TypeScript

まず、 @nuxt/typescript-build をインストールしてTypeScriptをビルドできるようにします。

npm install --save-dev @nuxt/typescript-build

nuxt.config.js に設定を追加します。
TypeScriptとついでに先ほどのソースディレクトリの変更もやってしまいます。

export default {
  mode: 'universal',
  srcDir: 'app/', //<-appディレクトリに移動したので
:
: 中略
:

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build' // <-ビルド用設定
  ],

次にランタイムをインストールします。
これもサポートページに従えばOKです。
Runtime (optional) | Nuxt TypeScript

npm install @nuxt/typescript-runtime

package.json のscriptのnuxtのところを nuxt-ts に書き換えます。
ついでにlintの対象にtsを追加しておきます。

  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint": "eslint --ext .js,ts,.vue --ignore-path .gitignore .",
    "test": "jest"
  },

最後にlintの設定をts用にしておきます。

npm uninstall @nuxtjs/eslint-config
npm install @nuxtjs/eslint-config-typescript

ここまでで同じく npm run dev で起動できるか確認しましょう。
こんなエラーが出ると思います。

ERROR in C:/Users/taked/workspace/yukito/node_modules/@nuxt/types/app/index.d.ts(90,18):
90:18 Interface 'NuxtApp' incorrectly extends interface 'Vue'.
  Types of property '$loading' are incompatible.
    Type 'NuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
      Type 'NuxtLoading' provides no match for the signature '(options: LoadingServiceOptions): ElLoadingComponent'.
    88 | }
    89 |
  > 90 | export interface NuxtApp extends Vue {
       |                  ^
    91 |   $options: NuxtAppOptions
    92 |   $loading: NuxtLoading
    93 |   context: Context

本当はちゃんと原因調べないといけないのですが、今回は趣味プログラミングということで型チェックをスキップする設定を入れます。
tsconfig.jsonに skipLibCheck を追加します。
（これ、根本解決って何だろうか…）

  "compilerOptions": {
    "skipLibCheck": true, // <-これ 

これで無事サンプルページが開けるようになっているはずです。
そして、ここまでで、TypeScriptで開発を始める準備ができました。

Add TypeScript Build env · takedasan/yukito@9984f1f · GitHub

次回

Firebase Functions&Hostingにデプロイと動作確認をします。

takeda-san.hatenablog.com