Dockeriser Nuxt avec Traefik
Nous allons voir comment mettre en place un serveur HTTPS / HTTP 2 avec Docker. Pour la partie serveur, nous allons utiliser Traefik comme serveur de proxy (même principe que Apache, Nginx, IIS). Pour la génération du certificat, nous allons utiliser Mkcert afin d’avoir un certificat valide uniquement en local (ne pas déployer sur un vrai serveur !). Le simple fait de builder son application sur Docker va nous permettre d’avoir un aperçu (assez rapide) du rendu en environnement de production. Il permet également de développer son application sans se soucier de la version du langage utilisé.
Génération du projet
Dans votre terminal, lancez la commande ci-dessous dans un nouveau dossier.
npx create-nuxt-app mon_app_nuxt
Suivez les indications tout en validant avec la touche Entrée. Sélectionnez “Progressive Web App (PWA) support” via la barre espace de votre clavier et validez.
Remarque : ce tutoriel a été rédigé avec la version 2.8.1 de Nuxt (npm list nuxt).
Génération du certificat
A la racine de votre projet, créez un nouveau dossier “proxy” puis un sous dossier “certs” afin de générer les 2 fichiers de certificat avec la commande “mkcert prod.localhost” puis « mkcert dev.localhost ». Mkcert génère 2 fichiers pour chaque certificat qu’il faut renommer
– « prod.localhost.pem » en « prod.localhost.cert » ;
– « prod.localhost-key.pem » en « prod.localhost.key ».
Idem pour les 2 autres fichiers.
En ligne de commande Linux : mv prod.localhost.pem prod.localhost.cert && mv prod.localhost-key.pem prod.localhost.key && mv dev.localhost.pem dev.localhost.cert && mv dev.localhost-key.pem dev.localhost.key.
Configuration du Proxy
Puis dans le dossier « proxy », créez un nouveau fichier nommé « traefik.toml » avec les instructions ci-dessous (veillez bien à respecter l’indentation).
debug = false
logLevel = "DEBUG"
defaultEntryPoints = ["http", "https"]
[web]
address = ":8080"
[entryPoints]
[entryPoints.http]
address = ":80"
[entryPoints.http.redirect]
entryPoint = "https"
[entryPoints.https]
address = ":443"
[entryPoints.https.tls]
[[entryPoints.https.tls.certificates]]
certFile = "/certs/prod.localhost.cert"
keyFile = "/certs/prod.localhost.key"
[[entryPoints.https.tls.certificates]]
certFile = "/certs/dev.localhost.cert"
keyFile = "/certs/dev.localhost.key"
[docker]
endpoint = "unix:///var/run/docker.sock"
domain = "localhost"
watch = true
exposedbydefault = false
- Affichage des logs dans le terminal ;
- Interface web de Traefik sur le port 8080 ;
- Redirection automatique vers HTTPS ;
- Chargement des certificats SSL.
Remarque : la redirection automatique de HTTP vers HTTPS est fortement recommandée pour les PWA (Progresive Web App).
Création de l’image pour Nuxt
Vérifiez que le duo Docker et Docker Compose est bien installé sur votre machine.
docker –version; docker-compose –version
Docker version 1.13.1, build 1185cfd/1.13.1
docker-compose version 1.20.1, build 5d8c71b
Dans le dossier “mon_app_nuxt”, créez un fichier “dockerfile”.
FROM node:12.0.0-alpine
ENV APP_ROOT /src
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}
ENV HOST 0.0.0.0
C’est une image basée sur une image officielle de NodeJS 12, elle même basée sur une image Alpine Linux afin d’optimiser la taille de l’image finale.
Création des services
Puis revenez à la racine du projet et créez un nouveau fichier “docker-compose_dev.yml” avec 2 services.
version: "3"
services:
nuxt_prod:
build: ./mon_app_nuxt
container_name: nuxt_prod
restart: always
command: ash -c "npm run build && npm run start"
labels:
- 'traefik.enable=true'
- 'traefik.port=3000'
- 'traefik.frontend.rule=Host:prod.localhost'
proxy:
restart: always
image: traefik:v1.7.12
container_name: proxy
ports:
- '80:80'
- '443:443'
- '8080:8080'
labels:
- 'traefik.enable=false'
volumes:
- /var/run/docker.sock:/var/run/docker.sock
- ./proxy/traefik.toml:/etc/traefik
- ./proxy/certs:/certs
On met en place 2 services. Le premier est Nuxt qui lance la commande de génération du projet puis lance le serveur (sur le port 3000 non exposé).
Quant au second service, il s’agit du serveur proxy qui a besoin des ports 80 (HTTP), 443 (HTTPS) et 8080 (HTTP) pour l’interface Web de Traefik.
Lancez la commande docker-compose -f docker-compose_dev.yml build pour générer l’image de Nuxt (à partir du Dockerfile) et le téléchargement de l’image officielle de Traefik. Puis lancez la commande
docker-compose -f docker-compose_dev.yml up pour créer les 2 containers déclarés.
Dès que l’application est buildée et le proxy lancé, rendez-vous sur la page https://localhost avec Chrome en navigation privée afin de faire un audit avec Lighthouse. Comme vous pouvez le constater sur la capture d’écran ci-dessous, les tests sont tous positifs avec un score maximal de 100 pour chacun.
La partie Progressive Web App est à 100% car l’application a été compilé correctement (ce qui n’est pas possible lorsque l’application est en mode développement).
Remarque : si vous faites des modifications, il faudra reconstruire l’image de Nuxt avec la commande docker-compose -f docker-compose_dev.yml build nuxt_prod puis relancer le container avec docker-compose -f docker-compose_dev.yml up nuxt_prod.
Pour développer votre application Nuxt en mode développement (hot reloading inclus), créez un nouveau service dans le fichier “docker-compose.yml”.
nuxt_dev:
build: ./mon_app_nuxt
container_name: nuxt_dev
restart: always
volumes:
- ./mon_app_nuxt:/src
command: npm run dev
labels:
- 'traefik.enable=true'
- 'traefik.port=3000'
- 'traefik.frontend.rule=Host:dev.localhost'
Cette fois, on travaille directement dans le dossier de l’application en mettant en place un volume. On change également la commande d’exécution afin de mettre celle qui lance le serveur de développement.
Lancez la commande docker-compose -f docker-compose_dev.yml up nuxt_dev dans un nouveau terminal et rendez-vous sur la page https://dev.localhost
