概要
今回は、ローカルの環境を汚さないように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のインストール
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
アクセス!
以下の画面が表示が確認できるとOKです。
