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' # Si la branche est 'main'
        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' # Si la branche n'est pas 'main'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: npx vercel --token $VERCEL_TOKEN --confirm --cwd .

NE PAS OUBLIER COMMIT & PUSH SUR MAIN 

Étape 34 :

Dans le repository GitHub, aller à l'onglet ActionsSettings > 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 45 :

OuvrirSi 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 terminalsite de Hyundai) dans votre projet Vue.js et lancerla changer directement dans Vercel pour qu'elle soit à la commanderacine.

vercel

Aller login

Sedans connectervotre avecprojet sur le comptesite GitHubde TeamProdVercel

Lancerpuis Settings > Environnement Variables. Ensuite, ajouter le nom de la commandevariable vercelque --prodvous avez créée dans votre fichier .env et ne rien mettre dans la value.

Étape 56 :

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