概要
- 今回はDockerを利用して、Nuxt.js / Vuetify開発環境を迅速に構築する。
- 下記の2つのフレームワークを利用することで、迅速に効率的におしゃれな画面を作成することができる。
結論
- 下記の2つのコマンドで、Nuxt.js / VuetifyのDocker開発環境が作成・起動され、迅速に開発を始められる。
docker-compose builddocker-compose up -d
- 最終的なフォルダ構成は下記。
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Dockerfile
└── docker-compose.yml
- Nuxt.js / Vuetifyを利用することにより、下記のような画面を素早く効率的に作成することができる。
環境
- Mac OS X 10.14.5
- Node.js v11.11.0
- yarn 1.17.3
- yarnを未導入の場合、こちらでインストールするかnpmでの置き換えを行う。
- Docker 19.03.1
- docker-compose 1.24.1
- Docker・docker-compose未導入の場合、こちらを参考にインストールしておく。
手順
雛形プロジェクトの作成 & ソースフォルダの整理
- 下記のコマンドを入力して、以下の作業を行う。
- Nuxt.js / Vuetifyの雛形プロジェクトの作成
- ソースフォルダの作成・整理
- ソースパスの明記
# フォルダ作成 & 移動
mkdir -p ~/work; cd $_
# 雛形プロジェクト作成
yarn create nuxt-app t_o_d_project
# 作成段階で確認される質問には、下記で対応。
# UI frameworkの部分で「Vuetify」を選択
? Project name t_o_d_project
? Project description My first-rate Nuxt.js project
? Author name xxxxxxx
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules axios
? Choose linting tools eslint
? Choose test framework None
? Choose rendering mode Universal (SSR)
# 作成後、プロジェクトフォルダへ移動
cd ~/work/t_o_d_project
# ソースフォルダ(src/)作成 & ディレクトリ移動・整理
mkdir -p src; mv pages/ store/ static/ plugins/ components/ assets/ layouts/ middleware/ $_
- 上記の作業によって、下記のディレクトリ構成になっていることを確認する。
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
│ ├── assets
│ ├── components
│ ├── layouts
│ ├── middleware
│ ├── pages
│ ├── plugins
│ ├── static
│ └── store
└── yarn.lock
- 確認後、プロジェクト直下の
nuxt.config.jsの中身を下記のように修正する。
nuxt.config.js
export default {
mode: 'universal',
srcDir: 'src', // こちらの１行を追加して、ソースディレクトリパスを明記。
Docker関連ファイルの作成
- 作成した雛形プロジェクトをDocker環境で立ち上げるため、以下の3つのファイルをプロジェクト直下に作成する。
- Dockerfile
- docker-compose.yml
- .dockerignore
# Dockerfileとdocker-compose.ymlと.dockerignoreの作成
touch Dockerfile docker-compose.yml .dockerignore
- 上記の作業によって、下記の最終ディレクトリ構成になっていることを確認する。
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Dockerfile
└── docker-compose.yml
- 作成した3つのファイルの中身を下記のようにする。
Dockerfile
# 開発環境用
FROM node:10.17.0-alpine as dev-env
# コンテナソースパス定義
ENV APP_HOME /app
# 必要物インストール・不要物削除
RUN apk update --no-cache && \
apk add --no-cache vim && \
rm -rf /var/cache/apk/*
# コンテナソースパス作成・移動
WORKDIR ${APP_HOME}
# Nuxt Host定義
ENV NUXT_HOST 0.0.0.0
# パッケージインストール
COPY package*.json ./
COPY yarn.lock ./
RUN yarn
# コンテナ内へのソースディレクトリのコピー
COPY . .
# Port公開
EXPOSE 3000
# 開発サーバー立ち上げ
CMD [ "yarn", "dev"]
docker-compose.yml
version: '3.7'
services:
web:
# コンテナ指定
build:
context: .
target: dev-env
ports:
- 3000:3000
restart: always
# ローカルプロジェクトと同期
volumes:
- .:/app
- /app/node_modules
.dockerignore
node_modules
.nuxt
.DS_Store
イメージの作成・起動・確認
- 上記の関連ファイルの記述後、下記のコマンドをうち、Nuxt環境のDockerイメージの作成・起動を行う。
# Dockerfileがあるパスへ移動
cd ~/work/t_o_d_project
# イメージの作成
docker-compose build
# イメージの起動
docker-compose up -d
- イメージの起動後、ブラウザ上で
localhost:3000にアクセスして下記の画面になることを確認する。