DockerでNuxt.jsの環境構築

Nuxt.jsの環境構築をしてみた

ディレクトリ構造の確認

docker-nuxt
├── docker
│   └── nuxt
│       └── Dockerfile
├── nuxtApp/
└── docker-compose.yaml

Nuxtプロジェクトの作成

以下の記事を参考にしてください。
Nuxt.jsでプロジェクト作成

Dockerfile

FROM node:12.1.0-alpine

RUN mkdir /code
# docker-composeでのコマンドが実行される場所
WORKDIR /code

RUN npm install -g vue-cli
# 外部に公開するポートを指定(run時の-pオプション)
EXPOSE 3000

docker-compose.yaml

version: "3"
services:
    nuxt:
        container_name: nuxt
        build: ./docker/nuxt # Dockerfileの場所を指定
        image: nuxt          # buildがあればイメージ名を付与として機能
        volumes:
            - .:/code
        ports:
            - 3000:3000
        working_dir: /code/frontEnd # コマンドの実行場所（指定しなければDockerfileのWORKDIRが適用）
        command: npm run dev

package.json

  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt", // 変更
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

Nuxt.js