TypeScriptのNuxt.jsをDockerに乗せて動かし、Netlifyにデプロイする

./[current_directory]
├── README.md
├── docker-compose.yml
├── netlify.toml
├── project               # Nuxt.jsのrootDir(ルートディレクトリ)
│   ├── README.md
│   ├── node_modules      # (ファイルは省略しています)
│   ├── nuxt.config.ts
│   ├── package.json
│   ├── src               # Nuxt.jsのsrcDir(ソースディレクトリ)
│   │   ├── assets        # ここから
│   │   ├── components    # ↓
│   │   ├── layouts       # ↓
│   │   ├── middleware    # ↓  (すべてファイルは省略しています)
│   │   ├── pages         # ↓
│   │   ├── plugins       # ↓
│   │   ├── static        # ↓
│   │   ├── store         # ここまで
│   │   └── vue-shim.d.ts
│   ├── tsconfig.json
│   └── yarn.lock
└── vue                   # Dockerfile格納用
    └── Dockerfile

FROM node:12.16.1-alpine

RUN apk update && \
    apk upgrade && \
    yarn global add @vue/cli

version: '3'
services:
  vue:
    build: ./vue
    working_dir: /home/node/app/project
    volumes:
      - ./project:/home/node/app/project
    ports:
      - 3000:3000
    environment:
      - HOST=0.0.0.0

$ mkdir project
$ cd project
$ docker-compose run vue yarn create nuxt-app .
##### (略) ビルド&create-nuxt-appが実行される ######

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in project
? Project name: project
? Project description: My finest Nuxt.js project
? Author name: 
? Choose programming language: TypeScript
? Choose the package manager: Yarn
? Choose UI framework: Vuetify.js
? Choose custom server framework: None
? Choose the runtime for TypeScript: @nuxt/typescript-runtime
? Choose Nuxt.js modules: Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools: None
? Choose test framework: None
? Choose rendering mode: Universal (SSR)
? Choose development tools: None

$ docker-compose run vue ash

# yarn global add npm-check-updates

# ncu
Checking /home/node/app/project/package.json
[====================] 7/7 100%

 nuxt                        ^2.0.0  →         ^2.12.2 
 @nuxt/typescript-runtime    ^0.4.0  →          ^0.4.5 
 @nuxtjs/axios               ^5.3.6  →         ^5.10.1 
 @nuxtjs/pwa               ^3.0.0-0  →  ^3.0.0-beta.20 
 @nuxtjs/dotenv              ^1.4.0  →          ^1.4.1 
 @nuxt/typescript-build      ^0.6.0  →          ^0.6.5 
 @nuxtjs/vuetify             ^1.0.0  →         ^1.11.0 

Run ncu -u to upgrade package.json

# ncu -u
Upgrading /home/node/app/project/package.json
[====================] 7/7 100%

 nuxt                        ^2.0.0  →         ^2.12.2 
 @nuxt/typescript-runtime    ^0.4.0  →          ^0.4.5 
 @nuxtjs/axios               ^5.3.6  →         ^5.10.1 
 @nuxtjs/pwa               ^3.0.0-0  →  ^3.0.0-beta.20 
 @nuxtjs/dotenv              ^1.4.0  →          ^1.4.1 
 @nuxt/typescript-build      ^0.6.0  →          ^0.6.5 
 @nuxtjs/vuetify             ^1.0.0  →         ^1.11.0 

Run npm install to install new versions.

# rm yarn.lock
# rm -r node_modules
# yarn install

$ mkdir src
$ mv assets components layouts pages plugins static store middleware src/

module.exports = {
  mode: 'universal',
  srcDir: 'src/',     // 追記!!
  ---(略)---
}

$ touch src/vue-shim.d.ts
$ vi src/vue-shim.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

import colors from 'vuetify/es5/util/colors'
import { Configuration } from '@nuxt/types' // 追記!!

const config: Configuration = {             // 変更!!
  mode: 'universal',
  ---(略)---
}
export default config                       // 追記!!

$ docker-compose run --service-ports vue yarn dev
# http://localhost:3000 でデフォルトページが確認できます。

[build]
  base = "/project"
[build.environment]
  YARN_VERSION = "1.22.0"
  YARN_FLAGS = "--no-ignore-optional"
  NODE_VERSION = "12.16.1"