Nuxt.js + TypeScript + CompositionAPI + PWAの構成をAWS Amplifyにデプロイする

はじめに

PWAのアプリを、Nuxt.jsとTypeScriptで構築し、
コンポーネントをCompositionAPIを使った構成を、
AWS Amplifyにデプロイしたいと思います。

実行環境のバージョン

node.js : 12.13.1
create-nuxt-app : 2.12.0

実装

プロジェクトの作成

Nuxt.jsのプロジェクトを作成する。

$ npm install -g create-nuxt-app
$ create-nuxt-app nuxt-pwa-for-composition　　# nuxt-pwa-for-compositionはプロジェクト名

対話形式で作成するNuxt.jsの構成を入力します。
この記事では、構成は以下のようにしました。

? Project name _ # デフォルトのままEnter 
? Project description _ # デフォルトのままEnter 
? Author name _ # デフォルトのままEnter 
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier, StyleLint
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)

最低でも、Choose Nuxt.js modulesにProgressive Web App (PWA) Supportを入れてください。

$ cd nuxt-pwa-for-composition
$ npm run dev

ERROR in No rules found within configuration. Have you provided a "rules" property?

このようなエラーが出ました。
stylelint.config.jsにrulesが記述されていないとのことなので追加します。

stylelint.config.js

module.exports = {
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['extends', 'ignores']
      }
    ],
    indentation: 2,
    'number-leading-zero': null,
    'unit-whitelist': ['px', 'deg', 'em', 'rem', 's']
  }
}

再び起動

$ npm run dev

今回は問題なく、実行できたかと思います。
ポートが使われていないのであればhttp://localhost:3000でページが表示されるはずです。

TypeScriptの反映

このガイドの内容を中心に構築します。
https://typescript.nuxtjs.org/guide/

必要なライブラリをインストールします。

$ npm install --save-dev @nuxt/typescript-build @nuxtjs/eslint-config-typescript
$ npm install @nuxt/typescript-runtime

次のファイルを更新もしくは追加します。

nuxt.config.js

    buildModules: [
      // Doc: https://github.com/nuxt-community/eslint-module
      '@nuxtjs/eslint-module',
      // Doc: https://github.com/nuxt-community/stylelint-module
      '@nuxtjs/stylelint-module',
-     '@nuxtjs/vuetify'
+     '@nuxtjs/vuetify',
+     '@nuxt/typescript-build'
    ],

  ・・・

    build: {
      /*
       ** You can extend webpack config here
       */
-     extend(config, ctx) {}
+     extend() {}
    }
  }

package.json

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

