Créez un environnement Vue3 avec Docker!

introduction

Cet article décrit comment créer un environnement Vue3.0 en utilisant Docker. Puisqu'il s'agit d'un débutant, je vous serais reconnaissant si vous pouviez signaler des erreurs.

Conditions préalables

Vous avez installé Docker, node et npm. Si vous n'avez pas installé Docker, veuillez l'installer en vous référant au lien ci-dessous. Peut-être que ça marche! Commençons avec Docker!

environnement

macOS Catalina : 10.15.7 Visual Studio Code : 1.42.1

Terminal

$ docker --version
Docker version 19.03.13
$ node --version
v14.14.0
$ npm --version
6.14.8

Mise à jour de la version de Vue

Créez un environnement pour Vue3.0 sur votre PC. Puisque l'ancien Vue2.0 était inclus, désinstallez-le une fois, puis installez la dernière version.

Supprimer l'ancienne version

Ne le faites que si vous avez une ancienne version de Vue installée globalement.

Terminal

$ sudo npm uninstall vue-cli -g

Installer une nouvelle version

Réinstallez la nouvelle version.

Terminal

$ sudo npm install -g @vue/cli

(Abréviation)

$vue --version
@vue/cli 4.5.8

Construction de l'environnement local

Lançons un projet en utilisant Vue3.0 localement.

Créer un projet Vue dans un environnement local

Créez un répertoire de travail. Puisque nous prévoyons d'ajouter des conteneurs autres que Vue plus tard, nous supposons la structure de répertoires suivante.

Structure du répertoire

dockerApp
├──docker-compose.yml ← non créé
└──vue
├── Dockerfile ← Non créé
    └── vue_app ← Créez ce dossier à partir de maintenant. Le lieu de travail de vue.
└── ・ ・ ・ ← Voici la source de Vue.

Créez un dossier pour vue_app et créez un projet Vue.

Terminal

$ mkdir vue_app        #Créer le répertoire
$ cd vue_app           #Déplacer dans le répertoire
$ vue create vue_app   #Créer un projet Vue

Veuillez indiquer le nom de votre répertoire préféré et le nom du projet.

Appuyez sur la commande pour démarrer la configuration initiale. Il vous sera demandé si vous souhaitez utiliser Vue 2 ou Vue 3, alors bien sûr, choisissez Vue 3. Sélectionnez Default (Vue 3 Preview) ([Vue 3] babel, eslint). (Sélectionnez avec la touche ↑ touche↓et confirmez avec la touche Entrée)

Terminal

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

Après un certain temps, le projet Vue3 sera créé.

Vérifions l'opération une fois. Essayez d'exécuter le serveur avec la commande npm run serve.

Terminal

$ npm run serve

Après le démarrage, essayez d'accéder à http: // localhost: 8080 /.

Il fonctionne correctement!

Arrêtez le serveur avec control + c sur le terminal.

Construire un environnement de conteneur

Ensuite, nous allons construire l'environnement Vue avec le conteneur.

Créer un Dockerfile

Créez Dockerfile à l'emplacement décrit dans la structure de répertoires comme indiqué ci-dessous.

Dockerfile

FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

CMD ["npm", "run", "serve"]

• FROM node: 14.14.0: Docker Sélectionnez l'image sur laquelle l'image est basée. Après «:», spécifiez la version. Est-il sûr de s'aligner sur l'environnement local?
• WORKDIR / vue_app: Spécifiez le répertoire à travailler dans le conteneur avec un chemin absolu. Si le répertoire spécifié n'existe pas, il sera généré automatiquement.
• RUN npm install: Installez npm.
• COPY ./vue_app/ .: Copiez la source. Décrivez dans l'ordre [Chemin source de l'environnement local] et [Chemin à placer dans le conteneur].
• CMD [" npm "," run "," serve "]: Démarre le serveur Vue.

Démarrer un conteneur à l'aide d'un Dockerfile

Dans le terminal, allez dans le répertoire où se trouve Dockerfile et démarrez le conteneur. Tout d'abord, construisez l'image avec la commande docker build.

Terminal

cd {Chemin placé de Dockerfile}
docker build -t vueapp:0.0.1 .

• -t myvueapp: 0.0.1: peut être marqué. Ajoutons-le car cela facilitera les opérations suivantes. Vous pouvez spécifier les versions en les séparant par «:».
• .: Spécifie le chemin où se trouve Dockerfile.

Après la construction, vérifiez si l'image est créée.

Terminal

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
vueapp                  0.0.1               fc7cabc1fe35        22 minutes ago      1.06GB

Il a été créé!

Maintenant, commençons avec la commande docker run.

Terminal

$ docker run --name vue_app_container --rm -it -d -p 8080:8080 vueapp:0.0.1

• --name vue_app_container: commence par le nom vue_app_container. Comme dans le cas de la création d'une image de conteneur, la spécification du nom de l'image facilite la gestion, alors spécifiez-le.
• --rm: supprime automatiquement le conteneur lorsqu'il est arrêté.
• --it: Donne une belle entrée et sortie des commandes du terminal.
• -d: Exécute le conteneur en arrière-plan.
• -p 8080: 8080: transfère le port local vers le port du conteneur.
• vueapp: 0.0.1: Démarre la version 0.0.1 de l'image vueapp.

Après le démarrage, accédez à http: // localhost: 8080 / pour confirmer le démarrage.

Confirmation de démarrage sur le terminal

Terminal

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                    NAMES
388c1dfe015b        vueapp:0.0.1        "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp   vue_app_container

Arrêtez avec la commande docker stop.

Terminal

docker stop vue_app_container

Création de docker-compose

Créez docker-compose.yml à l'emplacement décrit dans la structure de répertoires comme indiqué ci-dessous.

docker-compose.yml

version: '3'
services:
  vue:
    build: ./vue
    image: vueapp:0.0.2
    container_name: "vue_app_container"
    ports:
      - "8080:8080"

• build: Spécifiez le répertoire dans lequel se trouve dockerfile.
• ʻImages`: Spécifiez le nom de l'image. Vous pouvez spécifier la version après «:».
• container_name: Spécifiez le nom du conteneur.
• ports: spécifiez la redirection de port.

Lancer un conteneur à l'aide de docker-compose

Commencez par la commande docker-compose up.

Terminal

$ docker-compose up　-d

• -d: démarre en arrière-plan.

Après le démarrage, accédez à http: // localhost: 8080 / pour confirmer le démarrage.

Cela fonctionne correctement!

Utilisez la commande docker-compose down pour terminer le conteneur.

Terminal

$ docker-compose down

Utilisez la commande docker-compose build pour refléter les modifications de fichier dans le conteneur. Comme test, ajoutez-le à la dernière ligne de la balise template de HelloWorld.vue qui a été créée lorsque le projet Vue a été généré automatiquement.

vue/vue_app/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <div>
Postscript!
    </div>
  </div>
</template>

Commencez après avoir appuyé sur la commande docker-compose build.

Terminal

$ docker-compose build

(Abréviation)

$ docker-compose up　-d

Vous pouvez voir les mots "Addition!"!

À la fin

J'espère que cela sera utile pour créer un conteneur en utilisant Vue. À la fin de l'article précédent, j'ai dit que je voulais écrire docker-compose avec plusieurs conteneurs ajoutés, mais à la fin, cela a fini par être un article avec un conteneur. La prochaine fois, la prochaine fois sera sûrement ...