Help us understand the problem. What is going on with this article?

【モダン技術習得への道】DockerでのNuxt.js / Vuetify開発環境構築による、迅速かつ効率的なプロジェクト作成

概要

  • 今回はDockerを利用して、Nuxt.js / Vuetify開発環境を迅速に構築する。
  • 下記の2つのフレームワークを利用することで、迅速に効率的におしゃれな画面を作成することができる。
    • Nuxt.js(Vue.jsのアプリケーションフレームワーク)
    • Vuetify(マテリアルデザインフレームワーク)

結論

  • 下記の2つのコマンドで、Nuxt.js / VuetifyのDocker開発環境が作成・起動され、迅速に開発を始められる。
    • docker-compose build
    • docker-compose up -d
  • 最終的なフォルダ構成は下記。
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Dockerfile
└── docker-compose.yml
  • Nuxt.js / Vuetifyを利用することにより、下記のような画面を素早く効率的に作成することができる。

image.png

環境

  • 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',   // こちらの1行を追加して、ソースディレクトリパスを明記。

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にアクセスして下記の画面になることを確認する。

image.png

参考

t_o_d
沖縄在住。 よろしくお願いいたします。
https://r-p.vercel.app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away