Création et déploiement d'une application ASP.NET Core sous Linux

Microsoft a rendu open source et multiplateforme .NET Core pour permettre aux développeurs utilisant Linux ou OS X d'exploiter sa plateforme de développement, pour créer des applications .NET multiplateformes.

Depuis la sortie de .NET Core en version stable, de nombreuses personnes m'ont déjà posé la question de savoir s'il était possible de créer et déployer un site Web pro avec ASP.NET Core sous un système d'exploitation Linux.

À ce jour, il existe de nombreux outils open source permettant de mettre en place une application .NET Core sous Linux. De plus, il y a déjà plusieurs tutoriels sur Internet sur le développement avec .NET Core.

On va regretter toutefois que ceux-ci soient beaucoup plus centrés sur Windows. Néanmoins, en dehors de l'installation et la configuration des outils qui changent, l'écriture du code reste pareille.

Dans ce tutoriel, nous verrons comment mettre en place et déployer une application ASP.NET Core sous Linux. Je vais utiliser Ubuntu 16.04 LTS.

Cet article ne nécessite pas de connaissances avancées en programmation. Mais un minimum de connaissances en développement Web et plus spécifiquement en ASP.NET MVC est nécessaire pour sa bonne compréhension.

Nous allons utiliser les outils suivants :

• .NET Core ;
• Visual Studio Code ;
• le générateur Yeoman ;
• un navigateur (Firefox, Chrome, etc.) ;
• NGINX ;
• Docker.

III-A. ASP.NET Core▲

III-A-1. Description▲

ASP.NET Core est un Framework multiplateforme permettant de développer des applications Web. Il permet de développer des applications MVC, des API Web et bien plus.

ASP.NET Core est bâti sur la modularité pour permettre de développer des applications optimisées pour le Cloud. Ainsi, il offre un modèle flexible permettant de déployer son application avec le minimum requis pour son exécution.

III-A-2. Installation▲

ASP.NET Core est livré avec .NET Core. Pour disposer du framework, vous devez simplement installer ce dernier. Pour la rédaction de cet article, j'ai utilisé la version 1.0.x de .NET Core. Il s'agit de la version bénéficiant d'un support LTS (Long Term Support) de la part de Microsoft.

Exécutez dans un premier temps les commandes suivantes, pour mettre à jour apt-get et prendre en compte l'emplacement où est disponible le package dont nous avons besoin :

 

Sélectionnez

sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos/dotnet-release/ xenial main" > /etc/apt/sources.list.d/dotnetdev.list'
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 417A0893
sudo apt-get update

Exécutez ensuite la commande suivante pour installer .NET Core :

 

Sélectionnez

sudo apt-get install dotnet-dev-1.0.0-preview3-004056

Pour vérifier que votre installation s'est effectuée correctement, exécutez successivement les commandes suivantes :

 

Sélectionnez

mkdir testapp
cd testapp
dotnet new
dotnet restore
dotnet run

Pour rappel :

• Mkdir testapp va permettre de créer un nouveau dossier testapp ;
• Cd testapp va permettre de changer de répertoire pour le répertoire testapp ;
• Dotnet new va créer dans le répertoire testapp un nouveau projet C# de type console ;
• Dotnet restore va utiliser NuGet pour restaurer l'ensemble des packages nécessaires pour exécuter votre application ;
• Dotnet run va lancer l'application, et vous aurez le résultat suivant :

III-B. Visual Studio Code▲

III-B-1. Présentation▲

Visual Studio Code est développé en open source par Microsoft et offre aux développeurs le nécessaire (coloration syntaxique, IntelliSence, débogage) pour créer des applications en utilisant l'OS de leur choix (Windows, Linux ou Mac).

Visual Studio Code supporte de nombreux langages de programmation. Celui-ci évolue assez rapidement avec des mises à jour fréquentes. De plus, le support de la communauté permet à sa galerie d'extensions de grandir rapidement et d'offrir une panoplie d'outils pour étendre les fonctionnalités de l'EDI.

III-B-2. Installation de Visual Studio Code▲

Vous devez télécharger l'outil à l'adresse suivante, en choisissant la version correspondante à votre OS : https://code.visualstudio.com/Download.

Double-cliquez sur le fichier pour l'installer, ou exécutez la commande suivante dans le terminal :

 

Sélectionnez

sudo dpkg -i <file>.deb

Cela fait, vous devez installer l'extension « C# for Visual Studio Code ». Cette extension va permettre d'ajouter la prise en charge du langage C# à l'éditeur de code. Pour l'installer :

• cliquez sur le menu View, puis sur Extensions ;
• dans la fenêtre qui va s'afficher, saisissez dans la barre de recherche c# ;
• cliquez sur Install pour procéder à l'installation de ce dernier.

III-C. Yeoman▲

curl -sL https://deb.nodesource.com/setup_4.x 
sudo -E bash -
sudo apt-get install -y nodejs

node --version && npm --version

npm install -g yo bower

npm install -g generator-aspnet

Exécutez les commandes suivantes pour créer le répertoire des projets :

mkdir projects
cd projects

Cela fait, vous allez exécuter la commande suivante pour créer le projet :

