docker で nuxt.js を開発環境を建てるだけ

docker で nuxt.js の動作環境を構築

インストール

下記、サイトよりインストール

Macなので、download for macからDownload

https://www.docker.com/get-started

$ docker -v
Docker version 18.09.0, build 4d60db4

インストール後、ターミナルにて確認。

DockerFileを作成

CentOSイメージにNode.jsを構築する形でも良いが、

OfficialなNode.jsイメージがあるようなので、そちらを利用する。

DockerHub - node.js (official))

Dockerfile

# イメージの指定
FROM node:10.14.1-alpine

# コンテナ内で cd /app しているようなもの
WORKDIR /app

# コマンド実行
# linux 最新化,gitのインストール、npm最新化、vue-cli インストール　をしている。
RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli

ENV HOST 0.0.0.0
EXPOSE 8080

docker-compose.ymlの作成

Docker Compose

docker-composeを使うと複数コンテナの管理が便利に

docker-compose.yml

version: '3'

services:
  nuxt:
    # Dockerfileの場所
    build: .
    tty: true
    # コンテナ起動時のコマンド
    command: npm run dev
    # ホストOSとコンテナ内でソースコードを共有
    volumes:
      - .:/app
    # コンテナ内部の3000を外部から８０８０でアクセス
    ports:
      - "8080:3000"

ビルド

$ docker-compose build

完了後、下記のようにimageができている。

$ docker images

REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
nuxt-docker-sample_nuxt   latest              69c41d18ce12        About an hour ago   137MB
node                      10.14.1-alpine      c7f513f4c081        3 days ago          70.7MB

Nuxt.jsのStart

コンテナ内で、npmなどを実行したい場合は下記のように指定する

docker-compose run --rm <コンテナ名> <コマンド>

nuxt.js セットアップ

$ docker-compose run --rm nuxt npx create-nuxt-app

Creating network "nuxt-docker-sample_default" with the default driver
npx: installed 402 in 21.927s
> Generating Nuxt.js project in /app
? Project name nuxt-frontend
? Project description My fantabulous Nuxt.js project
? Use a custom server framework koa
? Use a custom UI framework element-ui
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name
? Choose a package manager npm
Reinitialized existing Git repository in /app/.git/

コンテナ立ち上げ

$ docker-compose up -d

これだけで、起動し、dockerc-compose.ymlの「command: npm run dev」を
実行してくれる。

-d はデーモン起動の為。

状態確認

$ docker ps

CONTAINER ID        IMAGE                     COMMAND             CREATED             STATUS              PORTS                              NAMES
aa4c6ac25962        nuxt-docker-sample_nuxt   "npm run dev"       About an hour ago   Up About a minute   8080/tcp, 0.0.0.0:8080->3000/tcp   nuxt-docker-sample_nuxt_1

落とすときは...

$ docker-compose down

以上で、完了です。