Déployer votre première application Full-Stack avec Vercel et Heroku

Le déploiement d'une application full-stack peut sembler accablant, surtout si vous êtes nouveau dans le processus. Cependant, des plateformes comme Vercel et Heroku simplifient le déploiement et la gestion indépendante de votre frontend et backend. Ce guide vous guidera dans le déploiement d'une application full-stack de base, avec le frontend hébergé sur Vercel et le backend sur Heroku.

Pourquoi utiliser Vercel et Heroku ?

Vercel :

• Optimisé pour les frameworks frontend comme Next.js, React et Angular.
• Offre un déploiement continu et transparent avec les intégrations Git.
• Fournit une mise en cache globale pour des performances plus rapides.

Héroku :

• Une plateforme polyvalente pour déployer des services backend et des API.
• Facile à configurer avec des variables d'environnement et des intégrations de bases de données.
• S'adapte bien aux options gratuites pour les débutants.

Prérequis
Avant de commencer, assurez-vous d'avoir :

1. Git installé et compréhension de base du contrôle de version.
2. Un projet frontend (React, Next.js, etc.) et un projet backend (Node.js, Express, etc.).
3. Comptes sur Vercel et Heroku.
4. Node.js et npm installés sur votre machine locale.

Étape 1 : Préparez votre code frontend

1.1 Initialiser le référentiel frontend
Si vous ne l'avez pas déjà fait, transférez votre projet frontend vers un référentiel Git (GitHub, GitLab, etc.) :

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

1.2 Optimiser le frontend pour le déploiement
Assurez-vous que votre projet frontend est prêt pour la production :

• Exécutez npm run build pour des frameworks comme Next.js ou React pour créer une version de production optimisée.
• Assurez-vous que les variables d'environnement (par exemple, les URL d'API) sont définies dans .env.local ou directement dans le tableau de bord Vercel.

Étape 2 : Déployez votre frontend sur Vercel

2.1 Se connecter à Vercel

• Connectez-vous à Vercel.
• Cliquez sur « Nouveau projet » et importez votre référentiel Git.

2.2 Configurer les paramètres de déploiement

• Sélectionnez le préréglage de framework correct (par exemple, Next.js, React).
• Ajoutez toutes les variables d'environnement nécessaires (par exemple, REACT_APP_API_URL).

2.3 Déployer le frontend
Cliquez sur "Déployer", et Vercel s'occupera du reste !

• Après le déploiement, vous recevrez une URL en direct pour votre interface.
• Exemple : https://votre-projet.vercel.app.

Étape 3 : Préparez votre code backend

3.1 Initialiser le référentiel backend
Poussez votre projet backend vers un référentiel Git distinct :

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

3.2 Ajouter un profil
Heroku utilise un Procfile pour définir comment exécuter votre application. Créez un Procfile à la racine de votre projet :

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

Remplacez index.js par votre fichier de point d'entrée.

3.3 Définir les variables d'environnement
Assurez-vous que toutes les variables d'environnement requises (par exemple, les URL de base de données, les clés API) sont stockées dans .env. Heroku vous permet de les configurer plus tard dans le tableau de bord.

Étape 4 : Déployez votre backend sur Heroku

4.1 Créer une application Heroku

1. Connectez-vous à Heroku.
2. Cliquez sur "Nouveau" → "Créer une nouvelle application".
3. Choisissez un nom et une région uniques pour votre application.

4.2 Déployer le backend

1. Accédez à l'onglet Déployer.
2. Connectez votre référentiel GitHub.
3. Activez les déploiements automatiques ou déployez manuellement en cliquant sur Déployer la branche.

4.3 Configurer les variables d'environnement
Dans l'onglet Paramètres, ajoutez vos variables d'environnement :

• Exemple : DATABASE_URL, SECRET_KEY.

Étape 5 : Connecter le frontend au backend
Mettez à jour votre projet frontend pour pointer vers le backend Heroku :

• Définissez l'URL du backend comme variable d'environnement :z

web: node index.js  

• Dans votre code frontend, remplacez les URL d'API codées en dur par process.env.REACT_APP_API_URL :

REACT_APP_API_URL=https://your-backend-app.herokuapp.com  

Étape 6 : tester et déboguer

1. Visitez votre URL d'interface depuis Vercel et assurez-vous que toutes les fonctionnalités fonctionnent, y compris les appels API.
2. Utilisez les journaux d'Heroku pour déboguer les problèmes de backend :

const response = await fetch(`${process.env.REACT_APP_API_URL}/api/endpoint`); 

1. Surveillez les journaux de build de Vercel pour détecter tout problème lié au déploiement.

Bonnes pratiques

1. Contrôle de version : utilisez les branches Git pour le développement et fusionnez les modifications uniquement après les tests.
2. Gestion des erreurs : implémentez des réponses d'erreur appropriées dans votre backend pour faciliter le débogage.
3. HTTPS : assurez-vous que les URL Vercel et Heroku utilisent HTTPS pour une communication sécurisée.
4. CORS : configurez les politiques CORS dans votre backend pour autoriser les requêtes provenant de votre URL frontend.

Conclusion
Le déploiement d'une application full-stack avec Vercel et Heroku est simple et convivial pour les débutants. Avec Vercel gérant le frontend et Heroku alimentant le backend, vous pouvez vous concentrer sur la création de fonctionnalités plutôt que de vous soucier de l'infrastructure.

Commencez à déployer dès aujourd'hui et donnez vie à vos projets ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!