yo aspnet

Le générateur Yeoman va afficher un menu, avec différents modèles de projets. Sélectionnez Web Application Basic [Without Membership and Authorization] :

À l'étape suivante, sélectionnez Bootstrap comme framework d'interface utilisateur :

Pour le nom de l'application, saisissez SampleApp et validez. Dans le dossier Projects, un nouveau dossier SampleApp sera créé avec les fichiers de votre application.

Saisissez la commande suivante pour vous positionner dans le dossier du projet :

Cd sampleapp

Pour exécuter l'application, vous allez effectuer les deux commandes suivantes :

Dotnet restore
Dotnet run

Ouvrez votre navigateur et saisissez le lien ci-dessus dans ce dernier. Vous obtiendrez la page suivante, qui est la page d'accueil de votre application.

L'application est exécutée en utilisant par défaut le serveur Web Kestrel. Ce dernier est un serveur web léger et open source, basé sur libuv. Il s'agit d'une alternative open source a IIS, pour l'exécution d'applications ASP.NET Core sur Windows, Linux et OS X.

Lorsque le serveur web est démarré, il affiche dans le terminal les logs de votre application (exceptions, détails des appels, etc.) lorsque cette dernière est en cours d'exécution.

Arrêtez l'exécution du serveur Web en utilisant la combinaison de touche Ctrl + C.

Ouvrez l'application dans Visual Studio Code. Pour cela, cliquez sur le menu File, puis sur Open Folder, ensuite sélectionnez le répertoire dans lequel a été créée votre application.

Lorsque votre projet va s'ouvrir, Visual Studio Code va essayer de restaurer les dépendances et les fichiers nécessaires pour la génération et le débogage de votre application :

Cliquez sur Yes pour ajouter à votre projet les assets pour le debug et la build.

Pour exécuter l'application dans Visual Studio Code en mode debug, appuyez sur F5.

Votre navigateur par défaut sera automatiquement lancé, avec votre application en cours d'exécution.

Le modèle de projet que nous avons utilisé nous a permis de créer une application ASP.NET Core MVC. Nous allons passer en revue quelques spécificités de ce projet pour comprendre certains aspects clés du Framework.

Visual Studio Code dispose d'un explorateur de fichiers à gauche permettant de visualiser l'ensemble des dossiers et fichiers du projet.

Ci-dessous les dossiers et fichiers clés à maîtriser, ainsi que leur utilité :

• le dossier .vscode est généré par l'éditeur et dispose d'un fichier Launch.json utilisé pour le débogage et un fichier Task.json dans lequel sont référencés les tâches à exécuter (build, test, déploiement, etc.). Par défaut ce fichier contient la tâche de build ;
• Controllers : c'est dans ce dossier que seront regroupés tous les contrôleurs de l'application ;
• le dossier Properties contient un fichier launchSettings.json, qui sera utilisé pour définir les paramètres pour vos différents environnements de travail (environnement de développement, de test, de production, etc.). Il faut noter toutefois que ce fichier est beaucoup plus utilisé par Visual Studio ;
• Views : le dossier Views contient tous les fichiers d'interface (la vue) ;
• wwwroot : le fichier est l'emplacement de sauvegarde du contenu statique (images, css, fichiers JavaScript, etc.) ;
• le fichier appsettings.json est utilisé pour l'enregistrement des paramètres, notamment la chaîne de connexion ;
• le fichier bundleconfig.json est l'emplacement où seront définis les paramètres pour le regroupement et la minification des fichiers JavaScript et CSS ;
• Dockerfile : fichier pour la prise en charge de Docker. Intégré par défaut par le générateur Yeoman ;
• Program.cs : fichier contenant la méthode Main ;
• project.json : ce fichier contient l'ensemble des packages de l'application ;
• startup.cs : fichier de démarrage de l'application qui est utilisé pour enregistrer les services et injecter des modules dans le pipeline HTTP. Nous y reviendrons.

Passons à la prochaine étape de notre tutoriel. Nous allons procéder à la configuration et à l'écriture du code nécessaire pour ajouter Entity Framework dans le projet, et procéder à la génération de la base de données en utilisant l'approche Code First. Nous allons utiliser une base de données SQL Lite.

Ouvrez le fichier project.json de votre application. Ajoutez les deux dépendances suivantes dans la section dependencies :

"Microsoft.EntityFrameworkCore.Sqlite": "1.0.0",
"Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final",
   "Microsoft.EntityFrameworkCore.Design": {
     "version": "1.0.0-preview2-final",
     "type": "build" 
   }

ainsi que la dépendance suivante dans la section tools :

"Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"

Enregistrez le fichier. Visual Studio Code ne sera pas en mesure de résoudre les nouvelles dépendances ajoutées. De ce fait, il va afficher une fenêtre vous invitant à restaurer les assemblies correspondantes. Cliquez sur restore pour lancer le processus.

Votre fichier project.json devrait ressembler à ceci :

