はじめに

Nuxt TypeScript でセットアップの手順は公式にて公開しているが、docker-composeを用いた構築の情報が少なかったので纏めてみた。

また、Ver.2.9以降からTypeScriptへの導入手順が変わり、個人的に少し躓いた部分もあったのでその点も踏まえて共有しようと思う。

1. 実行環境

macOS Catalina Ver.10.15.1
Docker version 19.03.4, build 9013bf5
docker-compose version 1.24.1, build 4667896b
Nuxt.js Ver.2.10.2
node.js 12.13.0-alpine

2. 前提条件

Nuxt.js のバージョンが 2.9 以上である事。
PC内に docker, docker-compose, node.js がインストールされている事。

docker , docker-compose , node.js がインストールされていない場合は下記を実行すると良い。

2.1. Docker のインストール

Docker をインストールする為に DockerHub にアクセスし、Docker.dmgをダウンロードする。
※ DockerHubを初めて利用する場合はアカウント作成が必要である。

Docker.dmgを起動すると、Dockerのインストールが行われるので、インストール完了後に Docker を Applications にコピーする。

また、他の方法としてHomebrewと呼ばれるパッケージ管理システムを用いてインストールする事ができる。以下にインストール手順を示す。

# Homebrew をインストール
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# Homebrew が正しくインストールされているかどうか確認する
$ brew doctor

# Docker をインストールする
$ brew install docker
$ brew cask install docker

docker, Homebrew のバージョンの確認は以下のコマンドを実行する事で確認できる。

# Docker
$ docker --version                                                                                                                                                                             
Docker version 19.03.4, build 9013bf5

# Homebrew
$ brew --version                                                                                                                                                                               
Homebrew 2.1.16
Homebrew/homebrew-core (git revision 00c2c; last commit XXXX-XX-XX)
Homebrew/homebrew-cask (git revision 9e283; last commit XXXX-XX-XX)

2.2. docker-compose のインストール

docker-compose のインストールは以下のコマンドを実行すると良い。

$ curl -L https://github.com/docker/compose/releases/download/1.3.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

# docker-compose コマンドを実行できるように、権限を設定する。
$ chmod +x /usr/local/bin/docker-compose

補足：実行中、Permission denied エラーが表示された場合、/usr/local/bin ディレクトリが書き込み可能が許可されていない可能性がある。その際、Compose のインストールをスーパーユーザで行う必要がある。sudo -i を実行してから、上記の2つのコマンドを実行し、exitする。

3. Nuxt.js 環境構築

TypeScript に変換する前に、まず Nuxt.js のプロジェクトを作成する必要があるので作成手順に関して説明する。

3.1. ファイル構成

今回のファイル構成は以下の通りである。1つのディレクトリに異なるファイルが複数混同する事を避けるため、project ディレクトリを新規し、その中にDockerfileを作成する。

また、Nuxt.js のプロジェクト内のファイル階層も綺麗にしたかったので、srcディレクトリを新規作成し、その中に纏めている。

以下に、ファイル構成を示す。

.
├── README.md
├── docker-compose.yml
└── project
    ├── Dockerfile
    ├── README.md
    ├── node_modules
    ├── nuxt.config.ts
    ├── package.json
    ├── src
    │   ├── assets
    │   ├── components
    │   ├── layouts
    │   ├── middleware
    │   ├── pages
    │   ├── plugins
    │   ├── static
    │   ├── store
    │   └── vue-shim.d.ts
    ├── tsconfig.json
    ├── yarn-error.log
    └── yarn.lock

3.2. Dockerfile

はじめに、Dockerfileを作成する。node.jsに関しては、DockerHub にイメージが公開されているのでそれを使用する。

Dockerfile


# イメージ指定
FROM node:12.13.0-alpine

# コマンド実行
RUN apk update && \
    apk add git && \
    npm install -g @vue/cli nuxt create-nuxt-app && \

今回はイメージの軽量化の為に、alpineを使用した。

※ alpine : Alpine Linuxと呼ばれる、BusyBoxとmuslをベースにしたLinuxディストリビューションを指す

3.3. docker-compose.yml

次に、docker-compose.ymlを作成する。

docker-compose.yml

version: '3'
services:
  node:
    # Dockerfileの場所
    build: 
        context: ./
        dockerfile: ./project/Dockerfile
    working_dir: /home/node/app/project
    # ホストOSとコンテナ内でソースコードを共有する
    volumes:
      - ./:/home/node/app
    # コンテナ内部の3000を外部から5000でアクセスする
    ports:
      - 5000:3000
    environment:
      - HOST=0.0.0.0

3.4. dockerイメージ作成

Dockerfile, docker-compose.ymlを作成後、以下のコマンドを実行し docker イメージを作成する。

$ docker-compose build

実行後、イメージができているかどうかは以下のコマンドで確認できる。

$ docker images
REPOSITORY                    TAG              IMAGE ID        CREATED       SIZE
docker-nuxt-typescript_node   latest           7f8324973b48    3 days ago    434MB
node                          12.13.0-alpine   5d187500daae    3 weeks ago   80.1MB

3.5. Nuxt.jsの起動

コンテナ内でnpm、yarnコマンドを実行したい場合は下記の様に指定する。

$ docker-compose run --rm <Container Name> <Command>

以下のコマンドを実行し、Nuxt.jsを起動させセットアップを行う。

$ docker-compose run --rm nuxt npx create-nuxt-app ./project
Project name (your-title)
Project description (My wicked Nuxt.js project)
Author name (author-name)
Choose the package manager 
> Yarn
  Npm
