DEV Community

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

Posted on

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

#laravel #vercel #deploiement #tailwindcss

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 :

Top comments (0)

Read next

alpira profile image

🚀 Introducing Odysseus-CLI: Simplified Deployment for Laravel, React and other Applications

alpira -

pentest_testing_corp profile image

Remote Code Execution (RCE) in Laravel: Prevention & Example

Pentest Testing Corp -

mike_andreuzza profile image

Learn How to create a fully responsive bento grid with Tailwind CSS

Michael Andreuzza -

goaqidev profile image

Construyendo un Portfolio Moderno con Astro y Tailwind CSS

Joaquín Gutiérrez -