Déployer automatiquement son site avec GitHub Actions et SFTP

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 ! 😁