【Nuxt.js】Docker開発環境を導入する

既存Nuxtプロジェクトでの開発でDockerを使用していなかったので、使用したいなーって思ってついでに記事も書きました😃

Docker開発環境への導入手順

1. Dockerfileとdocker-compose.yml作成
2. docker-compose build
3. 起動確認

1. Dockerfileとdocker-compose.yml作成

まずは、Dockerを導入したいプロジェクト直下に移動
移動したらこのコマンドでDockerfileとdocker-compose.ymlを作成

$ touch Dockerfile docker-compose.yml

作成できたら各ファイルに内容を書いていきます

Dockerfile

FROM node:8-alpine // 1

WORKDIR /app

RUN apk update \
  && apk --no-chache add vim \
  && yarn global add firebase-tools jest \
  && yarn install // 2

vimを使うのでadd vimを記述してますが、vimを使用しない人は削除してください

1. イメージは軽量にしたいので8-alpineを使います
2. alpineはapkコマンドを使用してupdateやadd(yarnでいうinstall)を行います

alpineについてはこちらの記事がわかりやすかったです。--no-chacheコマンドなどの説明が書かれています。
Dockerやる前のAlpine Linux

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - .:/app
    tty: true

2. docker-compose build

Dockerfileとdocker-compose.ymlができたら次はbuildします

$ docker-compose build

3. 起動確認

正常にビルドできたら、コンテナを立ち上げ、コンテナ内に入ってNuxtを起動してみましょう

まずはコンテナを立ち上げます

$ docker-compose up -d

コンテナ内に入ります

$ docker-compose exec app /bin/ash

npm install後、npm run devでNuxtを起動してみます

/app # npm install
/app # npm run dev 

これで起動ができました！

Nuxtのビルドが終わり次第 http://localhost:3000/ に表示されるはずです！