{
 "dependencies": {
   "Microsoft.NETCore.App": {
     "version": "1.0.0",
     "type": "platform"
   },
   "Microsoft.AspNetCore.Diagnostics": "1.0.0",
   "Microsoft.AspNetCore.Mvc": "1.0.0",
   "Microsoft.AspNetCore.Razor.Tools": {
     "version": "1.0.0-preview2-final",
     "type": "build"
   },
   "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
   "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
   "Microsoft.AspNetCore.StaticFiles": "1.0.0",
   "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0",
   "Microsoft.Extensions.Configuration.Json": "1.0.0",
   "Microsoft.Extensions.Configuration.CommandLine": "1.0.0",
   "Microsoft.Extensions.Logging": "1.0.0",
   "Microsoft.Extensions.Logging.Console": "1.0.0",
   "Microsoft.Extensions.Logging.Debug": "1.0.0",
   "Microsoft.Extensions.Options.ConfigurationExtensions": "1.0.0",
   "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0",
   "Microsoft.EntityFrameworkCore.Sqlite": "1.0.0",
"Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final",
   "Microsoft.EntityFrameworkCore.Design": {
     "version": "1.0.0-preview2-final",
     "type": "build" 
   }
 },
 
 "tools": {
   "BundlerMinifier.Core": "2.0.238",
   "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
   "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final",
   "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"
 },
 
 "frameworks": {
   "netcoreapp1.0": {
     "imports": [
       "dotnet5.6",
       "portable-net45+win8"
     ]
   }
 },
 
 "buildOptions": {
   "emitEntryPoint": true,
   "preserveCompilationContext": true
 },
 
 "runtimeOptions": {
   "configProperties": {
     "System.GC.Server": true
   }
 },
 
 "publishOptions": {
   "include": [
     "wwwroot",
     "Views",
     "Areas/**/Views",
     "appsettings.json",
     "web.config"
   ]
 },
 
 "scripts": {
   "precompile": [ "dotnet bundle" ],
   "prepublish": [ "bower install" ],
   "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
 },
 
 "tooling": {
   "defaultNamespace": "SampleApp"
 }
}

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore.SQLite">
      <Version>1.0.1</Version>
    </PackageReference>
<PackageReference Include="Microsoft.EntityFrameworkCore.Design">
      <Version>1.0.1</Version>
      <PrivateAssets>All</PrivateAssets>
    </PackageReference>
   <PackageReference Include="Microsoft.EntityFrameworkCore.Tools.Dotnet" Version="1.0.0" />

</ItemGroup>
<ItemGroup>
<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="1.0.0" />
</ItemGroup>

Dotnet migrate

Pour vérifier que la restauration a été effectuée correctement, vous pouvez ouvrir le terminal intégré à Visual Studio Code (cliquez sur le menu View, puis sur Integrated Terminal) et exécuter la commande suivante :

Dotnet ef --help

Cela fait, vous allez ajouter un nouveau dossier en cliquant sur votre application dans l'explorateur de solution, puis sur l'icône de création d'un nouveau dossier.

Vous allez nommer ce dossier Models. C'est dans ce dossier que vous allez créer tous les éléments de votre modèle. Vous allez créer un nouveau fichier User.cs. Pour cela, faites simplement un clic droit sur le dossier Models, puis cliquez sur New File et entrez le nom du fichier (User.cs). Dans ce dernier, saisissez les lignes de code suivantes :

using System;
using System.IO;
 
namespace SampleApp.Models
{
  public class User
  {
 
       public int Id { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
       
      public string Email { get; set; }
  }
 
}

La classe User est une classe entité, qui est une représentation de la table User de votre base de données. Les propriétés seront les colonnes de cette table. Enregistrez les modifications.

Nous allons maintenant créer la classe qui va s'occuper de gérer la communication entre les classes entités et la base de données. Cette classe va hériter de la classe DbContext.

La classe DbContext expose les fonctionnalités les plus couramment utilisées pour interroger et utiliser les données d'entités en tant qu'objets.

Cette classe doit contenir une propriété DbSet fortement typée, correspondant à votre classe entité (user). Les attributs DbSet vont permettre de gérer la correspondance avec les tables de la base de données.

Créez ensuite un fichier SampleAppContext.cs, en procédant de la même façon.

Ajoutez le code suivant dans ce fichier :

using System;
using System.IO;
using Microsoft.EntityFrameworkCore;
 
namespace SampleApp.Models
{
 
public class SampleAppContext : DbContext
  {
      public SampleAppContext(DbContextOptions<SampleAppContext> options)
          : base(options)
      { }
      public DbSet<User> Users { get; set; }
  }
}

Enregistrez les modifications.

Vous allez utiliser l'injection des dépendances qu'offre ASP.NET Core pour enregistrer votre Context. Pour cela, ouvrez le fichier Startup.cs de votre projet. Ajoutez dans un premier temps les références suivantes :

using SampleApp.Models;

using Microsoft.EntityFrameworkCore;

Dans la méthode ConfigureServices, ajoutez la ligne de code suivante :

services.AddEntityFrameworkSqlite()
                .AddDbContext<SampleAppContext>(options => options.UseSqlite(Configuration["Data:DefaultConnection:SqliteConnectionString"]));

Le code de cette méthode est le suivant :

public void ConfigureServices(IServiceCollection services)
 
