Nuxtの開発環境をDockerで構築

はじめに

初めまして。
WELLNESONE JAPAN株式会社（株式準備中）代表取締役CTOの@yusuke_1011です。
自社で一からサービス開発を行う際に実践した構成をここに記しておきます。

こちらの記事は、「Nuxt + Docker + CIrcleCI + Storybookという構成でAtomic Designにて開発していく」の第１章となります。

一般的な内容も多くありますが、説明用のサンプルではなく、実際にプロジェクトで導入した内容にはなるので、オリジナルな部分もある程度含んでしまいます。その点ご了承くださいませ。

全体構成

「Nuxt + Docker + CIrcleCI + Storybookという構成でAtomic Designにて開発していく」

1. Nuxtの開発環境をDockerで構築（←今ここ）
2. NuxtでAtomic Designを実践
3. Nuxt + Storybookでコンポーネントを管理
4. Storybookを用いたテスト（ストラクチャルリグレッションテスト編）
5. Storybookを用いたテスト（ビジュアルリグレッションテスト編）

前提

Nodeとnpmがインストールされている

❯ node --version
v14.2.0

❯ npm --version
6.14.4

dockerとdocker-compose

dockerとdocker-composeを使用します。
Macであればhomebrewを使用してすぐインストールできます。

$ brew install docker
$ brew cask install docker

これらインストールされていることを確認しましょう。

❯ docker --version
Docker version 19.03.8, build afacb8b

❯ docker-compose --version
docker-compose version 1.25.5, build 8a1c60f6

nuxtプロジェクトの作成

npm create sample_app

vue-cliを用いても良いかと思います。

ディレクトリ構成

以下のようにします。

sample_app
└── docker-compose.yml
└── .env.example
└── front
    └── Dockerfile
    └── src
　　　 　└──（nuxtのコード一式）

今後apiなど追加していく前提のディレクトリ構成になっています。
その場合はfront以下をgitのsubmoduleで管理するのもアリかと。

Dockerfileの作成

今回は必要最低限の記述にします。

FROM node:12.16.1 

ENV NUXT_HOST=0.0.0.0
WORKDIR /src
COPY ./src/package.json .
RUN npm install

COPY ./src .

.env.exapmleの作成

FRONT_PORT=19080

dokcer-compose.ymlの作成

version: '3.7'
services:
  front:
    build: ./front
    command: npm run dev
    volumes:
      - ./front/src:/src
      - ./src/node_modules
    ports:
      - "$FRONT_PORT:3000"
    init: true
    restart: on-failure

起動手順

１．設定ファイルを生成する

cp .env.example .env

２．dockerイメージを生成する

docker-compose build

３．dockerコンテナを起動する

docker-compose up -d