Edited at

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))


Dcokerfile

# イメージの指定

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を外部から8080でアクセス
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

以上で、完了です。