Déployer sur Infomaniak (FTP)

Publiez automatiquement votre application sur un hébergement Infomaniak à chaque release GitHub.

Prérequis

Avoir créé une application Vuetify
Avoir déployé sur GitHub Pages (staging)
Avoir un hébergement web Infomaniak

Stratégie de déploiement

Le projet utilise une double stratégie de déploiement :

Environnement	Plateforme	Déclencheur	Usage
Staging	GitHub Pages	Push sur `main`	Tests et validation
Production	Infomaniak (FTP)	Création d'un tag/release	Site public

🧪 Qu'est-ce que le Staging ?

Le staging (ou « pré-production ») est un environnement de test qui reproduit les conditions de production. Il permet de :

Tester les nouvelles fonctionnalités avant de les mettre en ligne
Vérifier que tout fonctionne correctement
Faire valider par le client ou l'équipe

C'est comme une répétition générale avant le spectacle !

⚠️ Staging simplifié pour l'exemple

Dans cet exemple, nous utilisons GitHub Pages pour le staging par simplicité. En situation réelle, le staging devrait utiliser la même infrastructure que la production (même hébergeur, même configuration, mêmes services) — donc aussi chez Infomaniak — pour garantir des tests fiables.

Comprendre les variables d'environnement

Avant de configurer le déploiement, il est important de comprendre ce que sont les variables d'environnement et pourquoi elles sont essentielles.

🤔 C'est quoi une variable d'environnement ?

Une variable d'environnement est une valeur stockée en dehors du code, qui peut changer selon l'endroit où l'application s'exécute.

💡 Analogie

Imaginez un jeu comme Zelda ou Elden Ring. Le code du jeu (ennemis, mécaniques, histoire) reste le même. Mais le niveau de difficulté (Facile, Normal, Difficile) change l'expérience — c'est une variable d'environnement !

Les développeurs n'ont pas créé trois jeux différents. Ils ont paramétré le jeu pour s'adapter selon un réglage choisi au lancement.

🎯 Pourquoi c'est utile ?

Problème	Solution avec variables d'environnement
Le chemin de l'app change selon le serveur	`VITE_BASE_URL` contient `/` ou `/repo/`
Les mots de passe ne doivent pas être dans le code	`SFTP_PASSWORD` est stocké dans les Secrets GitHub

📍 Où mettre les variables d'environnement ?

Environnement	Où stocker les variables
💻 Développement local	Fichier `.env` sur votre machine
🧪 Staging / 🚀 Production	Secrets GitHub (dans les paramètres du dépôt)

C'est quoi un Secret GitHub ?

Un Secret GitHub est une variable stockée de manière chiffrée dans les paramètres de votre dépôt. Elle n'est jamais visible dans le code ni dans les logs — idéal pour les mots de passe et les configurations sensibles.

📁 Le fichier `.env`

En développement local, on stocke ces variables dans un fichier .env :

📁 mon-projet/
├── .env                 # Variables pour le développement local
└── src/

Exemple de fichier .env :

bash

# Commentaire : ceci est ignoré
VITE_BASE_URL=/
VITE_API_URL=https://api.exemple.ch

⚠️ Règles importantes

Une variable par ligne : NOM=valeur
Pas d'espaces autour du =
Pas de guillemets (sauf si la valeur contient des espaces)
Les lignes commençant par # sont des commentaires

🔒 Sécurité : `.env` et `.gitignore`

Les fichiers .env contenant des données sensibles (mots de passe, clés API) ne doivent jamais être versionnés !

bash

# .gitignore
.env

Ne jamais commiter de secrets !

Si vous mettez un mot de passe dans un fichier .env et que vous le poussez sur GitHub, il sera visible publiquement dans l'historique Git — même si vous le supprimez après !

⚡ Comment Vite utilise les variables

