Conteneuriser votre application Angular avec Docker et NGINX
Créer un fichier .dockerignore
.git
node_modules
dist
Etape souvent oubliée, mais indispensable ! Si vous n’utilisez pas .dockerignore, vous allez envoyer tous les fichiers dans le contexte de Docker, ralentissant considérablement le processus de build.
Pour vérifier votre fichier .dockerignore et ce qui se retrouvera dans le contexte, la commande Linux `ncdu -X .dockerignore` est bien pratique.
Le Dockerfile
FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY ./ .
RUN npm run buildFROM nginx:latest
RUN mkdir /app
COPY --from=build-stage /app/dist/my-app/ /app
COPY nginx.conf /etc/nginx/nginx.conf
USER nginx
Ce Dockerfile est en deux stages : le premier construit l’application, le second construit le conteneur à base de NginX qui fera serveur pour l’application. Notez l’utilisation de layers (installation de dépendances d’abord, car elles changent peu).
Attention, vous voulez sans doute spécifier une version précise pour les deux images de bases (FROM node et FROM nginx). De même, il peut être judicieux d’utiliser une image nginx à base d’alpine pour optimiser la taille de l’image finale.
Configurer Nginx
Nous allons ajouter deux choses indispensables : la compression des fichiers de l’application et une gestion efficace du cache.
Pour plus de détails, je vous renvoie à mon article Comment optimiser drastiquement vos apps Vue.js en quelques minutes dont pas mal d’astuces s’appliquent aussi à Angular.
Nous suivons aussi la documentation de l’image Docker officielle de Nginx https://hub.docker.com/_/nginx à la section Running nginx as a non-root user. Cela permettra d’utiliser l’utilisateur nginx et renforcer ainsi la sécurité de l’application.
Et voilà, notre application Angular est conteneurisée efficacement !
Plus qu’à construire l’image et à la tester.
docker build . -t my-app
docker run -d -p 8080:80 my-appL’application est ainsi accessible à cette adresse http://localhost:8080
Si vous avez apprécié cet article ou qu’il vous a été utile, n’hésitez pas à le 👏 et à le partager ! 🙂
