[Docker]Nuxt.jsの環境構築

Dockerを学習したので、活用したいなと思ったので、Nuxt.jsの環境をDockerで利用して作ってみます。

Dockerfileを準備

まずはDockerfileを作成します。

FROM node:10-alpine

WORKDIR /app

RUN apk update && \
    npm install -g npm && \
    npm install -g create-nuxt-app

ENV HOST 0.0.0.0
EXPOSE 3000

npmとかcreate-nuxt-appとかをインストールしておきます。

次にdocker-compose.ymlを作成しておきます。

version: '3'
services:
  nuxt:
    build: .
    volumes:
      - .:/app
    command: npm run dev
    ports:
      - 3000:3000
    tty: true

コマンドを設定したので、あとでコンテナを立ち上げるだけで実行されます。ポートは3000に。

Nuxt.jsプロジェクトの作成

それではNuxtを作成してみましょう。

# ビルド
$ docker-compose build

# セットアップ
$ docker-compose run --rm nuxt npx create-nuxt-app

次にnuxt.config.jsを編集しておく。

mode: 'universal',

+ server: {
+   port: 3000,
+   host: '0.0.0.0',
},

これで環境構築は完成です。

コンテナの立ち上げ

それでは実行してみましょう。

# 起動
$ docker-compose up -d

# 終了
$ docker-compose down

localhost:3000をみてみてください。うまくいってると思います。