Skip to main content

Déploiement Vercel

Un guide étape par étape pour déployer une application sur Vercel

Étape 1 :

Avoir un repository Github sous l'organisation INNOCEAN.
Se connecter à Vercel avec le compte TeamProd.

Étape 2 :

Ouvrir le terminal et lancer la commande vercel login
Se connecter avec le compte GitHub TeamProd

Lancer la commande vercel --prod

Étape 3 :

Installer Vercel-CLI avec la commande suivante : npm i -g vercel

Ajouter à la racine du projet un dossier ".github"
Dans ce dossier, créer un nouveau dossier "workflows".
A l'intérieur de ce dossier, créer un fichier "deploy.yml" contenant la configuration suivante :

name: Deploy to Vercel

on:
  push:
    branches:
      - "*" # Déclencher pour toutes les branches sauf celles explicitement ignorées

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18" # Utilisez la version Node.js requise par votre projet

      - name: Install dependencies
        run: npm install

      - name: Deploy to Vercel (Production)
        if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master' # Si la branche est 'main ou master'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: npx vercel --token $VERCEL_TOKEN --prod --confirm --cwd .

      - name: Deploy to Vercel (Staging)
        if: github.ref != 'refs/heads/main' && github.ref != 'refs/heads/master' # Si la branche n'est pas 'main ou master'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: npx vercel --token $VERCEL_TOKEN --confirm --cwd .

NE PAS OUBLIER COMMIT & PUSH SUR MAIN 

Étape 4 :

Dans le repository GitHub, aller à l'onglet Settings > Secrets and variables > Actions > New Repository Secret
Le nom de la clé doit être : "VERCEL_TOKEN"
Le secret doit être : HqqGOjsZyXFgAkKmvJkmLite (Clé Vercel qui est déjà générée)

Étape 5 :

Si vous voulez que l'URL de déploiement soit différente sur Vercel, vous pouvez créer une variable d'environnement qui prendra en valeur votre URL de déploiement en production (par exemple sur le site de Hyundai) dans votre projet Vue.js et la changer directement dans Vercel pour qu'elle soit à la racine.

Aller dans votre projet sur le site de Vercel puis Settings > Environnement Variables. Ensuite, ajouter le nom de la variable que vous avez créée dans votre fichier .env et ne rien mettre dans la value.

Étape 6 :

Vérifier l'avancement du déploiement dans GitHub Actions.
Vérifier le déploiement sur Vercel

Back to top