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.
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!
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
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.
Ne le faites que si vous avez une ancienne version de Vue installée globalement.
Terminal
$ sudo npm uninstall vue-cli -g
Réinstallez la nouvelle version.
Terminal
$ sudo npm install -g @vue/cli
(Abréviation)
$vue --version
@vue/cli 4.5.8
Lançons un projet en utilisant Vue3.0
localement.
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.
Ensuite, nous allons construire l'environnement Vue
avec le conteneur.
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.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é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
.container_name
: Spécifiez le nom du conteneur.ports
: spécifiez la redirection de port.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!"!
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 ...