       {
 
           // Add framework services.
 
            services.AddEntityFrameworkSqlite()
                .AddDbContext<SampleAppContext>(options => options.UseSqlite(Configuration["Data:DefaultConnection:SqliteConnectionString"]));
 
 
           services.AddMvc();
 
       }

Configuration["Data:DefaultConnection:SqliteConnectionString"] permet de récupérer la chaîne de connexion dans le fichier de configuration Appsettings.json. Vous devez donc éditer ce fichier et ajouter les informations suivantes :

"Data": {
    "DefaultConnection": {
       "SqliteConnectionString": "Data Source=sampledb.db"
   }
  }

Enregistrez les modifications et compilez votre application en utilisant la commande suivante, pour vous assurer que tout est correct :

Dotnet build

Passons maintenant à la génération de la base de données en utilisant Code First Migrations. Cette fonctionnalité permet d'appliquer les mises à jour du modèle à la base de données. Elle se résume essentiellement en l'exécution de deux commandes :

• Add-Migration : génère un script de migration correspondant aux modifications qui ont été apportées au modèle ;
• Update-Database : met à jour la base de données en appliquant les migrations en attente.

Vous allez ouvrir la console intégrée de Visual Studio Code et exécuter la commande suivante :

dotnet ef migrations add Initial

Cette commande va créer un dossier Migrations dans votre application avec le script permettant de créer la table User.

Exécutez la commande suivante pour appliquer ce script. Comme la base de données n'existe pas, elle sera automatiquement créée :

dotnet ef database update

Cela fait, nous allons créer le contrôleur avec les méthodes d'action permettant de consulter, créer, modifier et supprimer un utilisateur. Malheureusement, avec Visual Studio Code, nous ne disposons pas du scaffolding CRUD pour générer le code de notre contrôleur avec ses méthodes d'action et les vues correspondantes.

Toutefois, pour ajouter un nouveau contrôleur à notre application, nous allons utiliser Yeoman. Ouvrez le terminal et exécutez la commande suivante :

Yo aspnet:MvcController UsersController

Cette commande va créer dans le dossier Controllers le fichier UsersController.cs, avec le code suivant :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
 
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
 
namespace SampleApp.Controllers
{
   public class UsersController : Controller
   {
       // GET: /<controller>/
       public IActionResult Index()
       {
           return View();
       }
   }
}

Ajoutez dans un premier temps les références suivantes dans le fichier UsersController :

using Microsoft.EntityFrameworkCore;
using SampleApp.Models;

Supprimez ensuite la méthode Index() :

// GET: /<controller>/
       public IActionResult Index()
       {
           return View();
       }

Vous allez déclarer une nouvelle propriété de type SampleAppContext :

private readonly SampleAppContext _context;

Ensuite, vous devez ajouter un constructeur à votre contrôleur, qui prend en paramètre un objet de type de SampleAppContext, et l'affecte à cette propriété :

public UsersController(SampleAppContext context)
      {
          _context = context;    
      }

Le code complet de votre contrôleur devrait ressembler à ceci :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc;
using SampleApp.Models;
 
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
 
namespace SampleApp.Controllers
{
   public class UsersController : Controller
   {
        private readonly SampleAppContext _context;
      public UsersController(SampleAppContext context)
      {
          _context = context;    
      }
   }
}

Nous allons maintenant créer les méthodes d'action et les vues permettant d'effectuer les opérations CRUD sur la table Users. Vous allez créer un nouveau dossier Users dans le dossier View. Avant de se lancer, nous allons dans un premier temps nous familiariser avec les Tag Helpers, qui nous permettront de construire nos formulaires.

X-A. Comprendre les Tag Helpers▲

<input asp-for="FirstName" class="form-control" />

<input class="form-control" data-val="true" data-val-required="The First name field is required." id="FirstName" name="FirstName" value="" type="text"></input>

[Required]
[Display(Name = "First Name")]
 public string FirstName { get; set; }

<span asp-validation-for="FirstName" class="text-danger" />

<span class="field-validation-valid"
  data-valmsg-for="FirstName"
  data-valmsg-replace="true"></span>

<span asp-validation-for="LastName" class="text-danger" />

[MinLength(5)]
[MaxLength(1024)]
public string Description { get; set; }

<textarea asp-for="Description"></textarea>

<textarea data-val="true"
   data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;1024&#x27;."
   data-val-maxlength-max="1024"
   data-val-minlength="The field Description must be a string or array type with a minimum length of &#x27;5&#x27;."
   data-val-minlength-min="5"
   id="Description" name="Description">
  </textarea>

<label asp-for="FirstName" class="col-md-2 control-label"></label>

<label asp-for="FirstName" class="col-md-2 control-label"></label>

<form asp-controller="User" asp-action="Create" method="post">
    
</form>

<form method="post" action="/User/Create">
     <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
    </form>

<a asp-controller="User" asp-action="Create">New User</a>

<a href="/User/Create">New User</a>

<a asp-controller="User" asp-action="Edit" asp-route-id="2">Edit</a>

<a href="/User/Edit/2">Edit</a>

X-B. Création de la méthode d'action et la vue Index▲

Ouvrez le fichier UsersController et ajoutez la méthode d'action suivante à ce dernier :

 

Sélectionnez

// GET: Users
      public async Task<IActionResult> Index()
      {
          return View(await _context.Users.ToListAsync());
      }

Cette méthode d'action permet de retourner la liste des utilisateurs de la base de données.

Nous allons créer la vue Index.cshtml permettant d'afficher cette liste. Pour le faire, ouvrez le terminal intégré à Visual Studio Code et exécutez la commande suivante :

 

Sélectionnez

yo aspnet:MvcView Users/Index

Ouvrez ce fichier et remplacez son contenu par le code suivant :

 

Sélectionnez

@model IEnumerable<SampleApp.Models.User>

@{
 
   ViewData["Title"] = "Index";
 
}

<h2>Index</h2>

<p>
 
