Edited at

DockerでNuxt.jsの環境構築


概要

今回は、ローカルの環境を汚さないようにdocker上でNuxt.jsの環境構築を行います。


環境


  • macOS High Sierra 10.13.6


terminal

% docker -v

Docker version 18.09.0, build 4d60db4

% docker-compose -v
docker-compose version 1.23.2, build 1110ad01



Dockerのインストール

https://hub.docker.com/editions/community/docker-ce-desktop-mac


Nuxt.jsの環境構築

まずは、作成するアプリケーションのディレクトリへ移動し、

Docker関連のファイルを作成します。


terminal

$ cd /path/to/MyApp

$ touch Dockerfile docker-compose.yml


Dockerfile

$ vim Dockerfile


Dockerfile

FROM node:8.15.0-alpine

WORKDIR /app

RUN apk update && \
npm install -g npm && \
npm install -g @vue/cli && \
npm install -g @vue/cli-init

ENV HOST 0.0.0.0
EXPOSE 3000

CMD ["/bin/ash"]



docker-compose.yml


docker-compose.yml

version: '3'

services:
web:
build: .
ports:
- 3002:3000
volumes:
- .:/app
stdin_open: true
tty: true


ビルド,コンテナの生成


terminal

$ docker-compose build

$ docker-compose up -d


コンテナ内でNuxtアプリケーションの作成

下記のコマンドでコンテナ内に入ることができます。


temrinal

$ docker-compose exec web /bin/ash


vue initコマンドでプロジェクトを作成することができます。

今回は

- https://github.com/nuxt-community/starter-template

こちらをテンプレートに使用します。


コンテナ内

/app # vue init nuxt-community/starter-template my-nuxt-app


とりあえず以下の質問はEnterで大丈夫です!

? Project name my-nuxt-app

? Project description Nuxt.js project
? Author


サーバの起動

Nuxt.jsアプリケーションを作成することができたので

サーバの起動をしてみます。


コンテナ内

/app # cd my-nuxt-app/

/app/my-nuxt-app # npm install
/app/my-nuxt-app # npm run dev

アクセス!

http://localhost:3002

以下の画面が表示が確認できるとOKです。

スクリーンショット 2019-01-28 11.19.50.png


参考文献