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

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! スクリーンショット 2020-10-13 10.57.19.png

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 ...

Recommended Posts

Créer un environnement Nuxt TypeScript + Vuetify avec docker-compose
Créer un environnement Docker avec WSL
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ Express ~
Créer un environnement local Couchbase avec Docker
Créer un environnement Node.js avec Docker
Créer un environnement Tomcat 8.5 avec Pleiades 4.8
Créer un environnement de développement Jooby avec Eclipse
Créez un environnement Docker + Laravel avec Laradock
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ MySQL ~
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ Sequelize ~
Créer un environnement de développement PureScript avec Docker
[Docker] Construisez l'environnement d'exécution de Jupyter Lab avec Docker
Créer un environnement avec Docker sur AWS
Créer un environnement de vérification des opérations TensorFlow avec Docker
Comment créer un environnement Rails 6 avec Docker
Créer un environnement Laravel / Docker avec VSCode devcontainer
Créez rapidement un environnement de développement WordPress avec Docker
Créer un environnement de test E2E avec Selenium (Java)
Créez des projets Spring Boot par environnement avec Gradle
[Win10] Créer un environnement de développement JSF avec NetBeans
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ Vue ~
Créer un environnement mecab (dictionnaire NEologd) avec Docker (ubuntu)
[Rails] Comment créer un environnement avec Docker
Créer un environnement de développement Java avec VS Code
Créer un environnement de développement Java avec VS Code sur Mac
Comment créer un environnement Docker avec Gradle pour IntelliJ
Manuel de construction de l'environnement de développement stable pour "Rails6" avec "Docker-compose"
Créer un environnement de débogage Ruby avec VS Code de Windows 10
[Note] Créez un environnement Python3 avec Docker dans EC2
Comment créer un environnement de développement Java avec VS Code
Environnement Build Rails (API) x MySQL x Nuxt.js avec Docker
Créer un environnement de développement de programme Java avec Visual Studio Code
Construire Doma1 avec Ant
Construisez Growai avec Centos7
Construire Java avec Wercker
Construisez bazel avec alpin
Créez un environnement de développement «Spring Thorough Introduction» avec IntelliJ IDEA
Notes sur la création de Jitsi Meet sur Azure avec docker-compose
Créez un environnement virtuel CentOS 8 sur votre Mac à l'aide de VirtualBox
Créer un environnement de développement Web APP avec Java + Spring avec Visual Studio Code