.eslintrc.js

  parserOptions: {
-   parser: 'babel-eslint'
  },

  ・・・

  extends: [
    '@nuxtjs',
+   '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "vuetify"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Composition APIの適用

コンポーネントには、Vue 3で採用される予定のComposition APIを採用しようと思います。
Composition APIの説明はこの記事では行いません。
ドキュメントはこちら
投稿時点では、Class APIの情報の方が多い気がするので、
Class APIを採用しても良いとは思います。

$ npm install --save @vue/composition-api

plugins/composition-api.js

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

generateされた.vueファイルがいくつかあるので、
そのファイルをComposition APIの記述に変えていきます。
※バージョンアップによりtemplateが変更になるのであれば、
こちらの記述では動作しなくなる可能性があります。

components/Logo.vue(scriptタグのみ抜粋)

<script lang="ts">
import { createComponent } from '@vue/composition-api'

export default createComponent({})
</script>

components/VuetifyLogo.vue(scriptタグのみ抜粋)

<script lang="ts">
import { createComponent } from '@vue/composition-api'

export default createComponent({})
</script>

layouts/default.vue(scriptタグのみ抜粋)

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'

interface Item {
  icon: string
  title: string
  to: string
}

const useMenus = () => {
  const clipped = ref<boolean>(false)
  const drawer = ref<boolean>(false)
  const fixed = ref<boolean>(false)
  const items = ref<Item[]>([
    {
      icon: 'mdi-apps',
      title: 'Welcome',
      to: '/'
    },
    {
      icon: 'mdi-chart-bubble',
      title: 'Inspire',
      to: '/inspire'
    }
  ])
  const miniVariant = ref<boolean>(false)
  const right = ref<boolean>(false)
  const rightDrawer = ref<boolean>(false)

  return {
    clipped,
    drawer,
    fixed,
    items,
    miniVariant,
    right,
    rightDrawer
  }
}

export default createComponent({
  setup() {
    const menus = useMenus()
    const title = ref<string>('Vuetify.js')

    return {
      ...menus,
      title
    }
  }
})
</script>

layouts/error.vue(scriptタグのみ抜粋)

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'

export default createComponent({
  layout: 'empty',
  props: {
    error: {
      type: Object,
      default: null
    }
  },
  head() {
    const title =
      (this as any).error.statusCode === 404
        ? (this as any).pageNotFound
        : (this as any).otherError
    return {
      title
    }
  },
  setup() {
    const pageNotFound = ref<string>('404 Not Found')
    const otherError = ref<string>('An error occurred')
    return {
      pageNotFound,
      otherError
    }
  }
})
</script>

pages/index.vue(scriptタグのみ抜粋)

<script lang="ts">
import { createComponent } from '@vue/composition-api'

import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'

export default createComponent({
  components: {
    Logo,
    VuetifyLogo
  }
})
</script>

jsファイルをtsファイルにする

nuxt.config.js->nuxt.config.ts

+ import { Configuration } from '@nuxt/types'
  import colors from 'vuetify/es5/util/colors'


- export default {
+ const nuxtConfig: Configuration = {
    mode: 'spa',

    ・・・

    build: {
      /*
       ** You can extend webpack config here
       */
      extend() {}
    }
  }
+ export default nuxtConfig

plugins/composition-api.js->plugins/composition-api.ts

PWAの修正

アプリアイコンとファビコンを変更する。

• static/favicon.ico
• static/icon.png

余談ですが、とあるカンファレンスのWebページがPWA対応になっていましたが、
アプリアイコンは変えていないようで、Nuxtのアイコンが表示されていました。

GitHubにコミット

以上の内容をGitHubにコミットします。
リポジトリはprivateリポジトリでも問題ありません。

AWS Amplifyの準備

AWSコンソールからAWS Amplifyを選択します。

「Deploy With the Amplify Console」の「GET STARTED」を選択します。

GitHub、BitBucket、GitLab、AWS CodeCommitのGitリポジトリを使うことができるようです。
今回はGitHubにpushしましたので、GitHubを選択します。

GitHubから承認を求められるので許可します。

リポジトリとブランチを選択します。

ビルド設定の構成で、アプリ名を変更してください。
また、frontend.artifacts.baseDirectoryの項目が/になっているようなら、/dist/に変更してください。

特に問題内容でしたら、「保存してデプロイ」ボタンを押します。

デプロイが完了するまでしばらく時間がかかると思います。

「検証」までチェックが入ったら完了です。
URLのリンクをクリックし、ちゃんとデプロイできているかを確認します。

Vuetify + Nuxt.jsのtemplateが表示されれば成功です。

Android Chrome等でデプロイされたURLを開きます。

ホームに追加をタップする。

アプリとして表示できれば成功です。

まとめ

今回は、PWAアプリをNuxt.js + TypeScriptで構築する方法と
作成したアプリをAmplify Consoleでデプロイする方法を紹介しました。
SPAをホスティングサービスは多々ありますが、
Amplify ConsoleをCI/CDの管理を気にせずにデプロイすることができるようになるのが大きな利点だと思います。
ただ、今回のサンプルのようにただのホスティングサービスとしてしか使わないと、Amplifyをいかせてはいないとは思います。
また、AWSの資源（カスタムドメイン設定など）を活用しやすいのも利点としてあげれるかと思います。
デプロイ先の一つの候補としてAmplifyを考えてみてはいかがでしょうか。

今回の完成形のリポジトリはこちら