create-nuxt-appを利用してDocker上にNUXT環境を構築する

ゴール

Docker環境でNUXTを立ち上げ、TOPページを表示する。

ハマったところ

create-nuxt-appを使用するとイメージ作れない

通常、create-nuxt-appは対話式で設定していくのでイメージ作成時に設定できなかった。

--answers オプションを付けて解決しました。

ここのソースを見ながら設定をしました。

ブラウザからTOPページが見れない

環境変数を設定する必要がありました。

docker-compose.yml

PORT: 3000
HOST: 0.0.0.0

を設定しました。

Dockerfile

FROM node:13.0.1-stretch

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

RUN apt-get update && \
    apt-get install -y vim

WORKDIR $HOME/sample

RUN npx create-nuxt-app --answers "{ \
  \"name\": \"sample\", \
  \"description\": \"first app for nuxt\", \
  \"author\": \"hisawa\", \
  \"pm\": \"npm\", \
  \"ui\": \"none\", \
  \"server\": \"none\", \
  \"features\": \"axios\", \
  \"linter\": \"eslint\", \
  \"test\"  : \"none\", \
  \"mode\"  : \"universal\", \
  \"devTools\": \"jsconfig.json\" }"

イメージを作成
docker build -t nuxt:latest .

docker-compose.yml

version: '3'

services:
  nuxt:
    image: nuxt:latest
    command: npm run dev
    environment:
      PORT: 3000
      HOST: 0.0.0.0
    volumes:
      - ./sample:$HOME/sample
    ports:
      - 3000:3000

起動
docker-compose up -d

無事表示されました。