/ #JavaScript #NuxtJS 

DockerでNuxtJSの開発環境を作成しました

NuxtJS とは

NuxtJS(なくすとじぇぃえす)はウェブアプリケーションを構築するためのVueフレームワークです。
ウェブアプリ開発で必要となる多くの機能が予め用意されています。
今回は、Dockerを使って開発環境を作成しました。

Dockerfike

アプリケーションのファイルを生成する際のエラーを回避するため、python make g++ をインストールしています。

FROM node:15.2.1-alpine

ENV LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    APP_ROOT=/app

WORKDIR $APP_ROOT

RUN apk update && \
    apk upgrade && \
    apk add bash python make g++

RUN npm add -g @vue/cli @vue/cli-init

ENV HOST 0.0.0.0
EXPOSE 3000

docker-compose.yml

version: '3'

services:
  nuxt:
    build: .
    tty: true
    command: /bin/sh -c "cd ./niceapp && yarn run dev"
    volumes:
      - .:/app
      - node-modules:/app/node_modules
    ports:
      - 3000:3000

volumes:
  node-modules:

package.json

{
  "name": "niceapp",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

ビルドとコンテナ起動

いつものコマンドです。

docker-compose build
docker-compose up

Nuxt アプリの生成

1コマンドで必要なファイルを生成してくれます。

docker-compose exec nuxt yarn create nuxt-app niceapp --edge

ツールなどのオプションを選択が終わると、ファイルが生成され、すぐに開発に取り掛かれます。
http://localhost:3000 でページが表示されます。