Vite (l'outil qui compile votre app Vue) lit automatiquement le fichier .env en local :

Commande	Fichier lu	Usage
`npm run dev`	`.env`	Développement local

Règle spéciale Vite : Seules les variables commençant par VITE_ sont accessibles dans le code :

javascript

// ✅ Accessible (commence par VITE_)
console.log(import.meta.env.VITE_BASE_URL)

// ❌ Non accessible (pour raisons de sécurité)
console.log(import.meta.env.SECRET_KEY)

🤖 Variables dans GitHub Actions

Sur GitHub Actions, on n'utilise pas de fichiers .env. Les variables sont stockées dans les Secrets GitHub et injectées au moment du build :

yaml

- run: npm run build
  env:
    VITE_BASE_URL: ${{ secrets.VITE_BASE_URL }}

📋 Récapitulatif des 3 environnements

Environnement	Source des variables	Déclencheur	Destination
💻 Développement	Fichier `.env` local	`npm run dev`	localhost:5173
🧪 Staging	🔐 Secrets GitHub	`push main`	GitHub Pages
🚀 Production	🔐 Secrets GitHub	`push tag`	Infomaniak

Étape 1 : Créer le fichier `.env` local

Pour le développement sur votre machine :

bash

# .env (pour le développement local uniquement)
VITE_BASE_URL=/

Étape 2 : Modifier `vite.config.js`

Configurez le base pour qu'il utilise la variable d'environnement :

javascript

// vite.config.js
export default defineConfig({
  base: '/',  // Valeur statique
  base: process.env.VITE_BASE_URL || '/',  // Valeur dynamique
  // ... autres options
})

Étape 3 : Créer un accès FTP Infomaniak

Connectez-vous au Manager Infomaniak
Allez dans Hébergement Web → votre hébergement
Menu FTP / SSH → Gérer les utilisateurs FTP
Créez un compte FTP ou utilisez celui existant
Notez les informations :
- Serveur : ftp.cluster0XX.hosting.infomaniak.ch
- Utilisateur : votre identifiant FTP
- Mot de passe : votre mot de passe FTP

Étape 4 : Configurer les secrets GitHub

Les secrets permettent de stocker vos variables et identifiants de manière sécurisée.

Sur GitHub, allez dans Settings de votre dépôt
Menu gauche → Secrets and variables → Actions
Cliquez New repository secret
Ajoutez tous ces secrets :

Variables d'environnement :

Nom	Valeur	Usage
`VITE_BASE_URL_STAGING`	`/nom-du-repo/`	Chemin pour GitHub Pages
`VITE_BASE_URL_PROD`	`/`	Chemin pour Infomaniak

Remplacez nom-du-repo

Utilisez le nom exact de votre dépôt GitHub.

Accès FTP Infomaniak :

Nom	Valeur	Exemple
`FTP_HOST`	Adresse du serveur	`ftp.cluster0XX.hosting.infomaniak.ch`
`FTP_USER`	Identifiant FTP	`votre-identifiant`
`FTP_PASSWORD`	Mot de passe FTP	`votre-mot-de-passe`
`FTP_SERVER_DIR`	Dossier sur le serveur	`/sites/monsite.ch/`

Déploiement dans un sous-dossier

Si vous déployez dans un sous-dossier (ex: kode.ch/141-hello/), configurez :

VITE_BASE_URL_PROD = /141-hello/
FTP_SERVER_DIR = /sites/kode.ch/141-hello/

Sécurité

Ne jamais mettre vos identifiants directement dans le code ou les fichiers YAML !

Étape 5 : Modifier le workflow de staging

Si vous avez suivi le guide Déployer sur GitHub Pages, vous avez déjà un fichier deploy.yml. Modifiez-le pour injecter la variable d'environnement via les secrets :

yaml

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  NOM DU WORKFLOW                                                           ║
# ╚════════════════════════════════════════════════════════════════════════════╝
# Ce nom s'affiche dans l'onglet "Actions" de GitHub
name: Déployer sur GitHub Pages

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  DÉCLENCHEURS — Quand le workflow s'exécute ?                              ║
# ╚════════════════════════════════════════════════════════════════════════════╝
on:
  # Déclenchement automatique à chaque push sur la branche main
  push:
    branches: ['main']
  # Permet aussi de lancer le workflow manuellement depuis GitHub
  workflow_dispatch:

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  PERMISSIONS — Ce que le robot a le droit de faire                         ║
# ╚════════════════════════════════════════════════════════════════════════════╝
permissions:
  contents: read       # Lire le code source du dépôt
  pages: write         # Écrire sur GitHub Pages
  id-token: write      # S'authentifier pour le déploiement sécurisé

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  CONCURRENCE — Éviter les conflits entre déploiements                      ║
# ╚════════════════════════════════════════════════════════════════════════════╝
concurrency:
  group: 'pages'              # Tous les déploiements Pages sont dans ce groupe
  cancel-in-progress: true    # Si un nouveau push arrive, annuler l'ancien

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  JOBS — Les tâches à exécuter                                              ║
# ╚════════════════════════════════════════════════════════════════════════════╝
jobs:

  # ┌──────────────────────────────────────────────────────────────────────────┐
  # │  JOB 1 : build — Compiler l'application Vue                              │
  # └──────────────────────────────────────────────────────────────────────────┘
  build:
    runs-on: ubuntu-latest    # Exécuter sur un serveur Ubuntu (gratuit)
    steps:
      # Étape 1 : Télécharger le code source depuis GitHub
      - uses: actions/checkout@v4

      # Étape 2 : Installer Node.js sur le serveur
      - uses: actions/setup-node@v4
        with:
          node-version: 20    # Version de Node.js
          cache: 'npm'        # Mettre en cache node_modules (plus rapide)

      # Étape 3 : Installer les dépendances (package.json)
      - run: npm ci

      # Étape 4 : Compiler l'application Vue → HTML/CSS/JS
      - run: npm run build
      - run: npm run build
        env: 
          VITE_BASE_URL: ${{ secrets.VITE_BASE_URL_STAGING }}

      # Étape 5 : Préparer les fichiers pour GitHub Pages
      - uses: actions/configure-pages@v4

      # Étape 6 : Empaqueter le dossier dist/ pour le déploiement
      - uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'       # Le dossier contenant le site compilé

  # ┌──────────────────────────────────────────────────────────────────────────┐
  # │  JOB 2 : deploy — Publier le site sur Internet                           │
  # └──────────────────────────────────────────────────────────────────────────┘
  deploy:
    environment:
      name: github-pages      # Environnement GitHub Pages
      url: ${{ steps.deployment.outputs.page_url }}  # URL du site déployé
    runs-on: ubuntu-latest    # Serveur Ubuntu pour le déploiement
    needs: build              # ⚠️ Attend que le job "build" soit terminé !
    steps:
      # Étape unique : Déployer les fichiers sur GitHub Pages
      - uses: actions/deploy-pages@v4
        id: deployment        # Identifiant pour récupérer l'URL

Étape 6 : Créer le workflow de production

Créez .github/workflows/deploy-production.yml :

yaml

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  WORKFLOW DE PRODUCTION — Déploiement FTP sur Infomaniak                   ║
# ╚════════════════════════════════════════════════════════════════════════════╝
name: Deploy to Production (FTP)

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  DÉCLENCHEURS — Quand déployer en production ?                             ║
# ╚════════════════════════════════════════════════════════════════════════════╝
on:
  # Déclenchement sur création d'un tag (v1.0.0, v2.1.3, etc.)
  push:
    tags:
      - 'v*.*.*'
  # Déclenchement sur publication d'une release GitHub
  release:
    types: [published]
  # Déclenchement manuel (en cas d'urgence)
  workflow_dispatch:

# ╔════════════════════════════════════════════════════════════════════════════╗
# ║  JOB : Compiler et déployer sur Infomaniak                                 ║
# ╚════════════════════════════════════════════════════════════════════════════╝
jobs:
  deploy-production:
    runs-on: ubuntu-latest
    steps:
      # Étape 1 : Récupérer le code source
      - name: Checkout
        uses: actions/checkout@v4

      # Étape 2 : Installer Node.js
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: 'npm'

      # Étape 3 : Installer les dépendances
      - name: Install dependencies
        run: npm ci

      # Étape 4 : Compiler l'application pour la production
      - name: Build for production
        run: npm run build
        env:
          NODE_ENV: production
          VITE_BASE_URL: ${{ secrets.VITE_BASE_URL_PROD }}

      # Étape 5 : Déployer via FTP sur Infomaniak
      - name: Deploy to Infomaniak FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USER }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ${{ secrets.FTP_SERVER_DIR }}
          local-dir: ./dist/

