Académique Documents
Professionnel Documents
Culture Documents
L'objectif de cet article en plusieurs parties est de vous présenter le framework web
JavaScript Vue.js en se focalisant sur les principaux concepts au travers d'un exemple
unique.
Les codes source pour les exercices sont disponibles sur le dépôt Git suivant : https://
github.com/mickaelbaron/vuejs-polldle-tutorial-src (pour récupérer le code, faire : git
clone <https://github.com/mickaelbaron/vuejs-polldle-tutorial-src>).
Pour réagir au contenu de cet article, un espace de dialogue vous est proposé sur le forum
Commentez.
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
I - Architecture de déploiement................................................................................................................................... 4
II - Déploiement des composants : client, serveur et reverse-proxy...........................................................................5
II-A - Composant serveur (Java)............................................................................................................................5
II-A-1 - Construction des binaires du composant serveur (Java).....................................................................5
II-A-2 - Configuration de l'exécution du composant serveur (Java)................................................................. 6
II-A-3 - Exécution du composant serveur (Java)..............................................................................................6
II-A-4 - Dockerfile pour le composant serveur (Java)...................................................................................... 7
II-A-5 - Construction de l'image du composant serveur (Java)........................................................................ 8
II-A-6 - Créer un conteneur du composant serveur (Java).............................................................................. 9
II-B - Composant client (Vue.js)............................................................................................................................. 9
II-B-1 - Variables d'environnement..................................................................................................................10
II-B-2 - Construction des binaires du composant client Vue.js.......................................................................11
II-B-3 - Déploiement du composant client (Vue.js).........................................................................................13
II-B-4 - Dockerfile pour le composant client (Vue.js)......................................................................................14
II-B-5 - Construction de l'image Docker du composant client (Vue.js)........................................................... 15
II-B-6 - Créer un conteneur du composant client (Vue.js)..............................................................................16
II-C - Composant reverse-proxy (NGINX)............................................................................................................17
II-C-1 - Configuration du composant reverse-proxy (NGINX)........................................................................ 17
II-C-2 - Dockerfile pour le composant reverse-proxy (NGINX).......................................................................17
II-C-3 - Construction de l'image Docker du composant reverse-proxy (NGINX)............................................ 18
II-C-4 - Créer un conteneur du composant reverse-proxy (NGINX)...............................................................18
III - Déploiement via un sous-chemin........................................................................................................................19
III-A - Sous-chemin pour le composant client (Vue.js)........................................................................................ 20
III-A-1 - Mode (variables d'environnement) sous-chemin Vue.js.................................................................... 20
III-A-2 - Routage avec un sous-chemin (Vue.js)............................................................................................ 21
III-A-3 - Fichier de configuration (Vue.js)........................................................................................................22
III-A-4 - Dockerfile du composant client (Vue.js) avec un sous-chemin......................................................... 22
III-A-5 - Construction de l'image Docker du composant client (Vue.js) avec un sous-chemin........................23
III-B - Sous-chemin pour le composant reverse-proxy (NGINX)......................................................................... 23
III-B-1 - Configuration du composant reverse-proxy (NGINX) avec un sous-chemin.....................................23
III-B-2 - Dockerfile du composant reverse-proxy (NGINX) avec un sous-chemin.......................................... 23
III-B-3 - Construction de l'image Docker du composant reverse-proxy (NGINX) avec un sous-chemin......... 24
III-C - Résumé pour définir un sous-chemin........................................................................................................24
IV - Composer les images.........................................................................................................................................24
IV-A - Fichier de composition...............................................................................................................................24
IV-B - Construire et tester.................................................................................................................................... 25
V - Conclusion et remerciements.............................................................................................................................. 26
VI - Ressources......................................................................................................................................................... 26
-3-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
I - Architecture de déploiement
Dans la deuxième partie de cet article, nous avions détaillé que l'application PollDLE se composait d'une couche
cliente développée en Vue.js et d'une couche serveur développée en Java. Nous allons maintenant nous intéresser
au déploiement de l'application dans sa globalité pour une mise en production. Au sens production, nous entendons
un déploiement sur un serveur et qui sera à l'écoute de requêtes HTTP pour répondre via des réponses HTTP
adaptées (changement de composant et appel de services web REST).
Nous illustrons sur la figure ci-dessous, les composants de l'application PollDLE et leurs interactions (requêtes HTTP,
isolation via un sous-réseau et reverse-proxy).
Les deux couches client et serveur se retrouvent respectivement sur les serveurs appelés Back-end et Front-end
(situés sur la partie droite du schéma). Un serveur appelé Reverse-Proxy (situé au milieu du schéma) se chargera
de répondre aux sollicitations du client (situé sur la partie gauche du schéma). Ainsi, si l'URL est de la forme https://
polldle.com/, le Reverse-Proxy redirigera les requêtes vers le serveur Front-end afin de télécharger le contenu
statique développé avec Vue.js. Au contraire, si l'URL est de la forme https://polldle.com/server, le Reverse-Proxy
redirigera les requêtes vers le serveur Back-end afin d'invoquer les services web REST développés avec Java.
À vrai dire, nous n'allons pas utiliser de serveurs physiques dédiés pour les différents composants de l'architecture
présentée ci-dessus. Nous utiliserons des conteneurs par l'intermédiaire de Docker pour faciliter l'isolation de ces
composants. Ainsi, les rectangles en pointillé mi-long (couleur rouge) entourant les composants précisent que chaque
composant sera créé par des conteneurs Docker. Par ailleurs, le rectangle en pointillé long (couleur bleue) nommé
polldlenetwork est un sous-réseau Docker qui permettra de restreindre les accès aux conteneurs créés. Le conteneur
polldle-rp en charge du Reverse-Proxy pourra donc accéder aux conteneurs polldle-backend et polldle-frontend
en utilisant leur nom de domaine du sous-réseau à savoir http://backend:9991 et http://frontend. Tout conteneur
n'appartenant pas à ce sous-réseau polldlenetwork ne pourra pas communiquer avec les conteneurs de l'application
PollDLE.
Enfin, Docker sera aussi utilisé pour construire les binaires de la couche client et de la couche serveur. Lors de
l'élaboration des images Docker des trois composants (client, serveur et reverse-proxy) de notre architecture, les
entrées correspondront aux codes source Java et Vue.js. L'avantage sera d'éviter d'installer les outils (Java, Maven
et npm) sur son poste de travail pour construire les binaires.
Dans la suite, comme vous avez pu le lire, nous allons utiliser Docker pour construire des images et créer des
conteneurs. Nous verrons aussi comment mettre en œuvre un Reverse-Proxy.
Nous supposons pour les prochaines expérimentations que vous avez installé
Docker. Si ce n'est pas le cas, nous vous encourageons à consulter la
-4-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Nous étudions dans cette section la construction d'images Docker pour les trois composants de notre architecture
logicielle. Pour chaque composant, nous montrerons comment configurer les sources pour paramétrer l'exécution
(une exécution en production et différente d'une exécution pour le test en développement), comment construire les
binaires et comment « exécuter » les binaires.
• Éviter d'installer les outils (Java, Maven et npm) sur son poste de travail. En effet, si vous souhaitez
simplement tester PollDLE pour admirer cette magnifique application, vous n'aurez besoin que de récupérer
les sources et lancer une commande Docker pour utiliser les outils de compilation lors de la phase de
création d'images Docker.
• Maîtriser la construction des binaires dans un environnement connu (les versions des outils sont les mêmes).
En effet, vous pourriez déjà posséder sur votre poste de travail des versions différentes des outils et cela
pourrait amener des problèmes de compilation.
• Contrôler l'exécution des binaires en production. Les versions des outils pour l'exécution des binaires seront
les mêmes, quel que soit le système hôte utilisé.
Le composant serveur (Java) qui sert à diffuser les services web REST s'appuie sur la spécification MicroProfile.
Nous n'utiliserons que deux composants de cette spécification : JAX-RS (service web REST) et CDI (injection de
dépendances). Nous avons opté pour KumuluzEE comme implémentation de la spécification MicroProfile. Lors
de l'écriture de cet article, la version 2.1 de MicroProfile était supportée par KumuluzEE. De nombreuses autres
implémentations de MicroProfile sont également disponibles. Le choix de KumuluzEE a été motivé par sa simplicité,
sa documentation, sa longévité (cinq ans) et qu'il est toujours enrichissant de s'intéresser aux bibliothèques qui ne
font pas de vague, mais qui apportent de grands services. À noter que j'ai découvert KumuluzEE en 2015 puisque
cette bibliothèque avait gagné le prix « Duke's Choice Award Winner », c'est aussi à cette époque que je me suis
intéressé à MicroProfile.
Dans la suite de cette section dédiée au composant serveur (Java), nous vous invitons à ouvrir un terminal et vous
positionner à la racine du répertoire polldle-backend.
• Exécuter la ligne de commande suivante pour compiler la couche serveur à partir de Maven.
-5-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Maven compilera le code source, exécutera les tests unitaires et préparera les binaires finals. Ces derniers sont
disponibles dans le répertoire polldle-server/target, nous les détaillons ci-dessous :
1. polldle-server/target
2. ├── classes
3. │ ├── fr
4. │ ├── META-INF
5. │ ...
6. ├── dependency
7. │ ├── HikariCP-2.7.9.jar
8. │ ├── activation-1.1.1.jar
9. │ ├── alpn-api-1.1.3.v20160715.jar
10. │ ├── aopalliance-repackaged-2.5.0.jar
11. │ ├── asm-7.0.jar
12. │ ...
13. ├── generated-sources
14. ├── generated-test-sources
15. ├── maven-archiver
16. ├── maven-status
17. ├── polldle-server.jar
18. ├── surefire-reports
19. └── test-classes
Les répertoires qui nous intéressent sont classes qui contient les ressources et les fichiers .class puis dependency
qui liste l'ensemble des bibliothèques nécessaires à l'exécution du programme Java.
Le composant serveur (Java) n'offre pas de grandes possibilités de configuration excepté le port d'écoute du serveur
et l'URL de déploiement. Ces informations sont modifiables via des variables d'environnement et font partie intégrante
de l'implémentation KumuluzEE.
• Exécuter les lignes de commande suivantes pour initialiser deux variables d'environnement.
1. export KUMULUZEE_SERVER_HTTP_PORT=9991
2. export KUMULUZEE_SERVER_BASEURL=http://0.0.0.0
Ces variables d'environnement devront être initialisées avant l'exécution du programme Java.
Comme vu dans la partie construction des binaires, les fichiers nécessaires à l'exécution sont disponibles dans
le répertoire polldle/polldle-server/target. Nous passerons par une exécution classique d'une application Java
puisque le composant serveur (Java) a intégré un serveur web Jetty pour diffuser les services web à l'adresse
http://0.0.0.0:9991.
L'ensemble des bibliothèques Java nécessaires à l'exécution du programme Java et le code compilé du projet sont
passés au classpath de l'exécution. La classe principale (le point d'entrée de l'application Java) est celle fournie par
KumuluzEE à savoir com.kumuluz.ee.EeApplication.
-6-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Le résultat obtenu permet de voir que le composant est déployé et les services web REST sont disponibles à l'adresse
http://0.0.0.0:9991.
Précédemment, nous avons vu comment compiler, configurer l'exécution et exécuter le composant serveur (Java).
Nous allons réexploiter ces trois étapes lors de la création de l'image Docker pour le composant serveur (Java).
La création d'une image sous Docker passe par l'écriture d'un fichier Dockerfile. Ce fichier est disponible à la racine
du répertoire polldle-backend.
1. # Build env
2. FROM maven:3-jdk-11 AS build-java-stage
3. LABEL maintainer="Mickael BARON"
4. WORKDIR /polldle
5. COPY polldle-api polldle-api
6. COPY polldle-server polldle-server
7. COPY pom.xml .
8. RUN mvn -f pom.xml clean package
9. # Run env
10. FROM adoptopenjdk/openjdk11:alpine-jre
11. COPY --from=build-java-stage /polldle/polldle-server/target/classes /polldle/classes
12. COPY --from=build-java-stage /polldle/polldle-server/target/dependency/*.jar /polldle/
dependency/
13. EXPOSE 9991
14. ENTRYPOINT ["java", "-cp", "/polldle/classes:/polldle/dependency/
*", "com.kumuluz.ee.EeApplication"]
Ce fichier Dockerfile est décomposé en deux étapes de construction appelée multistage. La première étape consiste
à créer une image temporaire à partir du résultat de la compilation du composant serveur (Java) tandis que la
seconde étape consiste à créer l'image finale qui servira pour l'exécution. Le résultat de la première étape servira
pour construire la seconde étape. L'intérêt de décomposer en deux étapes est avant tout de pouvoir limiter la taille
de l'image finale. En effet, pour la compilation, il est nécessaire de s'appuyer sur une image Docker avec JDK et
Maven (FROM maven:3-jdk-11 AS build-java-stage). De nombreuses dépendances Java seront téléchargées, mais
pas forcément utiles pour l'exécution (plugin Maven, dépendances Java pour les tests unitaires…).
Étapes de compilation :
• FROM maven:3-jdk-11 AS build-java-stage : partir d'une image Docker Java pour la compilation, elle contient
Maven et JDK ;
• LABEL maintainer="Mickael BARON" : préciser l'auteur du fichier ;
• WORKDIR /polldle : fixer le répertoire de travail ;
• COPY polldle-api polldle-api : copier le contenu du répertoire polldle/polldle-backend/polldle-api (contient l'API
du projet) de l'hôte à la racine du répertoire courant du conteneur ;
• COPY polldle-server polldle-server : copier le contenu du répertoire polldle/polldle-backend/polldle-server
(contient l'implémentation ) de l'hôte à la racine du répertoire courant du conteneur ;
• COPY pom.xml . : copier le fichier de configuration Maven de l'hôte à la racine du répertoire courant du
conteneur ;
• RUN mvn -f pom.xml clean package : exécuter la compilation, les tests et la construction des binaires à partir
de Maven.
Étapes d'exécution :
• FROM adoptopenjdk/openjdk11:alpine-jre : partir d'une image Docker Java pour l'exécution. On s'appuie ici
sur une version JRE de Java fournie par la distribution AdoptOpenJDK ;
• COPY --from=build-java-stage .../classes /polldle/classes : copier le résultat de la compilation de la
précédente étape vers le conteneur de la seconde étape ;
-7-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
La construction de l'image du composant serveur (Java) se base sur le fichier Dockerfile défini précédemment.
• Exécuter la ligne de commande suivante (toujours depuis le répertoire polldle-backend) pour démarrer la
construction de l'image Docker du composant serveur (Java).
On remarque que le nombre d'étapes est identique au nombre de lignes contenues dans le fichier Dockerfile. Chaque
étape correspondra à une couche spécifique de l'image résultante.
• Exécuter la ligne de commande suivante pour s'assurer que l'image intitulée mickaelbaron/polldle-backend a
été construite.
1. $ docker images
-8-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
On constate clairement que l'image est d'une taille réduite (165MB). Cela est dû à l'utilisation du multistage d'une
part et à l'image Docker adoptopenjdk/openjdk11:alpine-jre qui offre une empreinte de disque réduite.
Nous pouvons désormais créer un conteneur afin de tester l'image construite pour le composant serveur (Java). Bien
entendu, il s'agit d'une première étape, car dans cette section, seul le composant serveur (Java) sera déployé par un
conteneur. Le composant client (Vue.js) devra être démarré sans conteneur.
• Se positionner dans le répertoire polldle-vue et créer un conteneur basé sur l'image Docker précédente.
Un conteneur nommé backend sera créé sur la base de l'image mickaelbaron/polldle-backend. L'option -d indique
que le conteneur est créé en mode détaché. L'option -e KUMULUZEE_SERVER_HTTP_PORT=9991 est utilisée
pour modifier la valeur du port d'écoute via l'initialisation d'une variable d'environnement. L'option -p 9991:9991 est
utilisée pour la redirection de port.
• Exécuter la ligne de commande suivante pour s'assurer que le contenu a été correctement créé et qu'il est
toujours en exécution.
1. $ docker ps
2. CONTAINER ID IMAGE COMMAND STATUS
PORTS NAMES
3. 2cc90d113638 mickaelbaron/polldle-backend "java -cp /polldle/c…" Up 52 seconds
0.0.0.0:9991->9991/tcp backend
• Toujours depuis le répertoire polldle-vue, démarrer l'exécution en mode développement de la couche client
(Vue.js).
Le développement du composant client (Vue.js) a déjà été présenté dans le deuxième article de ce tutoriel.
Pour le déploiement de ce composant, nous allons devoir changer l'adresse du composant serveur. En effet, l'adresse
du composant serveur pour le développement http://127.0.0.1:9991 est différente de celle pour le déploiement en
production /server.
Que l'on souhaite tester lors de la phase de développement ou construire une version déployable pour la phase de
mise en production, nous montrerons à la fin de cette section que vous n'aurez plus besoin d'intervenir dans le code
du composant client. Des variables d'environnement seront utilisées directement dans le code.
-9-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Nous montrons dans cette sous-section comment stocker les variables d'environnement et comment les utiliser dans
le code des composants.
Depuis, la version 3 de Vue CLI, les variables d'environnement sont déclarées et initialisées dans des fichiers préfixés
par .env[.mode] où mode correspond à development ou production. Ces fichiers doivent être placés à la racine de
votre projet.
À titre d'exemple, voici les fichiers que vous pourriez trouver à la racine d'un projet Vue.js.
Ces fichiers .env[.mode] contiennent des paires de clé=valeur. Généralement, les clés des variables d'environnement
seront identiques dans les différents fichiers .env[.mode] par contre les valeurs seront différentes.
Pour qu'une clé soit utilisable dans le code des composants, elle doit commencer par VUE_APP.
• Créer un fichier .env.development pour le mode développement et éditer le fichier de façon à ajouter le
contenu ci-dessous.
1. VUE_APP_SERVER_URL = http://localhost:9991
• Créer un fichier .env.production pour le mode production et éditer le fichier de façon à ajouter le contenu ci-
dessous.
1. VUE_APP_SERVER_URL = /server
Une seule variable d'environnement sera définie et sa valeur changera selon le mode utilisé (development ou
production). Ainsi VUE_APP_SERVER_URL vaudra http://localhost:9991 pour le mode développement et /server
pour le mode production.
Pour utiliser ces variables d'environnement dans le code des composants, il suffira d'utiliser le code suivant :
process.env.VUE_APP_SERVER_URL. Le code des trois composants sera impacté afin d'utiliser cette variable
d'environnement.
• Éditer le fichier CreatePolldle.vue en remplaçant le commentaire // Use environment variable to define REST
web service URL par le code présenté ci-dessous.
• Éditer le fichier VotePolldle.vue en remplaçant les deux commentaires // Use environment variable to define
REST web service URL par les codes présentés ci-dessous.
- 10 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
1. created() {
2. // Use environment variable to define REST web service URL
3. axios.get(process.env.VUE_APP_SERVER_URL + "/polldles", {
4. params : {
5. pathURL: this.$route.params.pathurl
6. }
7. }).then(response => {
8. ...
9. },
10. methods: {
11. vote() {
12. ...
13. axios({
14. method: 'post',
15. // Use environment variable to define REST web service URL
16. baseURL: process.env.VUE_APP_SERVER_URL + "/
polldles/" + this.$route.params.pathurl + "/votes",
17. data: JSON.stringify(polldleVote),
18. headers: {
19. 'Content-Type': 'application/json'
20. }
21. }).then(response => {
22. ...
23. }
24. }
• Éditer le fichier ResultPolldle.vue en remplaçant le commentaire // Use environment variable to define REST
web service URL par le code présenté ci-dessous.
1. created() {
2. // Use environment variable to define REST web service URL
3. var source = new EventSource(
4. process.env.VUE_APP_SERVER_URL +
5. "/polldles/" +
6. this.$route.params.pathurl +
7. "/votes/sse"
8. );
9. ...
10. }
Comme montré dans les codes précédents, l'ancienne valeur http://127.0.0.1:9991 a été transformée
en process.env.VUE_APP_SERVER_URL. Lors de la phase construction des binaires, le code
process.env.VUE_APP_SERVER_URL sera remplacé par la valeur contenue soit dans le fichier .env.development
soit dans le fichier .env.production.
Pour l'instant, nous avons vu comment tester le projet Vue.js en exécutant : npm run server.
Nous allons maintenant construire les binaires pour la version qui sera déployée en production.
- 11 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
• Exécuter npm run build où build est un script défini dans le fichier package.json.
Le résultat de cette construction est disponible dans le répertoire *dist* où l'on retrouve le contenu CSS, JavaScript
et le fichier index.html
1. .
2. ├── css
3. │ ├── app.f351e9c1.css
4. │ └── chunk-vendors.0cbd351a.css
5. ├── index.html
6. └── js
7. ├── app.f1a0f2ea.js
8. ├── app.f1a0f2ea.js.map
9. ├── chunk-vendors.86498fa6.js
10. └── chunk-vendors.86498fa6.js.map
Toutes les bibliothèques (Bootstrap, Vue.js, Highcharts…) utilisées dans notre projet PollDLE sont regroupées et
minifiées (réduites au strict minimum) dans les fichiers CSS et JavaScript.
Pour s'assurer que la variable d'environnement a été utilisée dans le code, examinons le contenu du fichier dist/js/
app.XYZ.js.
- 12 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Les binaires obtenus seront déployés sur le serveur web NGINX. C'est un choix totalement personnel puisque je
l'utilise depuis de nombreuses années NGINX. Bien entendu de nombreux autres serveurs auraient pu faire le même
travail.
Dans le cas d'une application développée avec Vue.js et l'utilisation du mode history pour le routage (pour rappel
transformer http://localhost/#/3/result en http://localhost/3/result), il est nécessaire de procéder à une réécriture
des requêtes reçues. NGINX s'appuie sur des fichiers de configuration pour paramétrer le déploiement d'une
application web. C'est donc dans ce fichier de configuration que sera précisée la réécriture. Des informations
complémentaires peuvent être trouvées ici.
1. server {
2. listen 80 default_server;
3. listen [::]:80 default_server;
4.
5. root /usr/share/nginx/html;
6.
7. index index.html;
8.
9. server_name localhost;
10.
11. location / {
12. try_files $uri $uri/ @rewrites;
13. }
14. location @rewrites {
15. rewrite ^(.+)$ /index.html last;
16. }
17. location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
18. # Some basic cache-control for static files to be sent to the browser
19. expires max;
20. add_header Pragma public;
21. add_header Cache-Control "public, must-revalidate, proxy-revalidate";
22. }
23. }
La réécriture des requêtes est réalisée par l'instruction try_files $uri $uri/ @rewrites; et rewrite ^(.+)$ /index.html last;.
Il est précisé que, quelles que soient les requêtes sur / (exemples : http://localhost/1/result), elles aboutiront vers
index.html, ce qui est logique, car nous développons une Single-Page application.
Nous allons tester le déploiement sur un serveur NGINX disponible dans un conteneur Docker.
• Éditer le fichier .env.production afin de changer l'URL du serveur. En effet, le composant serveur (Java) sera
démarré sur un port différent, car actuellement nous n'avons pas configuré le Reverse-Proxy.
1. VUE_APP_SERVER_URL = http://localhost:9991
Cette modification est réalisée à des fins de test et ne sera pas conservée par
la suite.
• Installer les modules requis et construire les binaires pour notre projet Vue.js.
1. npm install
2. npm run build
- 13 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
• Si le conteneur du composant serveur (Java) est toujours en exécution ($ docker ps), vous pouvez passer à
l'étape suivante, sinon, exécuter la ligne de commande suivante.
Un conteneur Docker sera créé, en mode détaché (-d), automatiquement supprimé (--rm), avec une redirection de
port (-p 80:80), portant le nom (--name frontent) et partageant le répertoire dist et le fichier nginx.conf (-v).
1. docker rm -f frontend
Nous avons vu comment configurer le code pour utiliser des variables d'environnement, produire les binaires pour le
composant client (Vue.js) et déployer sur le serveur web NGINX.
Tout comme le composant serveur (Java), les binaires du composant client seront produits lors de la création de
l'image Docker.
Pour rappel, la création d'une image sous Docker passe par l'écriture d'un fichier Dockerfile.
• Créer un fichier Dockerfile à la racine du dossier polldle-vue-17 et le compléter par le code présenté ci-
dessous.
1. # Build env
2. FROM node:lts-alpine as build-npm-stage
3. LABEL maintainer="Mickael BARON"
4.
5. WORKDIR /polldle-vue
6. COPY package*.json ./
7. RUN npm install
8. COPY public ./public
9. COPY src ./src
10. COPY .env.production ./
11. RUN npm run build
12. # Run env
13. FROM nginx:stable-alpine
14. COPY --from=build-npm-stage /polldle-vue/dist /usr/share/nginx/html
15. COPY nginx.conf /etc/nginx/conf.d/default.conf
16. EXPOSE 80
17. ENTRYPOINT ["nginx", "-g", "daemon off;"]
Ce fichier Dockerfile est également décomposé en deux étapes de construction appelée multistage. La première
étape consiste à créer une image temporaire à partir du résultat de la construction des binaires du composant client
tandis que la seconde étape consiste à créer l'image finale qui servira pour l'exécution.
- 14 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Étapes de compilation :
• FROM node:lts-alpine as build-npm-stage : partir d'une image Docker pour la compilation, elle contient npm ;
• LABEL maintainer="Mickael BARON" : préciser l'auteur du fichier ;
• WORKDIR /polldle-vue : fixer le répertoire de travail ;
• COPY package*.json ./ : copier le fichier de description du projet dans le répertoire de travail ;
• RUN npm install : installer les modules requis par le projet ;
• COPY public ./public : copier le contenu du répertoire public dans le répertoire de travail ;
• COPY src ./src : copier le contenu du répertoire src dans le répertoire de travail ;
• COPY .env.production ./ : copier le fichier d'initialisation des variables d'environnement dans le répertoire de
travail ;
• RUN npm run build : construire les binaires qui seront déposés dans le répertoire dist.
Étapes d'exécution :
• FROM nginx:stable-alpine : partir d'une image Docker pour l'exécution. On s'appuie sur Nginx comme
serveur de déploiement ;
• COPY --from=build-npm-stage /polldle-vue/dist /usr/share/nginx/html : copier le résultat de la construction des
binaires dist dans le répertoire usuel de Nginx ;
• COPY nginx.conf /etc/nginx/conf.d/default.conf : copier le fichier de déploiement de notre application pour
Nginx dans le répertoire de configuration de Nginx ;
• EXPOSE 80 : préciser que le port 80 pourra être exposé ;
• ENTRYPOINT ["nginx", "-g", "daemon off;"] : préciser la commande par défaut à utiliser lors de l'exécution du
conteneur.
La construction de l'image Docker du composant client (Vue.js) se base sur le fichier Dockerfile défini précédemment.
• Toujours depuis le répertoire polldle/polldle-vue-17, exécuter la ligne de commande suivante pour démarrer la
construction de l'image Docker du composant client (Vue.js).
- 15 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
1. $ docker images
2. REPOSITORY TAG IMAGE ID CREATED
SIZE
3. mickaelbaron/polldle-backend latest c976b72dafd3 50 seconds ago
165MB
4. mickaelbaron/polldle-vue latest f34078d6c901 34 seconds ago
23.2MB
Nous pouvons désormais créer un conteneur afin de tester l'image Docker construite pour le composant client
(Vue.js). Le composant serveur (Java) doit normalement toujours être disponible dans un conteneur.
• Se positionner dans le répertoire polldle-vue-18 et exécuter la ligne de commande suivante pour créer un
conteneur basé sur l'image mickaelbaron/polldle-vue.
Un conteneur nommé frontend sera créé sur la base de l'image mickaelbaron/polldle-vue. L'option -p 80:80 est utilisée
pour la redirection de port.
• S'assurer que le contenu a été correctement créé et qu'il est toujours en exécution.
1. $ docker ps
2. CONTAINER ID IMAGE COMMAND STATUS
PORTS NAMES
3. 0e65e7ad22e6 mickaelbaron/polldle-vue "nginx -g 'daemon of…" 6 minutes ago
0.0.0.0:80->80/tcp frontend
4. 346e0d4413ce mickaelbaron/polldle-backend "java -cp /polldle/c…" 6 minutes ago
0.0.0.0:9991->9991/tcp backend
Malheureusement, si vous testez l'application PollDLE à l'adresse http://localhost, l'accès au service web REST ne
fonctionnera pas puisque la variable d'environnement VUE_APP_SERVER_URL est initialisée à /server. Ainsi, l'URL
http://localhost/server/polldles ne sera pas accessible.
- 16 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Le composant reverse-proxy est en charge de répondre aux sollicitations du client. Ainsi, si l'URL est de la forme
http://localhost/, le reverse-proxy redirigera les requêtes vers le composant client (Vue.js) afin de télécharger le
contenu statique développé avec Vue.js. Au contraire, si l'URL est de la forme http://localhost/server, le composant
reverse-proxy redirigera les requêtes vers le composant serveur (Java) afin d'invoquer les services web REST
développés avec Java.
NGINX, déjà employé comme serveur web, sera également utilisé comme Reverse-Proxy.
1. server {
2. listen 80;
3. location /server/ {
4. proxy_pass http://backend:9991/;
5. proxy_http_version 1.1;
6. proxy_set_header Connection "";
7. }
8. location / {
9. rewrite ^(/.*)$ $1 break;
10. proxy_pass http://frontend;
11. proxy_http_version 1.1;
12. proxy_set_header Upgrade $http_upgrade;
13. proxy_set_header Connection 'upgrade';
14. proxy_set_header Host $host;
15. proxy_cache_bypass $http_upgrade;
16. }
17. }
Deux configurations sont disponibles : celle pour accéder au composant server (Java) via /server/ et celle pour
accéder au composant client (Vue.js) via /. À noter que les requêtes sont redirigées vers les deux serveurs qui portent
les noms respectifs de http://backend:9991/ et http://frontend. Nous verrons plus tard comment associer ces noms.
Le fichier Dockerfile pour la création de l'image Docker du composant reverse-proxy est présenté ci-dessous.
1. FROM nginx:stable-alpine
2. LABEL maintainer="Mickael BARON"
3. COPY build.conf /etc/nginx/conf.d/default.conf
4. EXPOSE 80
5. ENTRYPOINT ["nginx", "-g", "daemon off;"]
• FROM nginx:stable-alpine : partir d'une image Docker pour le déploiement statique d'application web avec
NGINX ;
• LABEL maintainer="Mickael BARON" : préciser l'auteur du fichier ;
• COPY build.conf /etc/nginx/conf.d/default.conf : copier le fichier de configuration dans le répertoire dédié de
NGINX ;
• EXPOSE 80 : préciser que le port 80 pourra être exposé ;
- 17 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
• ENTRYPOINT ["nginx", "-g", "daemon off;"] : préciser la commande par défaut à utiliser lors de l'exécution du
conteneur.
La construction de l'image Docker du composant reverse-proxy se base sur le fichier Dockerfile défini précédemment.
• Exécuter la ligne de commande suivante pour s'assurer que l'image Docker intitulée mickaelbaron/polldle-
vue a été construite.
1. $ docker images
2. REPOSITORY TAG IMAGE ID CREATED
SIZE
3. mickaelbaron/polldle-rp latest 0c244aebbac3 18 seconds ago
21.3MB
4. mickaelbaron/polldle-backend latest c976b72dafd3 20 hours ago
165MB
5. mickaelbaron/polldle-vue latest f34078d6c901 22 minutes ago
23.2MB
Comme les conteneurs Docker basés sur les images mickaelbaron/polldle-vue et mickaelbaron/polldle-backend
exposent les ports 80 et 9991, nous allons les recréer.
• Exécuter la ligne de commande suivante pour supprimer les conteneurs en cours d'exécution.
1. $ docker rm -f frontend
2. $ docker rm -f backend
• Exécuter la ligne de commande suivante pour créer les conteneurs Docker basés sur les images
mickaelbaron/polldle-vue et mickaelbaron/polldle-backend.
- 18 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
1. $ docker ps -a
2. CONTAINER ID IMAGE COMMAND STATUS
PORTS NAMES
3. 78bd18008796 mickaelbaron/polldle-rp "nginx -g 'daemon of…" Exited (1) 19
minutes ago rp
4. 781f589d49eb mickaelbaron/polldle-vue "nginx -g 'daemon of…" Up 22 hours
80/tcp frontend
5. fc9c5c3ca3a0 mickaelbaron/polldle-backend "java -cp /polldle/c…" Up 22 hours
9991/tcp backend
Nous constatons que le conteneur rp ne fonctionne pas correctement. Pour connaître les causes de ce
dysfonctionnement, nous allons examiner les logs du conteneur.
1. $ docker logs rp
2. 2019/06/26 15:35:50 [emerg] 1#1: host not found in upstream "backend" in /etc/nginx/conf.d/
default.conf:5
3. nginx: [emerg] host not found in upstream "backend" in /etc/nginx/conf.d/default.conf:5
Cette erreur indique que le nom de domaine backend n'est pas connu. Il en va de même pour le nom de domaine
frontend. Pour résoudre ce problème, il va donc falloir lier le conteneur rp avec les conteneurs backend et frontend.
Pour cela, nous utiliserons un sous-réseau Docker. Tout conteneur dans un sous-réseau Docker est identifiable par
les autres conteneurs via son nom de conteneur.
Le déploiement peut vouloir être réalisé au travers d'un sous-chemin de la forme https://mycompany.com/polldle.
Cela implique que les URL d'accès aux composants client et serveur soient différentes. Cette modification n'est pas
si anodine, puisque le code des composants reverse-proxy (NGINX) et client (Vue.js) devront être impactés. Plus
précisément, il s'agira pour le composant reverse-proxy (NGINX) du fichier de configuration, et pour le composant
client (Vue.js) d'une nouvelle URL pour accéder aux services web REST, de la configuration du routage et de l'accès
aux ressources CSS et JavaScript.
Le changement (avec ou sans sous-chemin) sera indiqué lors de la création des images Docker. Ce changement
pourrait se faire directement lors de l'exécution, mais je ne le traiterai pas dans ce tutoriel.
- 19 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Dans la suite de cette section, nous montrons une solution pour automatiser la construction des images Docker du
composant reverse-proxy (NGINX) et du composant client (Vue.js).
• une nouvelle URL pour accéder aux services web REST (variables d'environnement) ;
• la configuration du routage (fichier src/router/index.js) ;
• l'accès aux ressources CSS et JavaScript (fichier de configuration).
Actuellement, deux modes sont utilisés pour initialiser les variables d'environnement : development et production.
Nous montrons dans cette section comment créer un nouveau mode personnalisé appelé subpath qui donnera
une nouvelle valeur à la variable d'environnement VUE_APP_SERVER_URL et ajoutera une nouvelle variable
d'environnement pour préciser le sous-chemin.
1. NODE_ENV = production
2. VUE_APP_SUBPATH = /polldle/
3. VUE_APP_SERVER_URL = /polldle/server
La première propriété MODE_ENV explique que ce nouveau mode sera basé sur le mode production. La seconde
VUE_APP_SUBPATH est une nouvelle variable d'environnement pour fixer la valeur du sous-chemin. La troisième
VUE_APP_SERVER_URL est celle qui précise la valeur de l'URL du serveur.
Quand un sous-chemin n'est pas requis, c'est-à-dire pour les modes development et production, la variable
d'environnement VUE_APP_SUBPATH doit être au moins fixée à /.
1. # Fichier .env.development
2. VUE_APP_SERVER_URL = http://localhost:9991
3. # Add new environment variable VUE_APP_SUBPATH
4. VUE_APP_SUBPATH = /
1. # Fichier .env.production
2. VUE_APP_SERVER_URL = /server
3. # Add new environment variable VUE_APP_SUBPATH
4. VUE_APP_SUBPATH = /
Pour construire des binaires avec le mode personnalisé subpath, il faudra exécuter la commande suivante : vue-cli-
service build --mode subpath. vue-cli-service n'est pas exécutée directement, mais via un script défini dans le fichier
package.json.
• Éditer le fichier package.json et ajouter un nouveau script appelé subpath dans le contenu de scripts.
1. ...
2. "scripts": {
- 20 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
1. npm install
2. npm run subpath
3.
4. > polldle-vue-19@0.1.0 subpath /Users/baronm/workspacejava/polldle/polldle-vue-19
5. > vue-cli-service build --mode subpath
6.
7.
8. # Building for subpath...
9. ...
10. File Size Gzipped
11.
12. dist/js/chunk-vendors.e3058ce2.js 346.38 KiB 120.10 KiB
13. dist/js/app.d169298e.js 12.09 KiB 3.88 KiB
14. dist/css/chunk-vendors.0cbd351a.css 191.84 KiB 26.80 KiB
15. dist/css/app.42f644cf.css 0.82 KiB 0.40 KiB
16.
17. Images and other types of assets omitted.
18. DONE Build complete. The dist directory is ready to be deployed.
19. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Le mode subpath a bien été pris en compte. Vous pouvez examiner le contenu généré pour vous assurer que les
valeurs sont au bon endroit.
1. ...
2. export default new Router({
3. mode: 'history',
4. // Change base value.
5. base: process.env.VUE_APP_SUBPATH,
6. routes: [
7. {
8. path: '/',
9. name: 'CreatePolldle',
10. component: CreatePolldle
11. },
12. {
13. path: '/:pathurl',
14. name: 'VotePolldle',
15. component: VotePolldle
16. },
17. {
18. path: '/:pathurl/result',
19. name: 'ResultPolldle',
20. component: ResultPolldle
21. }
22. ]
23. })
- 21 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Des paramètres globaux sont disponibles pour configurer certains éléments d'un projet Vue.js. Dans le cas de
la configuration d'un sous-chemin, nous allons modifier le paramètre publicPath. Les paramètres globaux ont des
valeurs par défaut (publicPath=/) et sont modifiables depuis un fichier vue.config.js.
1. module.exports = {
2. publicPath: process.env.VUE_APP_SUBPATH,
3. productionSourceMap: false
4. }
La valeur donnée à publicPath est la valeur obtenue par la variable d'environnement VUE_APP_SUBPATH. Nous
en profitons également pour ajouter productionSourceMap: false qui permet d'éviter d'ajouter les fichiers SourceMap
lors de la construction des binaires. Pour information, les fichiers SourceMap aident à déboguer une application
JavaScript.
Vous trouverez une liste des paramètres globaux disponibles à cette adresse :
https://cli.vuejs.org/config/.
Pour rappel, voici les deux commandes pour construire les binaires du composant client (Vue.js) :
Le choix de la commande dépend donc de ce qu'on veut obtenir comme binaire. Nous allons modifier le fichier
Dockerfile afin de pouvoir choisir la commande lors de la construction de l'image Docker.
• Éditer le fichier polldle-vue-20/Dockerfile en ajoutant le code présenté au niveau des commentaires # Use
ARG instruction to create script_name variable et # Inject script_name variable into the command.
- 22 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
L'instruction ARG script_name=build permet de créer une variable script_name qui prend comme valeur par défaut
build. Lors de la construction de l'image Docker, une valeur pourra être donnée. L'idée est de donner soit build soit
subpath.
Pour passer une valeur à la variable script_name, l'option --build-arg a été utilisée.
Nous vous invitons à vous positionner dans le répertoire polldle-rp pour profiter
des codes qui vont illustrer cette section.
1. server {
2. listen 80;
3. location /polldle/server/ {
4. proxy_pass http://backend:9991/;
5. proxy_http_version 1.1;
6. proxy_set_header Connection "";
7. }
8. location /polldle/ {
9. rewrite ^/polldle(/.*)$ $1 break;
10. proxy_pass http://frontend;
11. proxy_http_version 1.1;
12. proxy_set_header Upgrade $http_upgrade;
13. proxy_set_header Connection 'upgrade';
14. proxy_set_header Host $host;
15. proxy_cache_bypass $http_upgrade;
16. }
17. }
1. FROM nginx:stable-alpine
2. LABEL maintainer="Mickael BARON"
3. ARG script_name=build
4. COPY $script_name.conf /etc/nginx/conf.d/default.conf
5. EXPOSE 80
6. CMD ["nginx", "-g", "daemon off;"]
- 23 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
Tout comme le fichier Dockerfile du composant client (Vue.js), une variable est utilisée pour donner le nom de la
configuration à appeler.
• Depuis l'invite de commande, se positionner dans le répertoire polldle-rp et exécuter la ligne de commande
suivante pour démarrer la construction de l'image Docker du composant reverse-proxy (NGINX).
Ensuite, reconstruire les images associées aux composants Client (Vue.js) et reverse-proxy.
Actuellement, nous disposons de trois composants qui ont chacun une image Docker. La construction des images
Docker et la création des conteneurs associés se font manuellement. Pour automatiser ce processus, nous utiliserons
docker-compose via la mise en place d'un fichier docker-compose.yml. Bien entendu, nous garderons les bénéfices
de création d'un sous-chemin ou pas.
1. version: '3'
2.
3. services:
4.
5. backend:
6. build: polldle-backend/
7. image: mickaelbaron/polldle-backend
8. environment:
9. KUMULUZEE_SERVER_HTTP_PORT: 9991
10. ports:
11. - "9991:9991"
12. networks:
13. - polldlenetwork
14.
15. frontend:
16. build: polldle-vue/
17. image: mickaelbaron/polldle-vue
18. networks:
19. - polldlenetwork
20. rp:
21. build: polldle-rp/
22. image: mickaelbaron/polldle-rp
23. depends_on:
24. - frontend
25. - backend
- 24 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
26. ports:
27. - "80:80"
28. networks:
29. - polldlenetwork
30. networks:
31. polldlenetwork:
Ce fichier est divisé en deux parties : la configuration des conteneurs d'une part et la configuration du sous-
réseau polldlenetwork d'autre part. Tous les paramétrages des conteneurs ont déjà été étudiés dans les sections
précédentes.
L'outil docker-compose permet de construire toutes les images Docker et de créer les trois conteneurs dans le sous-
réseau polldlenetwork. Vous trouverez ci-dessous toutes les configurations possibles :
• docker-compose up -d : créer les trois conteneurs en mode détaché (si les images Docker ne sont pas
créées, elles seront construites avant) ;
• docker-compose build : construire toutes les images Docker ;
• docker-compose build --build-arg script_name=subpath : construire toutes les images Docker en précisant
avec ou sans sous-chemin ;
• docker-compose build --build-arg script_name=subpath COMPONENT : construire l'image Docker du
composant COMPONENT (frontend, backend ou rp).
Dans l'hypothèse, où aucune image Docker n'a été construite, la commande $ docker-compose up -d est suffisante.
1. docker-compose up -d
2. Creating network "polldle_polldlenetwork" with the default driver
3. Building backend
4. Step 1/12 : FROM maven:3-jdk-11 AS build-java-stage
5. ...
6. Step 12/12 : ENTRYPOINT ["java", "-cp", "/polldle/classes:/polldle/dependency/*",
"com.kumuluz.ee.EeApplication"]
7. ---> Running in d3dbb1a0a276
8. Removing intermediate container d3dbb1a0a276
9. ---> 96b6334c959f
10. Successfully built 96b6334c959f
11. Successfully tagged mickaelbaron/polldle-backend:latest
12. Building frontend
13. Step 1/17 : FROM node:lts-alpine as build-npm-stage
14. ...
15. Step 17/17 : CMD ["nginx", "-g", "daemon off;"]
16. ---> Running in 2013f589151d
17. Removing intermediate container 2013f589151d
18. ---> b5e48d02d21d
19. Successfully built b5e48d02d21d
20. Successfully tagged mickaelbaron/polldle-vue:latest
21. Building rp
22. Step 1/6 : FROM nginx:stable-alpine
23. ---> ef04b00b089d
24. ...
25. Successfully built 345d741aa693
26. Successfully tagged mickaelbaron/polldle-rp:latest
27. Creating polldle_frontend_1 ... done
28. Creating polldle_backend_1 ... done
29. Creating polldle_rp_1 ... done
1. $ docker-compose ps
2. Name Command State Ports
- 25 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/
Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3) par Mickael Baron
3. ------------------------------------------------------------------------------------
4. polldle_backend_1 java -cp /polldle/classes: ... Up 0.0.0.0:9991->9991/tcp
5. polldle_frontend_1 nginx -g daemon off; Up 80/tcp
6. polldle_rp_1 nginx -g daemon off; Up 0.0.0.0:80->80/tcp
V - Conclusion et remerciements
Cette troisième partie a présenté les problématiques de déploiement d'une application Vue.js en utilisant Docker
pour la création de conteneurs.
Pour le composant client (Vue.js) qui était au centre de cette étude, nous avons montré comment utiliser les variables
d'environnement dans le code, comment configurer les paramètres globaux et comment utiliser un sous-chemin.
Pour Docker, cette solution de conteneurisation a permis de rendre le développement plus proche de la production.
La taille des images Docker construites a été optimisée via l'utilisation du multistage.
Cette troisième partie clôture également cette série consacrée à Vue.js. De nombreux concepts n'ont pas été
présentés, mais pourront faire l'objet de prochains tutoriels Vuex pour gérer l'état de l'application, Vue-Native pour
la création d'applications natives à déployer sur le mobile et WebComponents pour utiliser des WebComponents
existants et pourquoi pas transformer des composants Vue.js en WebComponents.
Vue.js est une constante évolution. Lors de l'écriture de cet article, nous utilisions la version 2 de Vue.js et la version
4 de Vue CLI. La version 3 de Vue.js est en cours d'élaboration et devrait sortir en version complète, fin 2020.
J’essaierai, dans la mesure du possible, d'adapter le code du projet PollDLE afin de tenir un cas d'étude à jour des
avancées de Vue.js.
Cette partie est également disponible sur mon site web personnel : https://mickael-baron.fr/web/vuejs-
deploiement-part3.
VI - Ressources
• Apprendre à utiliser Docker avec Vue.js : une aide qui explique comment utiliser Docker avec Vue.js ;
• Paramètres globaux pour Vue CLI : liste des paramètres globaux à utiliser dans le fichier vue.config.js ;
• Configurations serveur : exemples de configuration serveur.
- 26 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2019 Mickael Baron. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://mbaron.developpez.com/tutoriels/vuejs/developper-application-web-vuejs-vuecli-deploiement/