Choose UI framework (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
Choose custom server framework (Use arrow keys)
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# スペースで選択する事ができる。(Enterキーではないので注意)
Choose Nuxt.js modules
>(*) Axios
 ( ) Progressive Web App (PWA) Support
Choose linting tools 
>(*) ESLint
 ( ) Prettier
 ( ) Lint staged files
Choose test framework 
> None
  Jest
  AVA
Choose rendering mode (Use arrow keys)
  Universal (SSR) // WEB SITE
> Single Page App // WEB APPLICATION
Choose development tools
>(*) jsconfig.json (Recommended for VS Code)

上記の設定は、筆者がセットアップに選択したものである。設定に関しては各々で必要なものを導入すると良い。

3.6. コンテナの立ち上げ

以下のコマンドを実行し、コンテナを起動させる。

$ docker-compose run node npm run dev
# OR
$ docker-compose run node yarn run dev

起動後、http://localhost:5000/ にアクセスし、サンプルアプリ画面が確認できれば一旦完了である。

4. TypeScript化

最後に、Nuxt.js を TypeScript に変更する手順について説明する。

4.1. @nuxt/typescript-build, @nuxt/typescript-runtime のインストール

TypeScript化を進める前に、まずはじめに@nuxt/typescript-build、@nuxt/typescript-runtimeの2つを以下のコマンドを実行してインストールする。
(どちらか一方でも動くが、今回は両方インストールしておく)

※ @nuxt/typescript-build : nuxt buildで TypeScript を扱うためのもの。
※ @nuxt/typescript-runtime : Node.js 環境下で TypeScript を処理するためのもの。

$ docker-compose run node npm install --save-dev @nuxt/typescript-build
$ docker-compose run node npm install @nuxt/typescript-runtime
# OR
$ docker-compose run node yarn add --dev @nuxt/typescript-build
$ docker-compose run node yarn add @nuxt/typescript-runtime

@nuxt/typesに関しては、上記の2つに内包されているのでインストールをする必要は無い。

4.2. tsconfig.json の作成

Nuxt.js で作成されているjsconfig.jsonを削除し、tsconfig.jsonを新規作成する。
tsconfig.jsonのソースは以下の通りである。

tsconfig.json

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

今回は、プロジェクト内のディレクトリをsrcディレクトリに移動させているので、include、pathsなどの設定を変更している。

4.3. nuxt.config.ts の作成

次に、nuxt.config.jsを削除し、nuxt.config.tsを新規作成する。
nuxt.config.tsのソースは以下の通りである。

nuxt.config.ts

import { Configuration } from '@nuxt/types'

const nuxtConfig: Configuration = {
  mode: 'universal',
  buildModules: ['@nuxt/typescript-build'],
  server: {
    port: 5000,
    host: 'localhost',
  },
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#fff' },
  css: [
  ],
  plugins: [
  ],
  typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
  },
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module',
  ],
  build: {
    extend(config, ctx) {
    }
  },
  srcDir: 'src/'
}
module.exports = nuxtConfig

Ver.2.9からは、nuxt.config.ts内の Configuration の型定義が@nuxt/typesからExportされるようになった為、はじめに Import している。
また、追加された buildModules に@nuxt/typescript-buildを指定している。buildModulesに変更になった事で、build内で使用するmoduleをdevDependenciesに指定できるようになった。

4.4. vue-shim.d.ts の作成

vue-shim.d.tsは、記述されているコードを TypeScript として認識させる為に必要となるファイルである。しかし、.vueファイル中にインポート等をする必要は無く、srcディレクトリ内にあれば問題ない。
vue-shim.d.tsのソースは以下の通りである。

vue-shim.d.ts

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

4.5. package.json の修正

package.jsonは、Nuxt.js のセットアップ時に作成されるが、TypeScript が適用されていないのでその点を修正する。修正する部分としてはpackage.json内のscriptsが、nuxt コマンドなので、そこをnuxt-tsコマンドに変更する。
修正後のソースは以下の通りである。

package.json

# 一部省略
{
  ...
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  }
  ...
}

4.6. Nuxt TypeScript の実行

変更を踏まえ、再度 Nuxt.js を起動する。

$ docker-compose run node yarn run dev                                                                                                                 
yarn run v1.19.1
$ nuxt-ts

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.10.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:5000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized
✔ Nuxt files generated
ℹ Starting type checking service...
ℹ Using 1 worker with 2048MB memory limit                                                                                                                                         

✔ Client
  Compiled successfully in 13.16s

✔ Server
  Compiled successfully in 11.98s

ℹ No type errors found
ℹ Version: typescript 3.6.4 
ℹ Time: 11648ms
ℹ Waiting for file changes
ℹ Memory usage: 254 MB (RSS: 315 MB)

上記を見て貰うと、nuxt-tsコマンドで実行している事が確認できる。
実行後、先程と同じく http://localhost:5000/ にアクセスし画面が表示する事を確認する。

以上で、TypeScript化は完了である。

5. まとめ

今回は、Nuxt TypeScript を docker-comnpose で構築した。Ver.2.9 からの変更で docker-compose 下で動かなくなった人を少しでもサポートできるなら幸いである。

また、今回のサンプルは GitHub に公開しているので、何か不明点や修正点があれば随時対応していこうと思う。

◆追記◆
11/24 : Githubのproject/README.mdを英語翻訳化しました。

Nuxt TypeScript を docker-compose で構築する