Étape 7 : Déployer en production

Option 1 : Via un tag (rapide)

bash

# Créer un tag de version
git tag v1.0.0

# Pousser le tag vers GitHub
git push origin v1.0.0

Option 2 : Via une release (documentée)

Sur GitHub, allez dans Releases (menu de droite)
Cliquez Create a new release
Choose a tag → créez un tag (ex: v1.0.0)
Release title → nom de la version
Description → notes de version (changelog)
Cliquez Publish release

Option 3 : Via GitHub CLI

bash

# Créer et pousser un tag + release en une commande
git tag v1.0.0
git push origin v1.0.0
gh release create v1.0.0 --title "Version 1.0.0" --notes "Première version stable"

Gestion des versions (Semantic Versioning)

Format : vMAJEUR.MINEUR.PATCH

v1.2.3
│ │ │
│ │ └─── PATCH  : Corrections de bugs      (1.2.3 → 1.2.4)
│ └───── MINEUR : Nouvelles fonctionnalités (1.2.0 → 1.3.0)
└─────── MAJEUR : Changements incompatibles (1.0.0 → 2.0.0)

Exemples :

Version	Signification
`v0.1.0`	Première version de développement
`v1.0.0`	Première version stable (production)
`v1.1.0`	Ajout d'une nouvelle fonctionnalité
`v1.1.1`	Correction d'un bug
`v2.0.0`	Refonte majeure (breaking changes)

Bonnes pratiques

Commencez par v0.1.0 pendant le développement
Passez à v1.0.0 pour la première mise en production
Incrémentez selon le type de modification

Dépannage

Page blanche en production

Cause : VITE_BASE_URL_PROD mal configuré.

Solution :

