nuxt.jsのDocker開発環境

Nuxt.jsのDocker（docker-compose）を使った開発環境構築メモ

Nuxt.jsのDocker（docker-compose）を使った開発環境構築メモ

自動で環境構築とテストサーバー起動までを行います。

動作環境

Ubuntu18.04

ファイルの説明

ファイル構成

┬ .env
├ docker-compose.yml
├ docker
│    └ Dockerfile
└ front  // ソースコード

docker-compose.yml

version: '3'

services:

  # frontend
  front:
    build:
      context: ./
      dockerfile: ./docker/Dockerfile
      args:
        - NODE_VERSION=${NODE_VERSION}
        - USER_ID=${UID}
        - GROUP_ID=${GROUPS}
    environment:
      HOST: "0.0.0.0"
    command: bash -c "yarn && yarn dev"
    volumes:
      - ./front:/app:cached

Dockerfile

デフォルトだとnpmやyarnがroot権限で動くため、モジュールやビルドファイルがrootで作成されてしまいます。
ファイル削除の際などに面倒なのでパーミッションをユーザと合わせます。

Dockerfileにuser_id/group_idの変更を記載します。

ARG NODE_VERSION

FROM node:${NODE_VERSION}-alpine

RUN apk update \
    && apk upgrade \
    && apk add --no-cache bash \
    && npm install -g nuxt

# change user
ARG USER_ID
ARG GROUP_ID

RUN deluser node && \
    addgroup -g ${GROUP_ID} -S node && \
    adduser -u ${USER_ID} -S node -G node

USER node:node

WORKDIR /app

.env

.envにdocker-compose, Dockerfileで使用する各パラメータを記載します

# Dockerプロジェクト名
COMPOSE_PROJECT_NAME=nuxt_sanple

# ホストのユーザIDと合わせて設定
UID=1000
GROUPS=1000

### Node ##################################################
NODE_VERSION=12

起動方法

$ docker-compose build (初回のみ)
$ docker-compose up -d

補足

nuxt.config.jsを編集した場合は自動読み込みされないため、下記コマンドでリスタートします。

$ docker-compose restart