nuxt.jsのDocker開発環境
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