Deployer Laravel sur Vercel

Pourquoi Deployer Laravel sur Vercel ?

Le déploiement de projets Laravel sur Vercel offre plusieurs avantages réels pour les développeurs. D'une part, Vercel propose une plateforme de déploiement rapide et scalable qui permet d'optimiser le temps entre la modification du code source et son mise en production. Deuxièmement, Vercel offrira des performances optimisées grâce à son réseau mondial de serveurs edge.

Un cas concret est celui d'un développeur web qui travaille sur un site e-commerce. La rapidité avec laquelle le site peut être mis à jour et les performances optimisées sont essentielles pour une expérience utilisateur fluide et des ventes maximales.

Prerequis

Pour suivre ce tutoriel, vous devez avoir les connaissances suivantes :

• Connaissance approfondie du framework Laravel 8 ou supérieure.
• Familiarité avec la ligne de commande (terminal).
• Un compte Vercel.
• Une machine locale avec PHP et Composer installés.

Outils à installer :

• Node.js v12.0.0 ou supérieur
• Yarn v1.22.0 ou supérieur
• Laravel 8 ou supérieure

Concepts fondamentaux

1. Vercel CLI

Vercel CLI est un outil de ligne de commande qui permet d'interagir avec les services Vercel. Il est utilisé pour déployer des applications directement depuis votre terminal.

## Installer Vercel CLI
yarn global add vercel

## Connexion à Vercel
vercel login

2. Next.js

Laravel a une relation particulière avec Next.js, un framework React populaire qui offre des fonctionnalités avancées comme le rendu côté serveur (SSR) et la génération de pages statiques.

## Créer un nouveau projet Laravel avec Vite (qui utilise Next.js sous le capot)
composer create-project laravel/laravel todoapp --prefer-dist

cd todoapp

## Initialiser Vite pour utiliser Next.js
npx degit Vercel/nextjs-templates/default app

3. Tailwind CSS

Tailwind CSS est un framework de styles CSS qui offre une grande flexibilité et des performances optimisées.

## Installer Tailwind CSS dans le projet Laravel
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

## Configurer les fichiers de configuration pour utiliser Tailwind CSS
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js', 'resources/css/app.css']),
    ],
});

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches pour illustrer le déploiement de Laravel sur Vercel.

Étape 1 : Initialisation du projet

## Créer un nouveau projet Laravel
composer create-project laravel/laravel todoapp --prefer-dist

cd todoapp

## Installer les dépendances front-end avec npm
npm install

Étape 2 : Configuration de la base de données

Modifier le fichier .env pour configurer votre base de données.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todoapp
DB_USERNAME=root
DB_PASSWORD=

Étape 3 : Création du modèle et de la migration

## Créer un modèle Task et une migration correspondante
php artisan make:model Task -m

## Modifier la migration pour ajouter les champs nécessaires
// database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description')->nullable();
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

public function down()
{
    Schema::dropIfExists('tasks');
}

Étape 4 : Migration de la base de données

## Exécuter les migrations
php artisan migrate

Étape 5 : Création du contrôleur et des routes

## Créer un contrôleur TaskController
php artisan make:controller TaskController

// routes/web.php
Route::resource('tasks', TaskController::class);

// app/Http/Controllers/TaskController.php
public function index()
{
    $tasks = Task::all();
    return view('tasks.index', compact('tasks'));
}

public function store(Request $request)
{
    $task = new Task;
    $task->title = $request->title;
    $task->description = $request->description;
    $task->save();

    return redirect()->route('tasks.index');
}

Étape 6 : Création des vues

// resources/views/tasks/index.blade.php
@extends('layouts.app')

@section('content')
<h1>Tasks</h1>
<a href="route('tasks.create')" class="btn btn-primary">Create New Task</a>

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Completed</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($tasks as $task)
        <tr>
            <td>$task->title</td>
            <td>$task->description</td>
            <td>$task->completed ? 'Yes' : 'No'</td>
            <td>
                <a href="route('tasks.edit', $task)" class="btn btn-secondary">Edit</a>
                <form action="route('tasks.destroy', $task)" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@endsection

// resources/views/tasks/create.blade.php
@extends('layouts.app')

@section('content')
<h1>Create Task</h1>

<form action="route('tasks.store')" method="POST">
    @csrf
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" name="title" id="title" class="form-control" required>
    </div>
    <div class="form-group">
        <label for="description">Description</label>
        <textarea name="description" id="description" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
</form>
@endsection

Erreurs frequentes et debugging

1. Erreur : "Class 'App\Task' not found"

## Code incorrect
use App\Models\Task;

## Code correct
use App\Models\Task as TaskModel;

2. Erreur : "Migrate: Database [mysql] connection not configured."

## Code incorrect
DB_CONNECTION=sqlite

## Code correct
DB_CONNECTION=mysql

3. Erreur : "Failed to compile"

## Vérifier les erreurs de compilation en utilisant la commande suivante
npm run dev

Pour aller plus loin

1. Optimisation des performances avec Vercel: En savoir plus sur les techniques pour améliorer les performances du déploiement sur Vercel.
2. Utilisation de Laravel Jetstream pour l'authentification: Découvrir comment utiliser Laravel Jetstream pour gérer les utilisateurs et la sécurité de votre application.
3. Intégration avec des services tiers (API externes): Apprendre à intégrer des API tierces dans votre application Laravel.

Défi pratique : Ajouter une fonctionnalité d'authentification à l'application en utilisant Laravel Jetstream et optimiser le rendu côté serveur pour une meilleure performance.