【모던 기술 습득에의 길】Docker에서의 Nuxt.js/Vuetify 개발 환경 구축에 의한 신속하고 효율적인 프로젝트 작성

개요

결론

.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Dockerfile
└── docker-compose.yml

환경

절차

병아리 프로젝트 만들기 및 소스 폴더 정리

# フォルダ作成 & 移動
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

export default {
  mode: 'universal',
  srcDir: 'src',   // こちらの１行を追加して、ソースディレクトリパスを明記。

Docker 관련 파일 만들기

# 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

# 開発環境用
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"]

version: '3.7'
services:
  web:
    # コンテナ指定
    build:
      context: .
      target: dev-env
    ports:
      - 3000:3000
    restart: always
    # ローカルプロジェクトと同期
    volumes:
      - .:/app
      - /app/node_modules

node_modules
.nuxt
.DS_Store

이미지 작성, 시작, 확인

# Dockerfileがあるパスへ移動
cd ~/work/t_o_d_project
# イメージの作成
docker-compose build
# イメージの起動
docker-compose up -d

참고