   <a asp-action="Create">Create New</a>
 
</p>
 
<table class="table">
 
   <thead>
 
       <tr>
 
           
 
           <th>
 
               @Html.DisplayNameFor(model => model.FirstName)
 
           </th>
 
           <th>
 
               @Html.DisplayNameFor(model => model.LastName)
 
           </th>
 
           <th>
 
               @Html.DisplayNameFor(model => model.Email)
 
           </th>
 
           <th></th>
 
       </tr>
 
   </thead>
 
   <tbody>
 
@foreach (var item in Model) {
 
       <tr>
 
           <td>
 
               @Html.DisplayFor(modelItem => item.FirstName)
 
           </td>
 
           <td>
 
               @Html.DisplayFor(modelItem => item.LastName)
 
           </td>
 
           <td>
 
               @Html.DisplayFor(modelItem => item.Email)
 
           </td>
 
           <td>
 
               <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
 
               <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
 
               <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
 
           </td>
 
       </tr>
 
}
 
   </tbody>
 
</table>

Exécutez l'application en utilisant la touche F5 du clavier. Dans le navigateur, ajoutez /users à la suite du lien dans la barre d'adresse. Vous aurez le résultat suivant :

FirstName et LastName ont besoin d'un formatage. Dans le formulaire, nous devons en principe avoir First Name et Last Name. Pour ne pas avoir à faire cette modification dans la vue, et de ce fait dans toutes les vues où ces champs sont utilisés, nous allons utiliser l'attribut [Display] des DataAnnotations dans la classe User :

 

Sélectionnez

[Display(Name = "First Name")]
      public string FirstName { get; set; }
     
      [Display(Name = "Last Name")]
      public string LastName { get; set; }

Enregistrez les modifications et exécutez à nouveau votre application. Vous aurez le résultat suivant :

X-C. Création des méthodes d'action et la vue Create▲

Pour l'insertion, il y aura deux méthodes d'action. La première sera appelée suite à une requête Get et permettra d'afficher le formulaire d'insertion. La seconde sera appelée suite à une requête Post, et permettra d'enregistrer les informations contenues dans le formulaire. Le code pour ces deux méthodes d'action est le suivant :

 

Sélectionnez

  // GET: Users/Create
      public IActionResult Create()
      {
          return View();
      }
      // POST: Users/Create
      [HttpPost]
      [ValidateAntiForgeryToken]
      public async Task<IActionResult> Create([Bind("Id,Email,FirstName,LastName")] User User)
      {
          if (ModelState.IsValid)
          {
              _context.Add(User);
              await _context.SaveChangesAsync();
              return RedirectToAction("Index");
          }
          return View(User);
      }

Pour créer la vue Create.cshtml, exécutez la commande suivante dans le terminal :

 

Sélectionnez

yo aspnet:MvcView Users/Create

Remplacez son contenu par le code suivant :

 

Sélectionnez

@model SampleApp.Models.User
 
@{
 
   ViewData["Title"] = "Create";
 
}
 
<h2>Create</h2>
 
<form asp-action="Create">
 
   <div class="form-horizontal">
 
       <h4>User</h4>
 
       <hr />
 
       <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
      
 
       <div class="form-group">
 
           <label asp-for="FirstName" class="col-md-2 control-label"></label>
 
           <div class="col-md-10">
 
               <input asp-for="FirstName" class="form-control" />
 
               <span asp-validation-for="FirstName" class="text-danger" />
 
           </div>
 
       </div>
 
       <div class="form-group">
 
           <label asp-for="LastName" class="col-md-2 control-label"></label>
 
           <div class="col-md-10">
 
               <input asp-for="LastName" class="form-control" />
 
               <span asp-validation-for="LastName" class="text-danger" />
 
           </div>
 
       </div>
 
       <div class="form-group">
 
           <label asp-for="Email" class="col-md-2 control-label"></label>
 
           <div class="col-md-10">
 
               <input asp-for="Email" class="form-control" />
 
               <span asp-validation-for="Email" class="text-danger" />
 
           </div>
 
       </div>
 
       <div class="form-group">
 
           <div class="col-md-offset-2 col-md-10">
 
               <input type="submit" value="Create" class="btn btn-default" />
 
           </div>
 
       </div>
 
   </div>
 
</form>
 
<div>
 
