Adobe Commerce Cloud

Adobe Commerce Cloud : comment déployer plusieurs applications PWA Studio sur la même plateforme ?

Par Benjamin V. le 15 avril 2022

 Lecture 3 minutes

Want to read this post in english? click here

Contexte projet

Tout d'abord, nous appellerons ce projet "TMG" (pour Tintin & Milou Group) . Celui-ci regroupe 2 marques (Tintin et Milou). Chacune d'elle ayant ses propres produits, prix, modes de paiements, périodes de réductions, etc.
Bien sûr, chaque marque a sa propre identité visuelle. Pour couronner le tout, les 2 veulent bénéficier de PWA Studio en front office, le tout hébergé sur Adobe Commerce Cloud.

 

Architecture

Dans un contexte "classique", il aurait suffit de créer 2 websites, et 2 thèmes basés sur "blank" (ou "Luma", mais c'est un autre débat).
Sauf qu'ici, les fronts seront des applis PWA. Nous allons donc garder les 2 websites, les 2 thèmes "classiques" (car certaines pages seront toujours servies en version non PWA), mais allons ajouter 2 applis PWA Studio.

Nous sommes donc partis, pour commencer, sur ce découpage en termes de "repository GIT" :

Un premier (nommé backend-tmg) contenant la partie backend d'Adobe Commerce Cloud :

Un deuxième (pwa-tmg), destiné à accueillir les applis PWA Studio basé sur cette architecture :

Déploiement

Le site est prêt, il "marche en local" (oui, on sait =D), reste maintenant à le déployer sur le Cloud!

Voici les grandes étapes qu'il nous faut suivre pour le déploiement :

Comme vous pouvez le voir, une partie sera faite via notre outil d'intégration continue, Jenkins, l'autre directement via la mécanique de déploiement d'Adobe Commerce Cloud (via le fichier .magento.app.yaml)

 

"Un peu" de code

Voici ce que cela donne pour la partie "Backend application preparation"

 

Sur la partie Jenkins :

Cette partie, bien qu'ici spécifique à Jenkins, peut facilement être transposée à n'importe quel outil d'intégration continue.

Elle pourrait même être inclue directement dans les hooks du fichier .magento.app.yaml, si Adobe Commerce Cloud autorisait d'avoir des variables spécifiques par environnement au moment du build.

 

Et enfin, la partie Adobe Commerce Cloud, dans le fichier .magento.app.yaml :

 

ATTENTION : le build des applications PWA Studio faisant des appels aux backends, il faudra livrer une première fois sans la partie PWA, pour que les websites/stores/store views et autres configurations soient créés dans Adobe Commerce.

 

Finalisation

Pour finir, dans notre cas, la partie "compte client" devait toujours être servie par le thème "Luma", nous avons donc ajouté cette configuration :

 

Nous avons donc maintenant 2 websites sur l'arrière guichet dans Adobe Commerce Cloud, chacun ayant sa propre application PWA Studio en front, facile non ?

LinkedIn Email
GIF