Deployer Laravel sur Supabase

Pourquoi Deployer Laravel sur Supabase ?

Le déploiement d'une application Laravel sur Supabase peut être une solution pratique pour de nombreux développeurs. Supabase est un service open source qui permet de créer des applications web rapidement et facilement, en offrant une couche complète de stockage, d'authentification et de fonctions serverless. En déployant votre application Laravel sur Supabase, vous pouvez profiter des avantages suivants :

• Temps de développement réduit : Avec Supabase, vous n'avez pas besoin de configurer et de maintenir une base de données, un serveur web ou d'autres services backend.
• Facilité d'intégration : Supabase offre des API RESTful et GraphQL pour interagir avec vos données en temps réel.
• Scalabilité : Supabase est conçu pour être scalable et peut gérer de grandes quantités de trafic sans effort.

Un cas d'usage concret serait une application de gestion de projet où vous avez besoin d'une interface web complète, avec des fonctionnalités de stockage et d'authentification. En utilisant Supabase, vous pouvez créer cette application en moins de temps et avec moins de code, ce qui permet de se concentrer sur le développement de l'application plutôt que sur la gestion des services backend.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissance de base de Laravel
• Un compte Supabase (gratuit pour les petits projets)
• Un environnement local avec PHP, Composer et Node.js installés
• Une IDE ou un éditeur de code comme VSCode

Concepts fondamentaux

Supabase CLI

Le Supabase CLI est une commande ligne qui vous permet de gérer votre projet Supabase directement depuis votre terminal. Il offre des fonctionnalités telles que l'initialisation d'un nouveau projet, la configuration de l'environnement et le déploiement.

## Installation du Supabase CLI
npm install -g supabase-cli

## Initialisation d'un nouveau projet
supabase init

Tables et Relations

Supabase utilise des tables pour stocker vos données. Vous pouvez créer des relations entre ces tables en utilisant les clés étrangères.

-- Création de deux tables
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL
);

CREATE TABLE tasks (
  id SERIAL PRIMARY KEY,
  user_id INT REFERENCES users(id),
  title TEXT NOT NULL,
  description TEXT
);

Fonctions Serverless

Supabase offre des fonctions serverless que vous pouvez utiliser pour exécuter du code côté serveur. Ces fonctions peuvent être déclenchées par des événements tels que l'ajout ou la mise à jour de données.

// Création d'une fonction serverless pour ajouter une tâche
export async function addTask(event) {
  const { task } = event.data.new;

  await supabase.from('tasks').insert({ title: task.title, description: task.description });

  return {
    success: true,
  };
}

Mise en pratique : projet fil rouge

Nous allons créer un gestionnaire de tâches simple avec Laravel et Supabase. Le projet comprendra les fonctionnalités suivantes :

• Création d'un utilisateur
• Ajout, modification et suppression de tâches
• Affichage des tâches par utilisateur

Étape 1 : Initialisation du projet Laravel

## Création d'un nouveau projet Laravel
composer create-project --prefer-dist laravel/laravel task-manager

## Accès au projet
cd task-manager

Étape 2 : Configuration de Supabase

• Créez un compte Supabase et ajoutez un nouveau projet.
• Notez les informations de connexion (URL, clé secrète).

## Création du fichier .env.local avec les informations de connexion
echo "DB_CONNECTION=supabase" >> .env.local
echo "DB_HOST=<votre_url>" >> .env.local
echo "DB_PORT=5432" >> .env.local
echo "DB_DATABASE=<votre_base_de_donnees>" >> .env.local
echo "DB_USERNAME=<votre_utilisateur>" >> .env.local
echo "DB_PASSWORD=<votre_mot_de_passe>" >> .env.local

Étape 3 : Création des modèles et migrations

## Création du modèle User
php artisan make:model User -m

## Création du modèle Task
php artisan make:model Task -m

## Migration pour la table users
php artisan migrate:make create_users_table --create=users
php
// database/migrations/<timestamp>_create_users_table.php
Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('email')->unique();
    $table->string('password');
    $table->timestamps();
});
php
// database/migrations/<timestamp>_create_tasks_table.php
Schema::create('tasks', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->constrained()->onDelete('cascade');
    $table->string('title');
    $table->text('description')->nullable();
    $table->timestamps();
});

