Article original : How To Deploy a Next.js App To Vercel With GitHub Actions
Vercel est une plateforme cloud ou Platform-as-a-Service (PaaS) conçue pour aider les développeurs frontend à créer, prévisualiser et déployer des applications web rapidement et efficacement. Dans ce tutoriel, nous allons nous concentrer sur le déploiement d'une application Next.js sur Vercel en utilisant GitHub Actions.
Dans un article précédent, nous avons construit un blog portfolio avec Next.js. Ici, vous apprendrez comment le déployer sur Vercel avec GitHub Actions.
Prérequis
Pour pouvoir déployer votre projet, vous devez avoir un dépôt GitHub du projet (vous pouvez toujours suivre si vous avez déjà un projet Next.js), et un compte Vercel. Voici le dépôt GitHub avec lequel nous allons travailler. Vous pouvez le cloner pour suivre.
Comment déployer votre application Next
Créer un jeton Vercel et l'ajouter à vos secrets dans GitHub
Dans votre compte Vercel, allez dans Paramètres, puis allez dans Tokens.
Dans la section Créer un jeton, entrez un nom pour votre jeton, sélectionnez une date d'expiration et cliquez sur "créer".
Vous devriez voir un message de succès avec votre jeton. Ensuite, allez dans votre dépôt GitHub, et cliquez sur l'onglet "Paramètres".
Dans l'onglet Paramètres, allez dans Secrets et variables dans la barre latérale, puis cliquez sur Actions.
Vous verrez une section pour ajouter des secrets. Ajoutez un secret nommé VERCEL_TOKEN, et collez le jeton là.
Le jeton Vercel est un jeton utilisé pour authentifier le runner GitHub. Le CLI Vercel installé sur le runner GitHub va exécuter les commandes avec votre compte. Ainsi, au lieu de devoir se connecter, il utilise le jeton d'accès pour vérifier qu'il a été réellement autorisé par vous à prendre les actions.
L'ID de l'organisation est utilisé pour indiquer à Vercel quel compte d'organisation ou d'équipe le projet doit être créé sous.
L'ID de projet indique ensuite à Vercel le projet spécifique que vous souhaitez déployer. Tout comme l'ID de l'organisation, il s'agit d'un identifiant unique.
Installer le CLI Vercel et se connecter
Utilisez la commande suivante pour installer le CLI vercel globalement sur votre ordinateur :
npm install -g vercel
Ensuite, connectez-vous au CLI avec la commande suivante :
vercel login
Utilisez l'une des options pour vous connecter.
J'ai utilisé GitHub. Sélectionnez-en une avec les touches fléchées, et cliquez sur entrer.
Créer un projet Vercel à partir de votre répertoire local
Naviguez jusqu'à votre répertoire de projet si vous n'y êtes pas déjà. Si vous avez déjà créé un projet sur Vercel via l'interface web, utilisez la commande vercel link pour lier votre répertoire actuel au projet Vercel. Si vous n'avez pas encore de projet Vercel, tapez simplement vercel dans le CLI et suivez les invites pour configurer le projet.
Avec cela, Vercel créera un dossier .vercel dans le projet. Ouvrez-le, et allez dans le fichier project.json.
Dans le fichier, vous devriez voir votre ID de projet et votre ID d'organisation. Copiez-les et créez des secrets dans votre dépôt GitHub pour chacun.
Créer votre fichier de workflow GitHub
À la racine de votre dossier de projet, créez le dossier .github/workflow. Ensuite, créez un fichier de workflow appelé vercel_deploy.yml.
Dans le fichier, écrivez ceci :
name: Déploiement de production Vercel
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches:
- main
paths:
- '01-simple-blog/**'
jobs:
Deploy-Production:
runs-on: ubuntu-latest
defaults:
run:
working-directory: 01-simple-blog
steps:
- uses: actions/checkout@v2
- name: Installer le CLI Vercel
run: npm install --global vercel@latest
- name: Récupérer les informations d'environnement Vercel
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Construire les artefacts du projet
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
continue-on-error: true
- name: Déployer les artefacts du projet sur Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
Ceci est le fichier de workflow pour mon projet simple-writer-portfolio.
Tout d'abord, nous avons les variables d'environnement :
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
# Autres codes
Ensuite, nous avons le déclencheur. Cela se déclenche lorsque je pousse vers la branche main, affectant les fichiers dans le sous-répertoire 01-simple-blog.
# Code précédent
on:
push:
branches:
- main
paths:
- '01-simple-blog/**'
# Autres codes
Ensuite, nous avons la définition du travail. Ici, j'ai défini un travail "Deploy-Production" qui s'exécute sur Ubuntu. Par défaut, toutes les commandes là-bas s'exécuteront dans le répertoire 01-simple-blog, ce qui équivaut à exécuter cd 01-simple-blog depuis la racine avant d'exécuter les commandes sur le shell. Je l'ai fait parce que le projet Next.js est dans ce répertoire, où se trouve le package.json.
# Code précédent
jobs:
Deploy-Production:
runs-on: ubuntu-latest
defaults:
run:
working-directory: 01-simple-blog
# Autres codes
Ensuite, les étapes impliquées :
# Code précédent
steps:
- uses: actions/checkout@v2
- name: Installer le CLI Vercel
run: npm install --global vercel@latest
- name: Récupérer les informations d'environnement Vercel
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Construire les artefacts du projet
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
continue-on-error: true
- name: Déployer les artefacts du projet sur Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
Avec ces étapes, Vercel est d'abord installé sur le runner GitHub. Ensuite, les informations d'environnement de Vercel sont récupérées. Le projet est construit avec vercel build, et les artefacts pré-construits sont ensuite poussés vers Vercel.
Pousser vers GitHub et regarder votre code se déployer
Stagez vos changements, le cas échéant :
git add .
Validez les changements :
git commit -m "Ajout du workflow GitHub Actions"
Et poussez :
git push origin
Maintenant, allez dans votre dépôt en ligne, et vérifiez le déploiement.
Conclusion
Avec votre workflow GitHub de base en place, vous pouvez maintenant apporter des modifications à votre code, pousser vers GitHub, et le voir se déployer automatiquement. Bien que Vercel vous permette de connecter votre dépôt directement, cette méthode vous offre plus de flexibilité et de personnalisation. Si vous avez aimé cet article, partagez-le avec d'autres. Vous pouvez également me contacter sur LinkedIn ou X.