
Portfolio
Contexte
Ce projet est une réalisation initié par un devoir scolaire que je me suis ensuite réapproprié pour m'en servir comme support pour ma recherche d'emploi et expérimenté certaines notions dont je n'avais pas, ou peu, l'opportunité d'appliquer dans un contexte professionnel :
- Référencement
- Cookie analytique
- Configuration et sécurisation d'un VPS
- Internationalisation du contenu (à venir)
Solution technique
Dans un besoin d'avoir un site facilement référençable, performant et léger, je me suis orienté vers le framework Astro qui permet de servir du contenu statique au client grâce à la génération du contenu côté serveur (SSR). Il m'apporte aussi des plugins prêt à l'emploi pour la gestion du référencement et du i18n et me permet d'éviter la duplication du code grâce aux Astro Island (composants réutilisables, similaires à ce que propose VueJs ou React). Pour le design de mes interfaces, je me repose sur Tailwind pour profiter de la puissance et flexibilité de ces classes css pour composer aux petits oignons ma charte graphique.
Pour la gestion du contenu en lui même, quoi de mieux qu'un headless CSM moderne, entièrement personnalisable et performant qui se nomme Strapi ! Cette solution me permet de configurer l'architecture de mon contenu et de le modifier quand bon me semble tout en gérant la publication des versions de contenus sans interruption de service et en temps réel ? Il m'a ensuite suffit de coupler Strapi avec une base de données PostgreSQL pour l'hébergement des données et mon environnement est prêt pour le développement !
Bien que je soit en capacité de développer ce site depuis zéro, je me suis donné le défi d'utiliser des agents IA, chose que j'ai toujours évité jusque là ! Alors pourquoi ?
- Le vibe coding : je l'ai constaté, beaucoup de camarades d'étude se sont reposé sur le vibe coding et ont réussi leur Master. Ma crainte ? Ne plus être un profil suffisamment concurrentiel face à eux alors qu'ils n'ont pas la maîtrise de ce que l'IA leur génère.
- La productivité : c'est un fait, la génération de code par l'IA est un vrai atout de productivité… Si l'on comprend ce qui est généré et qu'on a la capacité d'anticiper des anomalies et d'adapter le code à notre besoin pour rester maître de notre application, ce qui nous permet d'être capable de la maintenir correctement dans le temps.
- Me faire un avis : certains disent que l'IA va remplacer les développeurs, d'autres affirment qu'elle n'est même pas capable de générer du code simple. Alors il me fallait me faire mon propre avis et le meilleur moyen c'est de s'en servir sur un projet concret avec un réel besoin.
Résultat ? Je suis surpris, il y a de très bonnes choses et en même temps je reste mitigé. J'ai effectivement gagné en productivité, notamment pour la génération du code html et css (avec tailwind) mais cela demande une constante surveillance et prise de recul sur ce qui est généré. La perte de contexte, l'usage de version obsolète ou la mauvaise compréhension des IA peut mettre en péril la réussite du projet et détruire le gain de productivité en une dette technique énorme.
Défi et solution
Mon premier défi ? Pouvoir mettre à jour l'application en production sans interruption de service (ou presque), pouvoir garder les médias ajoutés à ma bibliothèque d'assets et le tout sans mettre les mains dans le moteur ! La solution la plus évidente ? Une pipeline !
Le code étant hébergé sur GitHub, je me suis servis des GitHub Actions pour construire des images Docker à partir du code source : une image Astro et une image Strapi, qui sont ensuite publiées sur le registry de GitHub. Ma pipeline va ensuite se connecter en ssh sur mon VPS pour récupérer la dernière version de mes images et relancer mon envrionnement docker compose qui est correctement configuré pour préserver mes données grâce à des volumes montés. Aucune perte de données, une mise à jour du site à la volée et une interruption de service quasi invisible !
Un second défi s'est ensuite montré à moi comme obligatoire à réussir avant même de pouvoir déployer mon site, la sécurité :
- Bloquer l'accès au serveur sur les ports non désirés
- Détecter et bannir automatiquement les potentiels bots et scans répétitifs de mon serveur
- Sécuriser l'accès à mon panel d'administration
Pour cela, j'ai mis en place un simple firewall mais qui se révèle très efficace pour bloquer tous les ports de mon VPS sauf ceux dont j'ai besoin (http, https et ssh). j'ai ensuite déployer un service fail2ban avec la mise en place de jail pour bloquer les adresses ip non désirées sur mon VPS (et mon dieu la liste s'est très, très, très vite allongée !).
L'accès au panel admin est évidemment sécurisé par une passphrase très forte, généré par BitWarden qui m'assure qu'elle ne va pas sauter en moins de 1 mois de brute force !
D'autres solutions sont encore à mettre en place, non urgente pour une mise en production :
- Changer le port utilisé pour la connexion SSH
- Utiliser une liste blanche d'ip pour l'accès au panel admin
Résultat
Le résultat de tout ce travail, je vous laisse le constater en navigant sur les autres pages de mon site 😊