Il y a quelques temps j’ai voulu actualiser le site web qui permettait de mettre en avant mes compétences de formateur certifié Microsoft. Comme c’est plus que jamais la mode, je me suis aidé de l’IA afin de monter en compétences sur un nouveau domaine : développement en React et publication au sein de mon hébergeur habituel Infomaniak.
Bien que le site ne soit composé que de 3 pages, la création et la mise à jour étaient fastidieuse car il fallait compiler le code, l’exporter depuis mon container local sur mon poste de travail puis finalement l’exporter chez Infomaniak. J’ai donc cherché à optimiser tout ça et j’ai utilisé GitHub Actions afin d’automatiser cette publication.
Prérequis et contexte
Je dispose donc d’un site basique développé en React. L’ensemble du code est conservé sur un repository privé GitHub et je développe localement sur ma machine via un container fonctionnant sur un distribution Linux Alpine (je passe cette partie car ce n’est pas l’objectif de l’article).
Processus de mise à jour automatisé
Créer les secrets dans GitHub
Avant toute chose, vous devez récupérer les identifiants de connexion à votre espace SFTP. Sur Infomaniak, vous disposez d’une section dédiée appelée FTP / SSH dans votre portail d’administration. C’est là que vous retrouverez le nom du serveur, l’identifiant et le mot de passe pour vous connecter en SFTP (port 22/TCP).
Pour que la connexion puisse être totalement automatisée, nous allons devoir stocker ces informations dans des secrets sur notre repository GitHub.
Connectez-vous sur votre repo GitHub et allez dans la section Settings > Secrets and variables puis dans l’onglet Secrets. Définissez ensuite 3 nouveaux secrets pour l’adresse/hostname de connexion à votre serveur, l’identifiant et enfin le mot de passe de connexion.
Création d’un fichier de Workflow
Avec Visual Studio Code, créez désormais un nouveau fichier Workflow. N’oubliez pas respecter l’emplacement et le format du fichier qui est particulier à GitHub.
J’ai créé mon fichier .github/workflows/deploy.yml qui décrit les étapes : récupérer le code, installer les dépendances, builder le projet React, puis envoyer le dossier build sur le serveur.
Voici le code que j’ai utilisé :
name: Build and Deploy
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '24'
- name: Install dependencies
run: npm install
working-directory: ./frontend
- name: Build
run: npm run build
working-directory: ./frontend
- name: Deploy via SFTP
uses: wlixcc/SFTP-Deploy-Action@v1.2.4
with:
server: ${{ secrets.SFTP_HOST }}
username: ${{ secrets.SFTP_USERNAME }}
password: ${{ secrets.SFTP_PASSWORD }}
local_path: ./frontend/build/*
remote_path: /srv/customer/tg.fr/
Pensez bien à adapter les 2 dernières lignes en fonction de votre cas d’usage (votre site est peut être stocké dans un sous-dossier selon la configuration proposée par votre hébergeur) :
- local_path
- remote_path
Et globalement, c’est déjà terminé.
Tester l’exécution
Il ne vous reste plus qu’à commit + push votre code depuis VS Code et vous allez voir votre workflow GitHub Actions se lancer et mettre à jour automatiquement votre site web.
L’ensemble du process ne prend que 1min et 15 secondes !
Déclenchement automatique et/ou manuel
Dans mon cas, j’ai choisi un déclenchement automatique au moment du commit + push, mais vous pouvez également mettre en place un déclenchement manuel (ou même les 2 possibilités : auto + manuel) en modifiant la section suivante ci-dessous. ⬇️
- Déploiement automatique :
on:
push:
branches:
- main
Déploiement auto avec option manuelle :
on:
workflow_dispatch:
push:
branches:
- main
Bravo, votre site se met désormais à jour tout seul ! 😁
