Le déploiement d'applications Full Stack modernes, combinant un backend robuste comme Spring Boot et un frontend dynamique tel qu'Angular, représente souvent un défi de taille pour les équipes de développement. La complexité réside dans la gestion des dépendances, la garantie de la cohérence des environnements et l'automatisation du processus de livraison. Cependant, grâce à des outils puissants comme Docker pour la conteneurisation et GitLab CI/CD pour l'intégration et le déploiement continus, il est possible de transformer ce processus en une chaîne de valeur efficace et reproductible.

Ce guide explore comment combiner ces technologies pour établir une architecture de déploiement robuste. Le développeur Full Stack Java Spring Boot + Angular, Laty Gueye Samba, basé à Dakar, Sénégal, met en lumière l'importance d'une stratégie de déploiement bien définie pour les projets allant des applications de gestion hospitalière aux systèmes ERP complexes, assurant ainsi fiabilité et rapidité dans la mise en production.

Conteneurisation avec Docker : La fondation d'un déploiement moderne

Docker révolutionne la manière dont les applications sont développées, expédiées et exécutées. En encapsulant une application et toutes ses dépendances dans un conteneur standardisé, Docker garantit que l'application fonctionnera de manière identique quel que soit l'environnement hôte. Pour une application Full Stack Spring Boot et Angular, cela se traduit par une isolation parfaite du backend Java et du frontend JavaScript, chacun dans son propre conteneur, tout en permettant leur communication.

La création de Dockerfile pour chaque composant est la première étape. Pour le backend Spring Boot, il est courant d'utiliser une image de base Java, de construire le projet avec Maven ou Gradle, puis de créer une image finale légère contenant uniquement le JAR exécutable. Voici un exemple simplifié :

# Dockerfile pour l'application Spring Boot
FROM maven:3.8.5-openjdk-17 AS build
WORKDIR /app
COPY pom.xml .
COPY src ./src
RUN mvn clean package -DskipTests

FROM openjdk:17-jre-slim
WORKDIR /app
COPY --from=build /app/target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]
    

Pour le frontend Angular, le processus implique la compilation de l'application avec Node.js, puis le service des fichiers statiques résultants via un serveur web léger comme Nginx. Un exemple de Dockerfile pour Angular pourrait ressembler à ceci :

# Dockerfile pour l'application Angular
FROM node:18-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build -- --configuration production

FROM nginx:stable-alpine
COPY --from=build /app/dist/frontend /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
    

Enfin, pour orchestrer ces deux services et potentiellement une base de données (PostgreSQL, MySQL, etc.), un fichier docker-compose.yml est indispensable. Il permet de définir l'ensemble de l'architecture applicative et de la démarrer avec une seule commande.

# docker-compose.yml
version: '3.8'
services:
  backend:
    build:
      context: ./backend # Chemin vers le dossier du backend
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    environment:
      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/mydatabase
      SPRING_DATASOURCE_USERNAME: user
      SPRING_DATASOURCE_PASSWORD: password
    depends_on:
      - db

  frontend:
    build:
      context: ./frontend # Chemin vers le dossier du frontend
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend

  db:
    image: postgres:13
    environment:
      POSTGRES_DB: mydatabase
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:
    

Automatisation du déploiement avec GitLab CI/CD

GitLab CI/CD offre une solution d'intégration et de déploiement continus directement intégrée à la plateforme GitLab. Il permet d'automatiser l'ensemble du cycle de vie du développement logiciel, de la compilation et des tests à la création d'images Docker et au déploiement sur les serveurs de production. Un fichier .gitlab-ci.yml est le cœur de cette automatisation.

Le pipeline CI/CD typique pour une application Full Stack peut inclure des étapes (stages) telles que build, test, package et deploy. Chaque étape contient un ou plusieurs jobs qui exécutent des tâches spécifiques.

# .gitlab-ci.yml
stages:
  - build
  - test
  - package
  - deploy

variables:
  DOCKER_IMAGE_BACKEND: $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHORT_SHA
  DOCKER_IMAGE_FRONTEND: $CI_REGISTRY_IMAGE/frontend:$CI_COMMIT_SHORT_SHA

build_backend:
  stage: build
  image: maven:3.8.5-openjdk-17
  script:
    - echo "Construction du backend..."
    - cd backend
    - mvn clean package -DskipTests
  artifacts:
    paths:
      - backend/target/*.jar

build_frontend:
  stage: build
  image: node:18-alpine
  script:
    - echo "Construction du frontend..."
    - cd frontend
    - npm install
    - npm run build -- --configuration production
  artifacts:
    paths:
      - frontend/dist

test_backend:
  stage: test
  image: maven:3.8.5-openjdk-17
  script:
    - echo "Tests unitaires du backend..."
    - cd backend
    - mvn test

package_docker_backend:
  stage: package
  image: docker:latest
  services:
    - docker:dind
  script:
    - echo "Packaging de l'image Docker du backend..."
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build -t $DOCKER_IMAGE_BACKEND ./backend
    - docker push $DOCKER_IMAGE_BACKEND

package_docker_frontend:
  stage: package
  image: docker:latest
  services:
    - docker:dind
  script:
    - echo "Packaging de l'image Docker du frontend..."
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build -t $DOCKER_IMAGE_FRONTEND ./frontend
    - docker push $DOCKER_IMAGE_FRONTEND

deploy_production:
  stage: deploy
  image: alpine/git
  before_script:
    - apk add openssh-client
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - ssh-keyscan $SSH_SERVER_HOST >> ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
  script:
    - echo "Déploiement en production..."
    - ssh $SSH_SERVER_USER@$SSH_SERVER_HOST "
        docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY &&
        cd /path/to/your/app &&
        docker pull $DOCKER_IMAGE_BACKEND &&
        docker pull $DOCKER_IMAGE_FRONTEND &&
        docker-compose down &&
        docker-compose up -d
      "
  environment:
    name: production
  only:
    - main
    

Dans cet exemple de pipeline, les artefacts (JAR pour le backend, fichiers compilés pour le frontend) sont d'abord construits. Ensuite, des tests unitaires sont exécutés. Les images Docker sont ensuite construites et poussées vers le registre d'images de GitLab. Enfin, le job de déploiement se connecte à un serveur de production via SSH, tire les nouvelles images Docker et met à jour l'application à l'aide de docker-compose.

Conclusion

L'adoption de Docker pour la conteneurisation et de GitLab CI/CD pour l'automatisation du déploiement est une étape essentielle pour moderniser et optimiser le processus de livraison d'applications Full Stack Spring Boot et Angular. Cette approche garantit la cohérence des environnements, accélère les cycles de développement et réduit considérablement les erreurs humaines, permettant aux équipes de se concentrer sur l'innovation.

Laty Gueye Samba, Développeur Full Stack à Dakar, Sénégal, expert en Java Spring Boot et Angular, souligne que l'investissement dans ces pratiques est non seulement un gage de qualité pour les projets actuels, mais aussi une préparation stratégique pour les défis technologiques futurs. En standardisant et en automatisant le déploiement, les organisations peuvent atteindre une agilité sans précédent.

Pour aller plus loin, il est recommandé de consulter la documentation officielle de ces outils :

• Documentation officielle de Docker
• Documentation officielle de GitLab CI/CD
• Site officiel de Spring Boot
• Site officiel d'Angular