Build Nuxt TypeScript + Vuetify environment with docker-compose

Introduction

I usually touch Laravel, and I have never built a front-end environment with Docker, so I tried it. Build a Nuxt TypeScript + Vuetify front-end environment with docker-compose. Eventually, we plan to put laravel in the same repository as a backend in Monolipo. It is assumed that Docker and docker-compose are installed.

Execution environment

• macOS Catalina ver 10.15.6
• Docker ver 2.4.0
• docker-compose ver 1.27.4

Directory structure

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

#Required to install Vuetify
RUN apk update && \
    apk upgrade && \
    apk add --no-cache make gcc g++ python


WORKDIR /nuxt

EXPOSE 3000

Build

$ docker-compose build

Installation of Nuxt and 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 (<=Note that it will not be selected unless you press the space key)
? 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

Since various questions will be asked, select Vuetify.js in the UI framework column as described above. Note that some items will not be selected unless you press the space. After installation, the nuxt directory will look like this:

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

So move nuxt / nuxt / * to nuxt / and do the following

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

Start-up

$ docker-compose up -d

http://localhost:3000/ If you access and it is displayed as shown in the image below, it is completed for the time being!

There may be settings for tsconfig.json, but I'll write about it in Laravel's Sanctum and SPA authentication articles ...