docker-compose로 Nuxt TypeScript + Vuetify 환경 구축

소개

평소 Laravel을 만지는 경우가 많아, 이치로부터 프런트 엔드의 환경을 Docker로 구축한 적이 없었기 때문에 도전해 보았습니다.
docker-compose로 Nuxt TypeScript+Vuetify 프런트 엔드 환경을 구축합니다.
최종적으로, 모노리포에서 백엔드로서 laravel도 같은 리포지토리에 올릴 예정입니다.
Docker와 docker-compose가 설치되어 있다고 가정합니다.

실행 환경

macOS Catalina ver 10.15.6

Docker ver 2.4.0

docker-compose ver 1.27.4

디렉토리 구성

docker-compose.yml
nuxt/
docker/
└ app/
　　└ Dockerfile

docker-compose

docker-compose.yml

version: "3"
services:
  app:
    build:
      context: ./
      dockerfile: ./docker/app/Dockerfile
    ports: 
      - "3000:3000"
    command: yarn run dev
    volumes:
      - ./nuxt:/nuxt

Dockerfile

FROM node:14.4.0-alpine

ENV HOME=/nuxt \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0

# Vuetifyのインストールに必要
RUN apk update && \
    apk upgrade && \
    apk add --no-cache make gcc g++ python


WORKDIR /nuxt

EXPOSE 3000

빌드

$ docker-compose build

Nuxt, Vuetify 설치

$ docker-compose run --rm app yarn create nuxt-app nuxt
...
...
create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in nuxt
? Project name: `nuxt`
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios (<= スペースキーを押さないと選択されないので注意）
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None

각종 질문이 나오므로 위와 같이 UI framework의 란에서 Vuetify.js를 선택한다.
스페이스를 누르지 않으면 선택되지 않는 항목이 있으므로 주의.
설치가 끝나면 nuxt 디렉토리가 다음과 같이됩니다.

nuxt
　┣ .config/
　┗ nuxt/
　　　┣ asset/
　　　┣ ...
　　　┣ ...
　　　┣ package.json
　　　┗ yarn.loc

그래서 nuxt/nuxt/* 를 nuxt/로 이동하여 다음과 같이 한다

nuxt
　┣ .config/
　┣ asset/
┣ ...
┣ ...
　┣ package.json
　┗ yarn.loc

시작

$ docker-compose up -d

http://localhost:3000/
에 액세스하여 아래 이미지처럼 표시되면 일단 완료!


tsconfig.json 설정 등이있을 수 있지만, 다음은 Laravel의 Sanctum 및 SPA 인증 기사에서 작성할 예정입니다 ...