Déploiement d’un Projet Laravel sur Vercel et Astuces pour Gérer les Fichiers JS et CSS

Fabrice - Sep 9 - - Dev Community

Le déploiement d’une application Laravel sur Vercel peut sembler complexe, mais avec les bonnes étapes, il devient un processus fluide. Cet article vous guidera à travers les étapes nécessaires pour déployer votre projet Laravel sur Vercel et partagera des astuces pour gérer efficacement les fichiers JavaScript et CSS.


  1. Étapes de Déploiement
  • Créer un Nouveau Projet Laravel
composer create-project laravel/laravel laravel-vercel-example
Enter fullscreen mode Exit fullscreen mode
  • Configurer le Projet pour Vercel

Installer le CLI Vercel

npm i -g vercel
vercel login
vercel link
Enter fullscreen mode Exit fullscreen mode

Créer un fichier vercel.json

{
  "version": 2,
  "functions": {
    "api/index.php": {
      "runtime": "vercel-php@0.6.0"
    }
  },
  "routes": [
    { "src": "/(.*)", "dest": "/api/index.php" }
  ],
  "env": {
    "APP_ENV": "production",
    "APP_DEBUG": "true",
    "APP_URL": "YOUR_APP_URL"
  }
}
Enter fullscreen mode Exit fullscreen mode

Après ceci, lorsque vous allez se rendre sur la page dashboard, la page d'accueil va s'afficher mais il vous faudra faire une configuration parmis les deux proposé sous déssous :

Méthode 1 : Configurer les Proxies de Confiance

// Dans AppServiceProvider.php
use Illuminate\Support\Facades\URL;

public function boot()
{
    URL::forceScheme('https');
}
Enter fullscreen mode Exit fullscreen mode

Méthode 2 : Ajouter ceci dans le layout au niveau du head de la page html :

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Enter fullscreen mode Exit fullscreen mode

Ignorer le Répertoire vendor

Créer un fichier .vercelignore et ajouter :

/vendor
Enter fullscreen mode Exit fullscreen mode

Déploiyer sur Vercel

vercel --prod
Enter fullscreen mode Exit fullscreen mode

Conclusion :

En suivant ces étapes et astuces, vous pouvez déployer efficacement votre projet Laravel sur Vercel tout en gérant correctement vos fichiers JavaScript et CSS. Cela garantit une application performante et bien structurée.

Abonnez-vous pour avoir plus d'actualité :
Yt Developpeurtaf

Ma dernière vidéo :

. . . . . . . . . . . .