Introduction

Chez ESENS, nous alternons de nombreux projets sur des stack techniques modernes et variées, aussi bien pour le compte de nos clients, que dans le cadre de nos développements et travaux en interne.

Dans ce contexte, et pour assurer la formation continue de nos équipes et rester à la pointe de notre savoir-faire technologique, nous avons créé le concept "Pizza Shop", une application permettant à chacun de nos collaborateurs de monter en compétences sur les dernières versions des langages, outils et frameworks de leur choix.

Dans cet article, l'idée est de vous montrer comment nous avons créé une version de Pizza Shop avec Symfony et Vue.js pour pouvoir la déployer ensuite sur un service Cloud Run de Google Cloud Platform...

Bonne lecture !

Application Symfony et Vue.js

Symfony est un framework de création d'applications web basées sur des composants PHP.

Avec Symfony les interfaces graphiques peuvent être faites en utilisant pure HTML et CSS, mais nous avons décidé d’utiliser Vue.js pour profiter des fonctionnalités d’un framework moderne basé sur des composants.

Les différentes commandes affichées dans l'article sont valables pour un environnement Linux Ubuntu, mais en suivant les liens associés il est également possible de voir les commandes pour les autres systèmes d'exploitation.

Création du projet Symfony

Etant donné que Symfony est un framework PHP, il est d’abord nécessaire d’installer Composer pour la gestion de dépendances:

curl -Ss getcomposer.org/installer | php

sudo mv composer.phar /usr/local/bin/composer

Ensuite, on doit installer Symfony CLI:

wget https://get.symfony.com/cli/installer -O - | bash

On peut alors initializer un projet:

symfony new --webapp pizza-shop

On installe le dependances

cd pizza-shop

composer install

Et enfin on lance l’application:

symfony server:start

L’application démo est alors déployée en local :

Ajout de Vue.js

Pour utiliser Vue.js dans un projet Symfony, on se sert du package symfony/webpack-encore-bundle. En utilisant cet outil, et en ajoutant la configuration webpack dans le fichier webpack.config.js, il suffit de créer des composants Vue dans le dossier “assets” et de les insérer au DOM dans un fichier app.js en utilisant la fonction app.mount().

Ensuite, Symfony peut accéder à ces composants dans les fichiers html.twig sous la forme des node du DOM.

Déploiement

Chez ESENS, nos applications sont déployées sur Cloud Run, une offre serverless de type Container as a Service (CAAS) proposée par Google Cloud Platform, et équivalent à Container App d’Azure ou Fargate pour AWS.

Notre objectif principal est ici de créer une image Docker avec notre application pour ensuite la déployer.

Construction de l’image Docker

La construction de l’image Docker de l’application est faite en passant par un Dockerfile multi étape :

Dans la première étape, on fait l’installation des dépendances PHP du projet Symfony en utilisant une image Docker contenant Composer. 

Dans l’étape suivante, on fait le build des composants Vue.js en exécutant le script build qui fait appel à webpack-encore. On utilise une image node:18-alpine pour sa légèreté. 

Ensuite, on utilise une image PHP avec Apache pour héberger notre application, et on copie ensuite le fichier vhosts.conf avec notre configuration Apache. Le contenu du fichier est affiché dans l’image suivante :

Enfin, on copie les librairies PHP depuis l’image compose-install, le code généré dans l'étape webpack builder, et on donne le droit à l'utilisateur www-data sur les différents fichiers de l’application.

Déploiement sur Cloud Run

Pour déployer notre application sur Cloud Run depuis notre poste on a d’abord besoin de :

• Créer un projet Google Cloud.
• Vérifier que la facturation est activée pour votre projet Google Cloud.
• Installer gcloud CLI sur le poste de travail

Ensuite on peut initializer le gcloud CLI : 

gcloud init

Et définir le projet qu’on a créé comme le projet  par défaut de notre service Cloud Run :

gcloud config set project PROJECT_ID

Enfin, on peut déployer notre service avec la commande suivante :

gcloud run deploy pizza-shop  --source . --region=europe-west9 --port=80 --allow-unauthenticated

Avec cette commande, nous spécifions pizza-shop comme le nom du service, europe-west9 (Paris) pour la région où le service va être déployé, le port où notre service va recevoir les appels et on autorise les appels non authentifiés pour que le service soit accessible au public.

Lors de l'exécution de cette commande, on doit accepter d’activer les API nécessaires pour le déploiement et fonctionnement du service. 

A la fin du déploiement, on a une URL publique avec notre application Pizza Shop.

En allant sur l’URL, on peut alors accéder à notre application :

Industrialisation

La méthode décrite est pertinente pour un déploiement simple depuis notre poste.

En revanche, dans un contexte d’industrialisation de l’application, il est nécessaire de créer une chaîne de CI/CD.

Chez ESENS, nous avons implémenté une chaîne pour déployer nos projets sur Cloud Run qui utilise des jobs sur GitHub Actions pour activer les API nécessaires, construire l’image Docker, la pousser sur Google Artifact Registry (GAR), pour ensuite la déployer sur Cloud Run. Le tout, en communiquant avec GCP en utilisant Workload Identity.

Et voilà le travail ! On espère que ça vous a inspiré !

------------------------------

Article rédigé par Andrés, Tech Lead Cloud & IoT et membre de la DT ESENS.

Retrouvez tous nos articles tech sur le Blog ESENS !

Vous êtes à la recherche d’un nouveau challenge technique ? Découvrez la dream team et rejoignez-nous en postulant à nos offres d’emploi!