   <a asp-action="Index">Back to List</a>
 
</div>
 
@section Scripts {
 
   @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 
}

Cela fait, lancez le débogage de l'application (F5), saisissez le lien pour accéder à la page Users et cliquez sur Create New. Oops. On obtient une exception :

Cette exception est due au fait que vous appelez une vue partielle dans la vue Create.cshtml, qui n'existe pas.

 

Sélectionnez

@section Scripts {
 
   @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 
}

Ce fichier doit permettre de charger les scripts (css et js) qui seront utilisés pour valider les informations du formulaire. Par exemple, le nom et le prénom qui doivent être obligatoires, ou encore le format de l'adresse mail.

Vous devez donc créer le fichier _ValidationScriptsPartial.cshtml dans le dossier View/Shared en utilisant la commande suivante :

 

Sélectionnez

Yo aspnet:MvcView Shared/_ValidationScriptsPartial

Ouvrez ce fichier et remplacez son contenu par le suivant :

 

Sélectionnez

<environment names="Development">
 
   <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
 
   <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
 
</environment>
 
<environment names="Staging,Production">
 
   <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"
 
           asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
 
           asp-fallback-test="window.jQuery && window.jQuery.validator">
 
   </script>
 
   <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"
 
           asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
 
           asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive">
 
   </script>
 
</environment>

Cela fait, vous allez encore modifier le fichier User.cs et ajouter les attributs [Require] et [DataType(DataType.EmailAddress)] pour la validation :

 

Sélectionnez

      [Required]
      [Display(Name = "First Name")]
      public string FirstName { get; set; }
     
      [Required]
      [Display(Name = "Last Name")]
      public string LastName { get; set; }
       
