Deployer .NET sur Vercel

Deployer .NET sur Vercel : Tutoriel approfondi

Pourquoi Deployer .NET sur Vercel ?

Le déploiement de .NET sur Vercel offre plusieurs avantages réels pour les développeurs. D'abord, Vercel est une plateforme de déploiement serverless qui permet de déployer des applications web et .NET en utilisant le service Edge de Google Cloud. Cela signifie que votre application sera exécutée directement sur l'infrastructure d'une grande entreprise comme Google, offrant une performance optimale et des latences réduites.

Un cas d'utilisation concret serait un développeur qui a créé une application web .NET pour son propre projet personnel ou professionnel. Avec Vercel, ce développeur peut facilement déployer cette application sur le web, la rendre accessible publiquement et même gérer les mises à jour et les déploiements sans avoir besoin de s'occuper de l'hébergement physique ou la maintenance du serveur.

Prerequis

• Connaissances en programmation .NET (C#)
• Un compte Vercel
• Visual Studio Code ou un éditeur de code compatible avec .NET (comme JetBrains Rider)

Concepts fondamentaux

1. Project Structure (Structure du Projet)

Un projet .NET typique comprend généralement les suivantes parties :

• Program.cs : Le point d'entrée de l'application.
• Controllers/Views/Routes : Pour une application web, ces fichiers définissent comment les utilisateurs interagissent avec l'application.
• Models : Contiennent la logique métier et la définition des données.
• Services : Contiennent le code pour effectuer des opérations de business.

2. Hosting (Hébergement)

Vercel prend en charge plusieurs types d'hébergement :

• Serverless Functions : Pour une architecture serverless où l'application ne doit pas être toujours en cours d'exécution.
• API Routes : Pour des applications qui nécessitent une API restful.

3. Deployment (Déploiement)

Le déploiement sur Vercel se fait via un simple clic de bouton dans la console Vercel. Les fichiers vercel.json et next.config.js sont utilisés pour configurer le processus de déploiement.

Mise en pratique : Projet Fil Rouge

Nous allons créer une application web .NET Core qui affiche une liste de tâches à faire (TODO List). Cette application sera déployée sur Vercel.

Étape 1 : Créer un nouveau projet .NET

Commencez par créer un nouveau projet .NET Core :

dotnet new mvc -n TodoApp
cd TodoApp

Étape 2 : Ajouter la logique métier

Créez une classe Task pour représenter les tâches dans le fichier Models/Task.cs :

public class Task
{
    public int Id { get; set; }
    public string Description { get; set; }
    public bool IsCompleted { get; set; }
}

Étape 3 : Créer un service pour gérer les tâches

Créez une classe TaskService dans le fichier Services/TaskService.cs :

public class TaskService
{
    private List<Task> tasks = new List<Task>();

    public List<Task> GetAllTasks()
    {
        return tasks;
    }

    public void AddTask(Task task)
    {
        task.Id = tasks.Count + 1;
        tasks.Add(task);
    }

    public bool CompleteTask(int id)
    {
        var task = tasks.FirstOrDefault(t => t.Id == id);
        if (task != null)
        {
            task.IsCompleted = true;
            return true;
        }
        return false;
    }
}

Étape 4 : Ajouter le contrôleur pour gérer les requêtes

Ajoutez un contrôleur TaskController dans le fichier Controllers/TaskController.cs :

public class TaskController : Controller
{
    private readonly TaskService _taskService;

    public TaskController(TaskService taskService)
    {
        _taskService = taskService;
    }

    public IActionResult Index()
    {
        var tasks = _taskService.GetAllTasks();
        return View(tasks);
    }

    [HttpPost]
    public IActionResult AddTask(string description)
    {
        if (!string.IsNullOrEmpty(description))
        {
            var newTask = new Task { Description = description };
            _taskService.AddTask(newTask);
        }
        return RedirectToAction("Index");
    }

    [HttpPost]
    public IActionResult CompleteTask(int id)
    {
        _taskService.CompleteTask(id);
        return RedirectToAction("Index");
    }
}

Étape 5 : Créer la vue pour afficher les tâches

Créez une vue Index.cshtml dans le dossier Views/Task/ :

@model List<Task>

<h2>Todo List</h2>
<form asp-action="AddTask" method="post">
    <input type="text" name="description" placeholder="New task" />
    <button type="submit">Add Task</button>
</form>

<table>
    <tr>
        <th>Description</th>
        <th>Completed</th>
        <th>Action</th>
    </tr>
    @foreach (var task in Model)
    {
        <tr>
            <td>@task.Description</td>
            <td>@(task.IsCompleted ? "Yes" : "No")</td>
            <td>
                <form asp-action="CompleteTask" method="post">
                    <input type="hidden" name="id" value="@task.Id" />
                    <button type="submit">Mark as Completed</button>
                </form>
            </td>
        </tr>
    }
</table>

Étape 6 : Configurer le service dans Startup.cs

Ajoutez le service TaskService à la collection de services dans Startup.cs :

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddScoped<TaskService>();
}

Étape 7 : Exécuter l'application

Exécutez l'application pour vous assurer qu'elle fonctionne correctement :

dotnet run

Accédez à https://localhost:5001/Task dans votre navigateur pour voir l'application en action.

Erreurs Frequentes et Debugging

1. Erreur : "The type or namespace name 'Task' could not be found"

Code incorrect :

public class TaskModel
{
    public int Id { get; set; }
    public string Description { get; set; }
    public bool IsCompleted { get; set; }
}

Code correct :

using System;

public class TaskModel
{
    public int Id { get; set; }
    public string Description { get; set; }
    public bool IsCompleted { get; set; }
}

2. Erreur : "Error CS0165: Use of unassigned local variable 'task'"

Code incorrect :

var task = tasks.FirstOrDefault(t => t.Id == id);
if (task != null)
{
    task.IsCompleted = true;
}
return false;

Code correct :

var task = tasks.FirstOrDefault(t => t.Id == id);
if (task != null)
{
    task.IsCompleted = true;
    return true;
}
return false;

3. Erreur : "Error CS0246: The type or namespace name 'Task' could not be found"

Code incorrect :

var tasks = new List<Task>();

Code correct :

using System.Collections.Generic;

var tasks = new List<Task>();

Pour aller plus loin

1. Intégrer une base de données: Apprenez à connecter votre application .NET avec une base de données SQL ou NoSQL pour persister les données.
2. Utiliser des services externes: Intégrez des services tiers comme des API RESTful ou des services d'authentification pour ajouter des fonctionnalités supplémentaires.
3. Déploiement continu: Automatisez le déploiement de votre application avec des outils comme GitHub Actions ou GitLab CI/CD.

Défi Pratique

Construire une petite application web .NET qui permet à un utilisateur de s'inscrire et de se connecter en utilisant les services d'authentification Firebase. Assurez-vous que l'utilisateur peut créer, lire, mettre à jour et supprimer ses propres profils.

Conclusion

Ce tutoriel a couvert la mise en place d'une application web .NET Core simple et son déploiement sur Vercel. En suivant les étapes décrites, vous devriez être capable de déployer une application .NET de base rapidement et facilement sur Vercel. N'oubliez pas que la pratique est la clé pour maîtriser ces compétences. Essayez d'améliorer votre application en ajoutant des fonctionnalités supplémentaires et en optimisant son performances.