Étape 4 : Création des contrôleurs

## Contrôleur pour les utilisateurs
php artisan make:controller UserController

## Contrôleur pour les tâches
php artisan make:controller TaskController
php
// app/Http/Controllers/UserController.php
namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller {
    public function create(Request $request) {
        User::create($request->all());
        return response()->json(['message' => 'User created'], 201);
    }
}
php
// app/Http/Controllers/TaskController.php
namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller {
    public function store(Request $request) {
        $task = Task::create($request->all());
        return response()->json(['message' => 'Task created', 'data' => $task], 201);
    }

    public function index(Request $request) {
        $tasks = Task::where('user_id', $request->user()->id)->get();
        return response()->json($tasks, 200);
    }
}

Étape 5 : Configuration des routes

// routes/api.php
use App\Http\Controllers\UserController;
use App\Http\Controllers\TaskController;

Route::post('/users', [UserController::class, 'create']);
Route::middleware('auth:sanctum')->group(function () {
    Route::post('/tasks', [TaskController::class, 'store']);
    Route::get('/tasks', [TaskController::class, 'index']);
});

Étape 6 : Création des vues

Créez les fichiers de vue pour afficher les tâches.

<!-- resources/views/tasks.blade.php -->
@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Tâches</h1>
    <ul>
        @foreach ($tasks as $task)
            <li>$task->title</li>
        @endforeach
    </ul>
</div>
@endsection

Étape 7 : Authentification avec Sanctum

Supabase utilise Sanctum pour l'authentification. Installez Sanctum et configurez-le dans votre projet.

## Installation de Sanctum
composer require laravel/sanctum

## Publication des migrations et configuration
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" --tag="migrations"
php artisan migrate

Étape 8 : Déploiement sur Supabase

• Utilisez le Supabase CLI pour déployer votre projet.
• Créez une application dans Supabase et ajoutez les fichiers de votre projet à la racine de l'application.

## Initialisation du déploiement avec Supabase CLI
supabase init

## Ajout des fichiers au dépôt Git
git add .
git commit -m "Initial commit"

## Déploiement sur Supabase
supabase deploy

Erreurs frequentes et debugging

1. Erreur : Migration failed

   Schema::create('tasks', function (Blueprint $table) {
       $table->id();
       $table->foreignId('user_id')->constrained()->onDelete('cascade');
       $table->string('title');
       $table->text('description')->nullable();
       $table->timestamps();
   });
   

   Erreur : Migration failed

   [Illuminate\Database\QueryException] SQLSTATE[42P07]: Duplicate column name: 7 ERROR:  column "user_id" already exists (SQL: alter table tasks add column user_id bigint)
   

   Correction :

   Schema::create('tasks', function (Blueprint $table) {
       $table->id();
       $table->foreignId('user_id')->constrained()->onDelete('cascade');
       $table->string('title');
       $table->text('description')->nullable();
       $table->timestamps();
   });
   

2. Erreur : Authentification failed

   Route::middleware('auth:sanctum')->group(function () {
       Route::post('/tasks', [TaskController::class, 'store']);
       Route::get('/tasks', [TaskController::class, 'index']);
   });
   

   Erreur : Authentification failed

   [Illuminate\Auth\AuthenticationException] Authentication via token not successful.
   

   Correction :

   Route::middleware('auth:sanctum')->group(function () {
       Route::post('/tasks', [TaskController::class, 'store']);
       Route::get('/tasks', [TaskController::class, 'index']);
   });
   

Pour aller plus loin

1. Intégration d'APIs tierces : Apprenez à intégrer des APIs tierces dans votre application Laravel pour accroître ses fonctionnalités.
2. Tests unitaires et de fonction : Découvrez comment écrire des tests pour votre code afin de vous assurer que tout fonctionne correctement.
3. Optimisation des performances : Apprenez à optimiser les performances de votre application Laravel en utilisant des techniques telles que la pagination, l'indexation et le caching.

Défi pratique

Créez un simple CLI tool qui utilise Laravel pour interagir avec une API tierce (par exemple, une API de météo). Le CLI devrait permettre d'afficher les prévisions météorologiques pour une ville donnée.