Erstellen Sie eine Nuxt TypeScript + Vuetify-Umgebung mit Docker-Compose

Einführung

Normalerweise berühre ich Laravel und habe noch nie eine Front-End-Umgebung mit Docker erstellt, also habe ich es versucht. Erstellen Sie eine Nuxt TypeScript + Vuetify-Front-End-Umgebung mit Docker-Compose. Schließlich planen wir, Laravel in dasselbe Repository wie ein Backend in Monolipo zu stellen. Es wird davon ausgegangen, dass Docker und Docker-Compose installiert sind.

Ausführungsumgebung

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

Verzeichnisaufbau

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

#Erforderlich, um Vuetify zu installieren
RUN apk update && \
    apk upgrade && \
    apk add --no-cache make gcc g++ python


WORKDIR /nuxt

EXPOSE 3000

Bauen

$ docker-compose build

Installation von Nuxt und 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 (<=Beachten Sie, dass es nur ausgewählt wird, wenn Sie die Leertaste drücken.
? 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

Da verschiedene Fragen gestellt werden, wählen Sie Vuetify.js in der Spalte UI-Framework wie oben beschrieben aus. Beachten Sie, dass einige Elemente nur ausgewählt werden, wenn Sie die Leertaste drücken. Nach der Installation sieht das nuxt-Verzeichnis folgendermaßen aus:

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

Verschieben Sie also nuxt / nuxt / * nach nuxt / und gehen Sie wie folgt vor

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

Anlaufen

$ docker-compose up -d

http://localhost:3000/ Wenn Sie darauf zugreifen und es wie im Bild unten gezeigt angezeigt wird, ist es vorerst abgeschlossen!

Möglicherweise gibt es Einstellungen für tsconfig.json, aber ich werde darüber in Laravels Sanctum- und SPA-Zertifizierungsartikel schreiben ...