       [Required]
       [DataType(DataType.EmailAddress)]
      public string Email { get; set; }

Cela fait, exécutez de nouveau votre application et affichez la page Create (http://localhost:5000/users/Create). Si vous cliquez sur le bouton Create sans remplir les champs, vous aurez les erreurs suivantes :

Si vous remplissez correctement les champs, les informations seront enregistrées et vous serez redirigé vers la page d'accueil avec la liste des utilisateurs :

Vous remarquez la présence des liens Edit, Details et Delete. Nous devons écrire les méthodes pour ces derniers.

X-D. Création des méthodes d'action et la vue pour Edit▲

Nous aurons également deux méthodes d'action pour Edit. La première (Get) qui affiche le formulaire d'édition prérempli avec les informations sur l'utilisateur à modifier, et la seconde (Post) qui permettra d'enregistrer les modifications. Voici le code pour ces deux méthodes d'action :

 

Sélectionnez

// GET: Users/Edit/5
      public async Task<IActionResult> Edit(int? id)
      {
          if (id == null)
          {
              return NotFound();
          }
          var User = await _context.Users.SingleOrDefaultAsync(m => m.Id == id);
          if (User == null)
          {
              return NotFound();
          }
          return View(User);
      }

      // POST: Users/Edit/5
       [HttpPost]
      [ValidateAntiForgeryToken]
      public async Task<IActionResult> Edit(int id, [Bind("Id,Email,FirstName,LastName")] User User)
      {
          if (id != User.Id)
          {
              return NotFound();
          }
          if (ModelState.IsValid)
          {
              try
              {
                  _context.Update(User);
                  await _context.SaveChangesAsync();
              }
              catch (DbUpdateConcurrencyException)
              {
                  if (!UserExists(User.Id))
                  {
                      return NotFound();
                  }
                  else
                  {
                      throw;
                  }
              }
              return RedirectToAction("Index");
          }
          return View(User);
      }

 private bool UserExists(int id)
      {
          return _context.Users.Any(e => e.Id == id);
      }

Utilisez le terminal pour créer le fichier Edit.cshtml (yo aspnet:MvcView Users/Edit) et remplacez son contenu par :

 

Sélectionnez

@model SampleApp.Models.User
 
@{
 
   ViewData["Title"] = "Edit";
 
}

<h2>Edit</h2>

<form asp-action="Edit">
 
   <div class="form-horizontal">
 
       <h4>User</h4>
 
       <hr />
 
       <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
   <input type="hidden" asp-for="Id" />
 
      
 
       <div class="form-group">
 
           <label asp-for="FirstName" class="col-md-2 control-label"></label>
 
           <div class="col-md-10">
 
               <input asp-for="FirstName" class="form-control" />
 
               <span asp-validation-for="FirstName" class="text-danger" />
 
           </div>
 
       </div>
 
       
 
       <div class="form-group">
 
           <label asp-for="LastName" class="col-md-2 control-label"></label>
 
           <div class="col-md-10">
 
               <input asp-for="LastName" class="form-control" />
 
               <span asp-validation-for="LastName" class="text-danger" />
 
           </div>
 
       </div>

        <div class="form-group">
 
           <label asp-for="Email" class="col-md-2 control-label"></label>
 
           <div class="col-md-10">
 
               <input asp-for="Email" class="form-control" />
 
               <span asp-validation-for="Email" class="text-danger" />
 
           </div>
 
       </div>
 
       <div class="form-group">
 
           <div class="col-md-offset-2 col-md-10">
 
               <input type="submit" value="Save" class="btn btn-default" />
 
           </div>
 
       </div>
 
   </div>
 
</form>

<div>
 
   <a asp-action="Index">Back to List</a>
 
</div>

@section Scripts {
 
   @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 
}

En exécutant l'application et en cliquant sur Edit dans la liste des utilisateurs, vous obtiendrez le résultat suivant :

X-E. Création de la méthode d'action et la vue Detail▲

La méthode d'action Detail prend en paramètre l'ID de l'utilisateur et retourne les informations concernant ce dernier. Son code est le suivant :

 

Sélectionnez

// GET: Users/Details/5
      public async Task<IActionResult> Details(int? id)
      {
          if (id == null)
          {
              return NotFound();
          }
          var User = await _context.Users.SingleOrDefaultAsync(m => m.Id == id);
          if (User == null)
          {
              return NotFound();
          }
          return View(User);
      }

Ajoutez ce code au contrôleur Users et enregistrez les modifications.

Créez ensuite la vue Details.cshtml (yo aspnet:MvcView Details) et remplacez son contenu par le suivant :

 

Sélectionnez

@model SampleApp.Models.User

@{
 
   ViewData["Title"] = "Details";
 
}

<h2>Details</h2>

<div>
 
   <h4>User</h4>
 
   <hr />
 
   <dl class="dl-horizontal">
 
       
 
       <dt>
 
           @Html.DisplayNameFor(model => model.FirstName)
 
       </dt>
 
       <dd>
 
           @Html.DisplayFor(model => model.FirstName)
 
       </dd>
 
       <dt>
 
           @Html.DisplayNameFor(model => model.LastName)
 
       </dt>
 
       <dd>
 
           @Html.DisplayFor(model => model.LastName)
 
       </dd>
 
       <dt>
 
           @Html.DisplayNameFor(model => model.Email)
 
       </dt>
 
       <dd>
 
           @Html.DisplayFor(model => model.Email)
 
       </dd>
 
   </dl>
 
</div>
 
<div>
 
   <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
 
   <a asp-action="Index">Back to List</a>
 
</div>

Enregistrez les modifications et lancez le débogage de l'application (F5). Dans la liste des utilisateurs, cliquez sur Details. Vous obtiendrez le résultat suivant :

X-F. Création des méthodes d'action et la vue Delete▲

Pour la suppression, nous aurons également deux méthodes d'action. L'une pour retourner, suite à une requête Get, les informations à supprimer, et l'autre qui effectuera la suppression lorsque l'utilisateur cliquera sur le bouton delete. Le code, à ajouter au fichier UsersController.cs pour ces méthodes d'action, est le suivant :

 

Sélectionnez

// GET: Users/Delete/5
      public async Task<IActionResult> Delete(int? id)
      {
          if (id == null)
          {
              return NotFound();
          }
          var User = await _context.Users.SingleOrDefaultAsync(m => m.Id == id);
          if (User == null)
          {
              return NotFound();
          }
          return View(User);
      }
      // POST: Users/Delete/5
      [HttpPost, ActionName("Delete")]
      [ValidateAntiForgeryToken]
      public async Task<IActionResult> DeleteConfirmed(int id)
      {
          var User = await _context.Users.SingleOrDefaultAsync(m => m.Id == id);
          _context.Users.Remove(User);
          await _context.SaveChangesAsync();
          return RedirectToAction("Index");
      }

Créez ensuite la vue Delete.cshtml (yo aspnet:MvcView Delete) et remplacez son contenu par le suivant :

 

Sélectionnez

@model SampleApp.Models.User

@{
 
   ViewData["Title"] = "Delete";
 
}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>
 
<div>
 
   <h4>User</h4>
 
   <hr />
 
   <dl class="dl-horizontal">
 
       
 
       <dt>
 
           @Html.DisplayNameFor(model => model.FirstName)
 
       </dt>
 
       <dd>
 
           @Html.DisplayFor(model => model.FirstName)
 
       </dd>
 
       <dt>
 
           @Html.DisplayNameFor(model => model.LastName)
 
       </dt>
 
       <dd>
 
           @Html.DisplayFor(model => model.LastName)
 
       </dd>
 
       <dt>
 
           @Html.DisplayNameFor(model => model.Email)
 
       </dt>
 
       <dd>
 
           @Html.DisplayFor(model => model.Email)
 
       </dd>
 
   </dl>
 
   
 
   <form asp-action="Delete">
 
       <div class="form-actions no-color">
 
           <input type="submit" value="Delete" class="btn btn-default" /> |
 
           <a asp-action="Index">Back to List</a>
 
       </div>
 
   </form>
 
</div>

À l'exécution et suite à un clic sur Delete dans la liste des utilisateurs, vous aurez le résultat suivant :

Pour finir, vous allez modifier le fichier _Layout.cshtml (Views/Shared) et ajouter la ligne de code suivante :

 

Sélectionnez

<li><a asp-area="" asp-controller="Users" asp-action="Index">Users</a></li>

juste après la ligne de code :

 

Sélectionnez

<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>

ce qui produit le résultat suivant à l'exécution :

Kestrel offre de bonnes performances pour le rendu du contenu dynamique. Mais c'est un serveur démuni de nombreuses fonctionnalités. Il est essentiellement dédié au développement.

Dans un environnement de production, il doit être couplé avec d'autres serveurs, dont IIS ou Nginx, qui apporteront des fonctionnalités additionnelles. Dans notre cas, nous allons configurer Nginx pour utiliser ce dernier comme reverse proxy, afin d'offrir des fonctionnalités supplémentaires comme le rendu du contenu statique, la mise en cache ou encore la compression des requêtes.

XI-A. Installation de Nginx▲

sudo apt-get install nginx

sudo service nginx start

XI-B. Configuration de Nginx▲

sudo -i gedit /etc/nginx/sites-available/default

server {
   listen 80;
   location / {
       proxy_pass http://localhost:5050;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection keep-alive;
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
   }
}

sudo nginx -t
sudo nginx -s reload

{
 "server.urls": "http://localhost:5050"
}

var config = new ConfigurationBuilder()
           .SetBasePath(Directory.GetCurrentDirectory())
           .AddJsonFile("hosting.json", optional: true)
               .AddCommandLine(args)
               .AddEnvironmentVariables(prefix: "ASPNETCORE_")
               .Build();

"publishOptions": {
   "include": [
     "wwwroot",
     "Views",
     "Areas/**/Views",
     "appsettings.json",
     "web.config",
     "hosting.json"
   ]
 },

Dotnet build
Dotnet run

XI-C. Publication de l'application et configuration du superviseur▲

dotnet publish

publish: Published to /home/hinault/projects/SampleApp/bin/Debug/netcoreapp1.0/publish

sudo cp -a /home/hinault/projects/SampleApp/bin/Debug/netcoreapp1.0/publish /var/www/sampleapp

sudo apt-get install supervisor

[program:sampleapp]
command=/usr/bin/dotnet /var/www/sampleapp/SampleApp.dll
directory=/var/www/sampleapp/
autostart=true
autorestart=true
stderr_logfile=/var/log/sampleapp.err.log
stdout_logfile=/var/log/sampleapp.out.log
environment=HOME=/var/www/,ASPNETCORE_ENVIRONMENT=Production
user=www-data
stopsignal=INT
stopasgroup=true
killasgroup=true

sudo service supervisor stop
sudo service supervisor start

Dans cette section, nous verrons comment utiliser un conteneur Docker pour déployer notre application. Docker est une application open source permettant d'automatiser le déploiement d'applications dans des conteneurs logiciel.

La première chose à faire sera d'installer Docker en utilisant les commandes suivantes :

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 36A1D7869245C8950F966E92D8576A8BA88D21E9
sudo apt-get update
sudo apt-get install lxc-docker

Pour s'assurer que Docker est installé, exécutez la commande suivante :

Docker

ou :

docker run hello-world

La création d'une application ASP.NET Core avec le générateur Yeoman ajoute par défaut à cette dernière un fichier Dockerfile. Le fichier est disponible à la racine du projet et contient les configurations nécessaires pour exécuter votre application dans un conteneur docker :

FROM microsoft/dotnet:latest
 
COPY . /app
 
WORKDIR /app
 
RUN ["dotnet", "restore"]
 
RUN ["dotnet", "build"]
 
EXPOSE 5100/tcp
 
ENTRYPOINT ["dotnet", "run", "--server.urls", "http://0.0.0.0:5100"]

Lorsque nous allons procéder à la build de ce fichier avec Docker, une nouvelle image Docker sera créée. Cette dernière sera basée sur l'image Microsoft/dotnet. Cette image contient la dernière version du SDK .NET Core (le framework .NET Core et les outils en ligne de commande), permettant d'exécuter une application ASP.NET Core. Les fichiers du projet seront ensuite copiés dans un conteneur et ce dernier sera généré par Docker. Les commandes dotnet restore et dotnet build seront exécutées pour restaurer les packages du projet et générer ce dernier.

Puisqu'il s'agit d'une application web, le port sur lequel cette dernière doit être visible doit être défini, ainsi que son URL.

Vous devez exécuter la commande suivante dans le répertoire de votre application pour lancer la build de ce fichier, en spécifiant le nom de votre application après l'argument -t :

sudo docker build -t sampleapp

Cette commande doit s'achever avec le « . ».

XII-A. Exécution de l'application▲

Vous pouvez vérifier que votre image a été créée correctement en utilisant les commandes suivantes :

 

Sélectionnez

sudo docker images

Pour lancer votre application, exécutez simplement la fenêtre suivante :

 

Sélectionnez

sudo docker run -it -p 5100:5100 sampleapp

Une fois votre application en cours d'exécution, vous pouvez ouvrir votre navigateur et saisir son adresse (http://localhost:5100/) pour obtenir un aperçu de cette dernière :

ASP.NET Core et les outils .NET Core sont assez robustes pour permettre la création et le déploiement d'applications Web sur Linux. Dans cet article, nous avons vu à travers un exemple concret comment procéder.

Je tiens à remercier KartSeven pour sa relecture orthographique.

• Documentation officielle ASP.NET Core ;
• Documentation officielle Entity Framework Core ;
• Documentation officielle Visual Studio Code.