Vérifiez que le secret VITE_BASE_URL_PROD vaut / (pas /nom-du-repo/)
Vérifiez que vite.config.js utilise process.env.VITE_BASE_URL
Relancez le workflow manuellement

Erreur de connexion FTP

Cause : Secrets mal configurés ou serveur incorrect.

Solution :

Vérifiez les secrets FTP_HOST, FTP_USER, FTP_PASSWORD
Testez la connexion avec FileZilla (FTP, port 21)
Vérifiez que l'adresse du serveur est correcte

Le workflow ne se déclenche pas

Cause : Pas de tag créé ou format incorrect.

Solution :

Le tag doit suivre le format v*.*.* (ex: v1.0.0)
Vérifiez que le tag est poussé : git push origin v1.0.0

Fichiers non mis à jour

Cause : Cache navigateur ou anciens fichiers sur le serveur.

Solution :

Videz le cache du navigateur (Ctrl+Shift+R)
Supprimez manuellement les anciens fichiers via FileZilla
Vérifiez que le build s'est bien terminé dans les logs GitHub Actions

122 - JavaScript

141 - Apps web adaptatives

Les bases du JavaScript

Formulaires et DOM

Manipuler une page Web (DOM)

JavaScript avancé

Pinia (magasin d'état)

Consommer une API

Pokédex Vuetify

Pages et navigation

Affichage des Pokémon

Détails et interactions

Déployer sur Infomaniak (FTP)

Stratégie de déploiement

Comprendre les variables d'environnement

🤔 C'est quoi une variable d'environnement ?

🎯 Pourquoi c'est utile ?

📍 Où mettre les variables d'environnement ?

📁 Le fichier `.env`

🔒 Sécurité : `.env` et `.gitignore`

⚡ Comment Vite utilise les variables

🤖 Variables dans GitHub Actions

📋 Récapitulatif des 3 environnements

Étape 1 : Créer le fichier `.env` local

Étape 2 : Modifier `vite.config.js`

Étape 3 : Créer un accès FTP Infomaniak

Étape 4 : Configurer les secrets GitHub

Étape 5 : Modifier le workflow de staging

Étape 6 : Créer le workflow de production

Étape 7 : Déployer en production

Option 1 : Via un tag (rapide)

Option 2 : Via une release (documentée)

Option 3 : Via GitHub CLI

Gestion des versions (Semantic Versioning)

Dépannage

Page blanche en production

Erreur de connexion FTP

Le workflow ne se déclenche pas

Fichiers non mis à jour

Ressources

Déployer sur Infomaniak (FTP) ​

Stratégie de déploiement ​

Comprendre les variables d'environnement ​

🤔 C'est quoi une variable d'environnement ? ​

🎯 Pourquoi c'est utile ? ​

📍 Où mettre les variables d'environnement ? ​

📁 Le fichier .env ​

🔒 Sécurité : .env et .gitignore ​

⚡ Comment Vite utilise les variables ​

🤖 Variables dans GitHub Actions ​

📋 Récapitulatif des 3 environnements ​

Étape 1 : Créer le fichier .env local ​

Étape 2 : Modifier vite.config.js ​

Étape 3 : Créer un accès FTP Infomaniak ​

Étape 4 : Configurer les secrets GitHub ​

Étape 5 : Modifier le workflow de staging ​

Étape 6 : Créer le workflow de production ​

Étape 7 : Déployer en production ​

Option 1 : Via un tag (rapide) ​

Option 2 : Via une release (documentée) ​

Option 3 : Via GitHub CLI ​

Gestion des versions (Semantic Versioning) ​

Dépannage ​

Page blanche en production ​

Erreur de connexion FTP ​

Le workflow ne se déclenche pas ​

Fichiers non mis à jour ​

Ressources ​

Déployer sur Infomaniak (FTP)

Stratégie de déploiement

Comprendre les variables d'environnement

🤔 C'est quoi une variable d'environnement ?

🎯 Pourquoi c'est utile ?

📍 Où mettre les variables d'environnement ?

📁 Le fichier `.env`

🔒 Sécurité : `.env` et `.gitignore`

⚡ Comment Vite utilise les variables

🤖 Variables dans GitHub Actions

📋 Récapitulatif des 3 environnements

Étape 1 : Créer le fichier `.env` local

Étape 2 : Modifier `vite.config.js`

Étape 3 : Créer un accès FTP Infomaniak

Étape 4 : Configurer les secrets GitHub

Étape 5 : Modifier le workflow de staging

Étape 6 : Créer le workflow de production

Étape 7 : Déployer en production

Option 1 : Via un tag (rapide)

Option 2 : Via une release (documentée)

Option 3 : Via GitHub CLI

Gestion des versions (Semantic Versioning)

Dépannage

Page blanche en production

Erreur de connexion FTP

Le workflow ne se déclenche pas

Fichiers non mis à jour

Ressources