Tutoriel pour développer une application web avec Vue.js et Vue CLI : déploiement (partie 3)

La construction des binaires se fait par l'intermédiaire de Maven.

• Exécuter la ligne de commande suivante pour compiler la couche serveur à partir de Maven.

$ mvn clean package
...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for polldle-parent 0.4-SNAPSHOT:
[INFO]
[INFO] polldle-parent ..................................... SUCCESS [  0.127 s]
[INFO] poddle-api ......................................... SUCCESS [  1.040 s]
[INFO] polldle-server ..................................... SUCCESS [  5.746 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  7.028 s
[INFO] Finished at: 2020-06-30T21:28:55+02:00
[INFO] ------------------------------------------------------------------------

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 :

polldle-server/target
├── classes
│   ├── fr
│   ├── META-INF
│   ...
├── dependency
│   ├── HikariCP-2.7.9.jar
│   ├── activation-1.1.1.jar
│   ├── alpn-api-1.1.3.v20160715.jar
│   ├── aopalliance-repackaged-2.5.0.jar
│   ├── asm-7.0.jar
│   ...
├── generated-sources
├── generated-test-sources
├── maven-archiver
├── maven-status
├── polldle-server.jar
├── surefire-reports
└── 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.

export KUMULUZEE_SERVER_HTTP_PORT=9991
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.

• Démarrer l'exécution du composant serveur (Java) via la ligne de commande ci-dessous.

$ java -cp "polldle-server/target/dependency/*:polldle-server/target/classes" com.kumuluz.ee.EeApplication
...
2020-06-30 21:29:53.508 INFO -- org.eclipse.jetty.server.AbstractConnector -- Started ServerConnector@4c402120{HTTP/1.1, (http/1.1)}{0.0.0.0:9991}
2020-06-30 21:29:53.508 INFO -- org.eclipse.jetty.server.Server -- Started @1932ms
2020-06-30 21:29:53.508 INFO -- com.kumuluz.ee.EeApplication -- KumuluzEE started successfully

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.

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.

# Build env
FROM maven:3-jdk-11 AS build-java-stage
LABEL maintainer="Mickael BARON"
WORKDIR /polldle
COPY polldle-api polldle-api
COPY polldle-server polldle-server
COPY pom.xml .
RUN mvn -f pom.xml clean package
# Run env
FROM adoptopenjdk/openjdk11:alpine-jre
COPY --from=build-java-stage /polldle/polldle-server/target/classes /polldle/classes
COPY --from=build-java-stage /polldle/polldle-server/target/dependency/*.jar /polldle/dependency/
EXPOSE 9991
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…).

Détaillons le contenu de ce fichier Dockerfile qui propose deux étapes.

É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 ;
• COPY --from=build-java-stage .../dependency/*.jar /polldle/dependency/ : copier le contenu du répertoire des dépendances obtenu lors de la précédente étape vers le conteneur de la seconde étape ;
• EXPOSE 9991 : préciser que le port 9991 pourra être exposé. Cette instruction ne publie pas automatiquement ce port lors de la construction du conteneur. Il s'agit d'une simple documentation à utiliser quand vous souhaitez comprendre quels ports sont à exposer.
• ENTRYPOINT ["java", "-cp", "...", "com.kumuluz.ee.EeApplication"] : préciser la commande par défaut à utiliser lors de l'exécution du conteneur.

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

$ docker build --tag mickaelbaron/polldle-backend .
Sending build context to Docker daemon  16.53MB
Step 1/12 : FROM maven:3-jdk-11 AS build-java-stage
 ---> 918519009705
Step 2/12 : LABEL maintainer="Mickael BARON"
 ---> Using cache
 ---> 3fafd8d7ffaf
Step 3/12 : WORKDIR /polldle
 ---> Using cache
 ---> 8c77daa432e6
Step 4/12 : COPY polldle-api polldle-api
 ---> Using cache
 ---> 9dfda02b9f5c
Step 5/12 : COPY polldle-server polldle-server
 ---> Using cache
 ---> fb55878a2bb5
Step 6/12 : COPY pom.xml .
 ---> Using cache
 ---> a97354e88cac
Step 7/12 : RUN mvn -f pom.xml clean package
 ---> Using cache
 ---> 7ea2e436ca8e
Step 8/12 : FROM adoptopenjdk/openjdk11:alpine-jre
 ---> e6a63aa27f97
Step 9/12 : COPY --from=build-java-stage /polldle/polldle-server/target/classes /polldle/classes
 ---> Using cache
 ---> 6fdf5002cca8
Step 10/12 : COPY --from=build-java-stage /polldle/polldle-server/target/dependency/*.jar /polldle/dependency/
 ---> Using cache
 ---> 655ab9c47799
Step 11/12 : EXPOSE 9991
 ---> Using cache
 ---> 677fda6a6431
Step 12/12 : ENTRYPOINT ["java", "-cp", "/polldle/classes:/polldle/dependency/*", "com.kumuluz.ee.EeApplication"]
 ---> Using cache
 ---> c976b72dafd3
Successfully built c976b72dafd3
Successfully tagged mickaelbaron/polldle-backend:latest

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.

$ docker images
REPOSITORY                     TAG                 IMAGE ID            CREATED             SIZE
mickaelbaron/polldle-backend   latest              c976b72dafd3        2 seconds ago       165MB

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.

$ docker run -d --name backend -e KUMULUZEE_SERVER_HTTP_PORT=9991 -p 9991:9991 mickaelbaron/polldle-backend
b3c5fd42962cee0dd0cd45f2c6ed35ca1926ab0d9a9efbedb3cea0241062bc9e

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.

$ docker ps
CONTAINER ID        IMAGE                          COMMAND                  STATUS              PORTS                    NAMES
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).

$ npm run serve
...

Nous vous invitons à vous positionner dans le répertoire polldle-vue-15 pour profiter des codes qui vont illustrer cette section.

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.

.env             : variables d'environnement disponibles quel que soit le mode ;
.env.development : variables d'environnement disponibles pour le développement (npm run server) ;
.env.production  : variables d'environnement disponibles pour la production (npm run build).

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.

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.

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.

      // Use environment variable to define REST web service URL
      var request = new Request(process.env.VUE_APP_SERVER_URL + "/polldles", {
        method: "POST",
        body: JSON.stringify(polldleObject),
        headers: {
          'Content-Type': 'application/json'
        }
      })

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

created() {
    // Use environment variable to define REST web service URL
    axios.get(process.env.VUE_APP_SERVER_URL + "/polldles", {
      params : {
        pathURL: this.$route.params.pathurl
      }
    }).then(response => {
    ...
  },
  methods: {
    vote() {
      ...
      axios({
        method: 'post',
        // Use environment variable to define REST web service URL
        baseURL: process.env.VUE_APP_SERVER_URL + "/polldles/" + this.$route.params.pathurl + "/votes",
        data: JSON.stringify(polldleVote),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
      ...
    }
  }

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

  created() {
    // Use environment variable to define REST web service URL
    var source = new EventSource(
      process.env.VUE_APP_SERVER_URL +
      "/polldles/" +
      this.$route.params.pathurl +
      "/votes/sse"
    );
    ...
  }

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.

npm run server
> polldle-vue-15@0.1.0 serve .../polldle/polldle-vue-15
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 2410ms
  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable
  Note that the development build is not optimized.
  To create a production build, run npm run build.

Nous allons maintenant construire les binaires pour la version qui sera déployée en production.

• Exécuter npm run build où build est un script défini dans le fichier package.json.

npm run build
> polldle-vue-15@0.1.0 build /Users/baronm/workspacejava/polldle/polldle-vue-15
> vue-cli-service build

â ¹  Building for production...

 WARNING  Compiled with 2 warnings     10:23:29

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (278 KiB)
      css/chunk-vendors.0cbd351a.css
      js/chunk-vendors.86498fa6.js
      css/app.f351e9c1.css
      js/app.f1a0f2ea.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                   Size              Gzipped

  dist/js/chunk-vendors.86498fa6.js      82.85 KiB         29.96 KiB
  dist/js/app.f1a0f2ea.js                2.62 KiB          1.26 KiB
  dist/css/chunk-vendors.0cbd351a.css    191.84 KiB        26.80 KiB
  dist/css/app.f351e9c1.css              0.46 KiB          0.26 KiB

  Images and other types of assets omitted.
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

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

.
├── css
│   ├── app.f351e9c1.css
│   └── chunk-vendors.0cbd351a.css
├── index.html
└── js
    ├── app.f1a0f2ea.js
    ├── app.f1a0f2ea.js.map
    ├── chunk-vendors.86498fa6.js
    └── 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.

...var o=new Request("/server/polldles",{method:"POST",body:JSON.stringify(e),headers:{"Content-Type":"application/json"}})...

Nous vous invitons à vous positionner dans le répertoire polldle-vue-16 pour profiter des codes qui vont illustrer cette section.

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.

• Créer un fichier nginx.conf à la racine du dossier polldle-vue-16 et ajouter le code ci-dessous.

server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /usr/share/nginx/html;

  index index.html;

  server_name localhost;

  location / {
    try_files $uri $uri/ @rewrites;
  }
  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }
  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    # Some basic cache-control for static files to be sent to the browser
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
  }
}

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.

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.

npm install
npm run build

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

$ docker run -d --name backend -e KUMULUZEE_SERVER_HTTP_PORT=9991 -p 9991:9991 mickaelbaron/polldle-backend
b3c5fd42962cee0dd0cd45f2c6ed35ca1926ab0d9a9efbedb3cea0241062bc9e

• Créer un conteneur Docker basé sur une image NGINX.

$ docker run -d --rm -p 80:80 --name frontend -v $(pwd)/dist:/usr/share/nginx/html -v $(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf nginx:stable-alpine nginx -g "daemon off;"
60f1489e822c794477b322dbfa4df79794769480206c11fae42f3c5f113c992e

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

• Ouvrir un navigateur et tester l'URL suivante : http://localhost:80.
• Une fois testée, arrêter et détruire le conteneur nommé frontend.

docker rm -f frontend

Nous vous invitons à vous positionner dans le répertoire polldle-vue-17 pour profiter des codes qui vont illustrer cette section.

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.

# Build env
FROM node:lts-alpine as build-npm-stage
LABEL maintainer="Mickael BARON"

WORKDIR /polldle-vue
COPY package*.json ./
RUN npm install
COPY public ./public
COPY src ./src
COPY .env.production ./
RUN npm run build
# Run env
FROM nginx:stable-alpine
COPY --from=build-npm-stage /polldle-vue/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
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.

Détaillons le contenu de ce fichier Dockerfile qui propose deux étapes.

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

docker build --tag mickaelbaron/polldle-vue .
Sending build context to Docker daemon  57.34kB
Step 1/14 : FROM node:lts-alpine as build-npm-stage
 ---> 057fa4cc38c2
Step 2/14 : LABEL maintainer="Mickael BARON"
 ---> Using cache
 ---> 91543748447a
Step 3/14 : WORKDIR /polldle-vue
 ---> Using cache
 ---> 5ea22eb50079
Step 4/14 : COPY package*.json ./
 ---> Using cache
 ---> fa6f61549b13
Step 5/14 : RUN npm install
 ---> Using cache
 ---> 32e9f4fca085
Step 6/14 : COPY public ./public
 ---> Using cache
 ---> e139a5f93f2b
Step 7/14 : COPY src ./src
 ---> Using cache
 ---> 4654c326d25d
Step 8/14 : COPY .env.production ./
 ---> Using cache
 ---> 8351a516d016
Step 9/14 : RUN npm run build
 ---> Using cache
 ---> 2b589148ec8a
Step 10/14 : FROM nginx:stable-alpine
 ---> ab94f84cc474
Step 11/14 : COPY --from=build-npm-stage /polldle-vue/dist /usr/share/nginx/html
 ---> Using cache
 ---> 454d3333fb1a
Step 12/14 : COPY nginx.conf /etc/nginx/conf.d/default.conf
 ---> Using cache
 ---> 89ff6d70d7d2
Step 13/14 : EXPOSE 80
 ---> Using cache
 ---> d0d44708c4c8
Step 14/14 : ENTRYPOINT ["nginx", "-g", "daemon off;"]
 ---> Using cache
 ---> f34078d6c901
Successfully built f34078d6c901
Successfully tagged mickaelbaron/polldle-vue:latest

• S'assurer que l'image intitulée mickaelbaron/polldle-vue a été construite.

$ docker images
REPOSITORY                     TAG                 IMAGE ID            CREATED             SIZE
mickaelbaron/polldle-backend   latest              c976b72dafd3        50 seconds ago      165MB
mickaelbaron/polldle-vue       latest              f34078d6c901        34 seconds ago      23.2MB

Nous vous invitons à vous positionner dans le répertoire polldle-vue-18 pour profiter des codes qui vont illustrer cette section.

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.

$ docker run -d --name frontend -p 80:80 mickaelbaron/polldle-vue
0e65e7ad22e68856f81c2aacbbbc9686dc1a209fae11d848488ed050b7acb237

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.

$ docker ps
CONTAINER ID        IMAGE                          COMMAND                  STATUS              PORTS                    NAMES
0e65e7ad22e6        mickaelbaron/polldle-vue       "nginx -g 'daemon of…"   6 minutes ago       0.0.0.0:80->80/tcp       frontend
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.

La configuration du composant polldle-rp-without_subpath/reverse-proxy est disponible dans le fichier build.conf.

server {
    listen 80;
    location /server/ {
        proxy_pass http://backend:9991/;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
    location / {
        rewrite ^(/.*)$ $1 break;
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

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.

FROM nginx:stable-alpine
LABEL maintainer="Mickael BARON"
COPY build.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Détaillons le contenu de ce fichier Dockerfile :

• 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é ;
• 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 (toujours depuis le répertoire polldle-rp-without_subpath).

docker build --tag mickaelbaron/polldle-rp .
Step 1/5 : FROM nginx:stable-alpine
 ---> ef04b00b089d
Step 2/5 : LABEL maintainer="Mickael BARON"
 ---> Using cache
 ---> 550f0316e86d
Step 3/5 : COPY build.conf /etc/nginx/conf.d/default.conf
 ---> Using cache
 ---> 6047c791e509
Step 4/5 : EXPOSE 80
 ---> Using cache
 ---> 6e1e911835f9
Step 5/5 : ENTRYPOINT ["nginx", "-g", "daemon off;"]
 ---> Using cache
 ---> f9f2abc08cea
Successfully built f9f2abc08cea
Successfully tagged mickaelbaron/polldle-rp:latest

• Exécuter la ligne de commande suivante pour s'assurer que l'image Docker intitulée mickaelbaron/polldle-vue a été construite.

$ docker images
REPOSITORY                     TAG                 IMAGE ID            CREATED             SIZE
mickaelbaron/polldle-rp        latest              0c244aebbac3        18 seconds ago      21.3MB
mickaelbaron/polldle-backend   latest              c976b72dafd3        20 hours ago        165MB
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.

$ docker rm -f frontend
$ 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.

$ docker run -d --name frontend mickaelbaron/polldle-vue
a7891762c6b6960ff781dd30063f1111991711f3675e60ad140eef022e1c84e7
$ docker run -d --name backend -e KUMULUZEE_SERVER_HTTP_PORT=9991 mickaelbaron/polldle-backend
52702cfe48e5f84825fb241b74d18557140123c3a77e9178ea87d51e6217ac3f

• Créer ensuite un conteneur basé sur l'image Docker mickaelbaron/polldle-rt.

$ docker run -d --name rp -p 80:80 mickaelbaron/polldle-rp
78bd18008796758326eb9f48ae57279cef17d96c319478b3a2fc1c541fd3cee4

• Afficher la liste des conteneurs avec la commande suivante :

$ docker ps -a
CONTAINER ID        IMAGE                          COMMAND                  STATUS                      PORTS       NAMES
78bd18008796        mickaelbaron/polldle-rp        "nginx -g 'daemon of…"   Exited (1) 19 minutes ago               rp
781f589d49eb        mickaelbaron/polldle-vue       "nginx -g 'daemon of…"   Up 22 hours                 80/tcp      frontend
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.

• Examiner les logs du conteneur rp.

$ docker logs rp
2019/06/26 15:35:50 [emerg] 1#1: host not found in upstream "backend" in /etc/nginx/conf.d/default.conf:5
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.

• Créer un sous-réseau Docker appelé polldlenetwork.

$ docker network create polldlenetwork
3605b7022d16414a2855fde4101052e7f36e43ba94a41dbc83659b9a9d351386

• Ajouter les conteneurs frontend et backend à ce nouveau sous-réseau Docker.

docker network connect polldlenetwork backend
docker network connect polldlenetwork frontend

• Supprimer le conteneur rp et le recréer dans le sous-réseau Docker polldlenetwork.

docker run -d --name rp --network polldlenetwork -p 80:80 mickaelbaron/polldle-rp
66bc312c2579cba754dc1649bf5f976d061e680fd5a4b1e34772c70425032565

• Ouvrir un navigateur et tester l'URL suivante : http://localhost.

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.

• Créer un fichier .env.subpath à la racine du dossier polldle-vue-19/ et copier le contenu ci-dessous.

NODE_ENV = production
VUE_APP_SUBPATH = /polldle/
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 à /.

• Ajouter dans les fichiers .env.development et .env.production la variable d'environnement VUE_APP_SUBPATH fixée à / (commentaire # Add new environment variable VUE_APP_SUBPATH).

# Fichier .env.development
VUE_APP_SERVER_URL = http://localhost:9991
# Add new environment variable VUE_APP_SUBPATH
VUE_APP_SUBPATH = /

# Fichier .env.production
VUE_APP_SERVER_URL = /server
# Add new environment variable VUE_APP_SUBPATH
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.

...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "subpath": "vue-cli-service build --mode subpath",
    "lint": "vue-cli-service lint"
  },
...

• S'assurer que tout fonctionne correctement.

npm install
npm run subpath

> polldle-vue-19@0.1.0 subpath /Users/baronm/workspacejava/polldle/polldle-vue-19
> vue-cli-service build --mode subpath


â ¼  Building for subpath...
...
  File                                   Size              Gzipped

  dist/js/chunk-vendors.e3058ce2.js      346.38 KiB        120.10 KiB
  dist/js/app.d169298e.js                12.09 KiB         3.88 KiB
  dist/css/chunk-vendors.0cbd351a.css    191.84 KiB        26.80 KiB
  dist/css/app.42f644cf.css              0.82 KiB          0.40 KiB

  Images and other types of assets omitted.
 DONE  Build complete. The dist directory is ready to be deployed.
 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.

Éditer le fichier polldle-vue-19/src/router/index.js afin de configurer la nouvelle valeur du routage en remplaçant le commentaire // Change base value. par le code présenté ci-dessous.

...
export default new Router({
  mode: 'history',
  // Change base value.
  base: process.env.VUE_APP_SUBPATH,
  routes: [
    {
      path: '/',
      name: 'CreatePolldle',
      component: CreatePolldle
    },
    {
      path: '/:pathurl',
      name: 'VotePolldle',
      component: VotePolldle
    },
    {
      path: '/:pathurl/result',
      name: 'ResultPolldle',
      component: ResultPolldle
    }
  ]
})

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.

• Créer un fichier vue.config.js et ajouter le contenu ci-dessous.

module.exports = {
  publicPath: process.env.VUE_APP_SUBPATH,
  productionSourceMap: false
}

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

Nous vous invitons à vous positionner dans le répertoire polldle-vue-20 pour profiter des codes qui vont illustrer cette section.

Pour rappel, voici les deux commandes pour construire les binaires du composant client (Vue.js) :

• sans sous-chemin : $ npm run build ;
• avec sous-chemin : $ npm run subpath.

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.

FROM node:lts-alpine as build-npm-stage
LABEL maintainer="Mickael BARON"
# Use ARG instruction to create script_name variable
ARG script_name=build

WORKDIR /polldle-vue
COPY package*.json ./
RUN npm install
COPY public ./public
COPY src ./src
COPY .env.production ./
# Inject script_name variable into the command
RUN npm run $script_name
# Run env
FROM nginx:stable-alpine
COPY --from=build-npm-stage /polldle-vue/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

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.

• Depuis l'invite de commande, se positionner dans le répertoire polldle/polldle-vue-20 et exécuter la ligne de commande suivante pour démarrer la construction de l'image Docker du composant client (Vue.js).

$ docker build --tag mickaelbaron/polldle-vue . --build-arg script_name=build
...
$ docker build --tag mickaelbaron/polldle-vue . --build-arg script_name=subpath

Pour passer une valeur à la variable script_name, l'option --build-arg a été utilisée.

• Éditer le fichier polldle-rp/subpath.conf puis examiner le contenu.

server {
    listen 80;
    location /polldle/server/ {
        proxy_pass http://backend:9991/;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
    location /polldle/ {
        rewrite ^/polldle(/.*)$ $1 break;
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Le sous-chemin /polldle/ est spécifié dans ce fichier.

• Éditer le fichier polldle-rp/Dockerfile puis examiner le contenu.

FROM nginx:stable-alpine
LABEL maintainer="Mickael BARON"
ARG script_name=build
COPY $script_name.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

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

$ docker build --tag mickaelbaron/polldle-rp . --build-arg script_name=build
...
$ docker build --tag mickaelbaron/polldle-rp . --build-arg script_name=subpath
...