Créer un environnement Nuxt TypeScript + Vuetify avec docker-compose

introduction

Je touche généralement Laravel et je n'ai jamais construit d'environnement frontal avec Docker, alors je l'ai essayé. Créez un environnement frontal Nuxt TypeScript + Vuetify avec docker-compose. Finalement, nous prévoyons de mettre laravel dans le même référentiel qu'un backend de Monolipo. On suppose que Docker et docker-compose sont installés.

Environnement d'exécution

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

Structure du répertoire

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

#Requis pour installer Vuetify
RUN apk update && \
    apk upgrade && \
    apk add --no-cache make gcc g++ python


WORKDIR /nuxt

EXPOSE 3000

Construire

$ docker-compose build

Installation de Nuxt et 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 (<=Notez qu'il ne sera sélectionné que si vous appuyez sur la touche espace)
? 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

Étant donné que diverses questions seront posées, sélectionnez Vuetify.js dans la colonne du cadre de l'interface utilisateur comme décrit ci-dessus. Notez que certains éléments ne seront sélectionnés que si vous appuyez sur l'espace. Après l'installation, le répertoire nuxt ressemblera à ceci:

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

Déplacez donc nuxt / nuxt / * vers nuxt / et procédez comme suit

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

Commencez

$ docker-compose up -d

http://localhost:3000/ Si vous y accédez et qu'il est affiché comme indiqué dans l'image ci-dessous, il est terminé pour le moment!

Il peut y avoir des paramètres pour tsconfig.json, mais j'écrirai à ce sujet dans l'article de certification Sanctum and SPA de Laravel ...