Guide rapide pour installer Optimizely CMS 12 localement

Optimizely CMS 12 fonctionne sur .NET 6, 7 ou 8, ce qui le rend compatible avec les outils et frameworks de développement les plus récents. Que vous évaluiez la plateforme pour un nouveau projet ou que vous vous familiarisiez avec celle-ci pour un projet existant, avoir une installation locale vous permet d'expérimenter, de construire et de tester sans affecter les environnements en production.

Prérequis pour la configuration locale d'Optimizely CMS 12

Avant de commencer l'installation, vous aurez besoin de plusieurs outils installés sur votre machine. La plupart des développeurs en auront déjà quelques-uns, mais ça vaut la peine de vérifier que vous avez tout ce qu'il faut.

Logiciels requis

1. SDK .NET (Version 6.0, 7.0 ou 8.0)
La base pour faire fonctionner Optimizely CMS 12. Téléchargez la version qui correspond aux exigences de votre projet depuis la page de téléchargement .NET de Microsoft. La version 8.0 est recommandée pour les nouveaux projets.

2. Visual Studio 2022 ou 2023
Bien que vous puissiez utiliser d'autres éditeurs, Visual Studio offre la meilleure expérience de développement pour Optimizely. L'édition Community gratuite fonctionne parfaitement. Téléchargez-la depuis le site web de Visual Studio.

3. SQL Server Express ou Developer Edition
Optimizely stocke son contenu dans une base de données SQL. SQL Server Express est gratuit et suffisant pour le développement local. Obtenez-le depuis les téléchargements SQL Server de Microsoft.

4. SQL Server Management Studio (SSMS)
Cet outil vous aide à gérer vos bases de données visuellement. Bien qu'il ne soit pas strictement requis, il facilite grandement le dépannage des problèmes de base de données. Téléchargez-le depuis la page SSMS de Microsoft.

Optionnel mais utile

Node.js - Si votre projet utilise des outils de compilation JavaScript ou des frameworks. Téléchargez depuis nodejs.org.

IIS (Internet Information Services) - Pour tester dans un environnement similaire à la production. Activez-le via les fonctionnalités Windows.

Droits d'administrateur - Vous en aurez besoin pour certaines étapes d'installation, particulièrement lorsque vous travaillez avec IIS.

Mise en œuvre étape par étape

Étape 1 : Installer les modèles Optimizely et les outils CLI

Ouvrez PowerShell ou l'invite de commande en tant qu'administrateur. D'abord, installez les modèles de projet Optimizely :

dotnet new -i EPiServer.Templates

Ensuite, installez l'outil CLI d'Optimizely qui aide à gérer les bases de données et les utilisateurs :

dotnet tool install EPiServer.Net.Cli --global --add-source https://nuget.optimizely.com/feed/packages.svc/

L'installation de l'outil CLI pourrait prendre une minute ou deux. Une fois terminé, vous pouvez vérifier que ça fonctionne en exécutant :

dotnet-episerver --version

Étape 2 : Créer votre projet Optimizely

Vous avez deux options principales ici : commencer avec le site de démonstration Alloy (recommandé pour l'apprentissage) ou créer un projet vide.

Pour le site de démonstration Alloy avec du contenu et des pages d'exemple :

dotnet new epi-alloy-mvc -n MyOptiSite
cd MyOptiSite

Pour un projet vierge sans aucun contenu d'exemple :

dotnet new epi-cms-empty -n MyOptiSite
cd MyOptiSite

Le modèle Alloy inclut des exemples de types de pages, de blocs et de contenu qui vous aident à comprendre comment les structures Optimizely fonctionnent.

Étape 3 : Configurer votre connexion à la base de données

Par défaut, les nouveaux projets utilisent un fichier LocalDB .mdf. Nous avons constaté qu'utiliser une instance SQL Server complète offre de meilleures performances et moins de problèmes de connexion pendant le développement.

D'abord, supprimez tous les fichiers .mdf dans le dossier App_Data de votre projet.

Ouvrez appsettings.Development.json à la racine de votre projet et mettez à jour la chaîne de connexion :

{
  "ConnectionStrings": {
    "EPiServerDB": "Server=localhost;Database=OptiCms12;Trusted_Connection=True;MultipleActiveResultSets=True"
  }
}

Ajustez la valeur Server selon votre installation SQL Server :

• localhost pour les installations SQL Server par défaut
• localhost\SQLEXPRESS pour SQL Express
• (localdb)\MSSQLLocalDB pour LocalDB

Étape 4 : Créer la base de données

Utilisez le CLI d'Optimizely pour créer et configurer votre base de données :

dotnet-episerver create-cms-database MyOptiSite.csproj -S localhost -E -dn OptiCms12

Décortiquons ces paramètres :

• -S localhost spécifie votre instance SQL Server
• -E utilise l'authentification Windows (aucun mot de passe requis)
• -dn OptiCms12 nomme votre base de données

Si vous préférez l'authentification SQL au lieu de l'authentification Windows, remplacez -E par -U nomutilisateur -P motdepasse.

Étape 5 : Créer un utilisateur administrateur

Chaque CMS a besoin d'au moins un utilisateur administrateur. Créez-en un en utilisant le CLI :

dotnet-episerver add-admin-user MyOptiSite.csproj -u admin -e [email protected] -p StrongPassword123! -c EPiServerDB

Paramètres expliqués :

• -u admin définit le nom d'utilisateur
• -e [email protected] définit l'adresse courriel
• -p StrongPassword123! définit le mot de passe (rendez-le robuste!)
• -c EPiServerDB référence le nom de votre chaîne de connexion

Étape 6 : Compiler et exécuter votre site

Maintenant vous êtes prêt à compiler et lancer votre site :

dotnet build
dotnet run

Votre site démarrera et affichera les URL dans la sortie de la console, typiquement :

• https://localhost:5001
• http://localhost:5000

Visitez l'URL HTTPS dans votre navigateur. Pour accéder à l'interface éditoriale du CMS, ajoutez /episerver/cms à l'URL : https://localhost:5001/episerver/cms

Connectez-vous avec les identifiants administrateur que vous avez créés à l'étape 5.

Exemples de code avec explications

Une fois votre site en marche, vous voudrez ajouter des fonctionnalités personnalisées. Voici comment créer un type de page de base que les éditeurs peuvent utiliser pour créer du contenu.

Créer un type de page simple

Créez un nouveau fichier Models/Pages/ArticlePage.cs :

using EPiServer.Core;
using EPiServer.DataAnnotations;
using System.ComponentModel.DataAnnotations;

namespace MyOptiSite.Models.Pages
{
    [ContentType(
        DisplayName = "Article Page", 
        GUID = "3e7c4f7e-1234-4567-8901-123456789abc", 
        Description = "Use this page type for articles and blog posts")]
    public class ArticlePage : PageData
    {
        [CultureSpecific]
        [Display(
            Name = "Article Title",
            Description = "The main headline of your article",
            GroupName = SystemTabNames.Content,
            Order = 10)]
        public virtual string ArticleTitle { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Article Body",
            Description = "The main content of your article",
            GroupName = SystemTabNames.Content,
            Order = 20)]
        public virtual XhtmlString ArticleBody { get; set; }

        [Display(
            Name = "Publish Date",
            Description = "When this article was published",
            GroupName = SystemTabNames.Content,
            Order = 30)]
        public virtual DateTime PublishDate { get; set; }
    }
}

Après avoir ajouté ce code, recompilez votre projet. Le nouveau type de page apparaîtra dans le CMS lorsque les éditeurs créeront de nouvelles pages.

Ajouter un contrôleur pour votre type de page

Créez Controllers/ArticlePageController.cs :

using EPiServer.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using MyOptiSite.Models.Pages;

namespace MyOptiSite.Controllers
{
    public class ArticlePageController : PageController<ArticlePage>
    {
        public IActionResult Index(ArticlePage currentPage)
        {
            // Add any logic needed before rendering
            return View(currentPage);
        }
    }
}

Créer la vue

Ajoutez une vue correspondante dans Views/ArticlePage/Index.cshtml :

<article>
    <h1>@Model.ArticleTitle</h1>
    <time datetime="@Model.PublishDate.ToString("yyyy-MM-dd")">
        @Model.PublishDate.ToString("MMMM d, yyyy")
    </time>
    <div class="article-content">
        @Html.Raw(Model.ArticleBody)
    </div>
</article>

Erreurs courantes à éviter

Problèmes de connexion à la base de données

Le problème le plus fréquent que rencontrent les développeurs est la connectivité de la base de données. Si vous voyez des erreurs de connexion :

• Vérifiez que SQL Server est en cours d'exécution (vérifiez les Services Windows)
• Confirmez que votre chaîne de connexion correspond au nom de votre instance SQL Server
• Testez la connexion en utilisant SQL Server Management Studio
• Vérifiez que le Pare-feu Windows ne bloque pas SQL Server

Notre expérience montre qu'utiliser l'authentification Windows (Trusted_Connection=True) élimine la plupart des problèmes d'authentification pendant le développement local.

Conflits de ports

Si vous obtenez une erreur « port déjà utilisé » lors de l'exécution de votre site, une autre application utilise le port 5000 ou 5001. Corrigez ceci en modifiant Properties/launchSettings.json :

{
  "profiles": {
    "MyOptiSite": {
      "applicationUrl": "https://localhost:5003;http://localhost:5002"
    }
  }
}

Source de package NuGet manquante

Les packages Optimizely proviennent de leur propre flux NuGet. Si Visual Studio ne trouve pas les packages, ajoutez la source Optimizely :

• Dans Visual Studio, allez dans Outils → Gestionnaire de packages NuGet → Paramètres du gestionnaire de packages
• Cliquez sur Sources de packages
• Ajoutez une nouvelle source :
  • Nom : Optimizely
  • Source : https://api.nuget.optimizely.com/v3/index.json

Oublier de créer un utilisateur administrateur

Sans utilisateur administrateur, vous ne pouvez pas accéder à l'interface CMS. Si vous oubliez cette étape, le site fonctionnera mais vous ne pourrez pas vous connecter. Créez toujours au moins un utilisateur administrateur en utilisant la commande CLI montrée à l'étape 5.

Utiliser des versions .NET obsolètes

Optimizely CMS 12 requiert .NET 6 ou plus récent. Si vous avez une version plus ancienne, vous verrez des erreurs de compilation concernant des références de framework manquantes. Mettez à jour votre SDK .NET pour corriger ceci.

Étapes de test et de vérification

Après l'installation, vérifiez que tout fonctionne correctement avec ces vérifications :

1. Le site se charge correctement

Naviguez vers la page d'accueil de votre site. Vous devriez voir soit le contenu de démonstration Alloy, soit une page de base (selon le modèle que vous avez utilisé).

2. La connexion au CMS fonctionne

Visitez /episerver/cms et connectez-vous avec vos identifiants administrateur. Vous devriez voir l'interface éditoriale avec la navigation sur le côté gauche.

3. Créer du contenu de test

Dans le CMS, créez une nouvelle page :

• Cliquez sur l'icône du globe (Sites)
• Faites un clic droit sur la racine de votre site
• Sélectionnez « Nouvelle page »
• Choisissez un type de page
• Remplissez les champs requis
• Cliquez sur « Publier »

Les équipes avec lesquelles nous travaillons rapportent que tester la création de contenu immédiatement aide à identifier tout problème de permission ou de configuration avant qu'ils ne deviennent des problèmes plus tard.

4. Connectivité de la base de données

Ouvrez SQL Server Management Studio et connectez-vous à votre base de données. Vous devriez voir des tables préfixées avec tbl_ contenant vos données CMS.

5. Compiler sans erreurs

Exécutez une recompilation propre pour vous assurer qu'il n'y a pas de problèmes de compilation :

dotnet clean
dotnet build

6. Vérifier la console développeur du navigateur

Ouvrez les outils de développement de votre navigateur (F12) et vérifiez l'onglet Console pour des erreurs JavaScript. Le site devrait se charger sans aucun message d'erreur rouge.

Optionnel : Configurer IIS pour des tests similaires à la production

Bien que Kestrel (le serveur web intégré) fonctionne très bien pour le développement, vous pourriez vouloir tester avec IIS pour correspondre plus étroitement à votre environnement de production.

Activer IIS

• Ouvrez les fonctionnalités Windows (recherchez « Activer ou désactiver des fonctionnalités Windows »)
• Cochez « Services Internet (IIS) »
• Développez et cochez :
  • Outils d'administration web → Console de gestion IIS
  • Services World Wide Web → Fonctionnalités de développement d'applications → ASP.NET Core

Installer le bundle d'hébergement .NET

Téléchargez et installez le bundle d'hébergement ASP.NET Core depuis la page de téléchargement de Microsoft. Ceci permet à IIS d'exécuter des applications .NET.

Publier votre site

dotnet publish -c Release -o C:\inetpub\wwwroot\MyOptiSite

Configurer IIS

• Ouvrez le Gestionnaire IIS
• Clic droit sur Sites → Ajouter un site web
• Configurez :
  • Nom du site : MyOptiSite
  • Chemin physique : C:\inetpub\wwwroot\MyOptiSite
  • Nom d'hôte : myoptisite.local
• Définissez le pool d'applications sur « Aucun code managé »

Mettre à jour le fichier Hosts

Ajoutez cette ligne à C:\Windows\System32\drivers\etc\hosts :

127.0.0.1   myoptisite.local

Maintenant vous pouvez accéder à votre site sur http://myoptisite.local.

Conclusion

Vous avez maintenant Optimizely CMS 12 qui fonctionne localement avec une base de données fonctionnelle, un accès administrateur et la capacité de créer des types de pages personnalisés. À partir de là, vous pouvez commencer à construire votre structure de contenu, ajouter des fonctionnalités et explorer les capacités de la plateforme.

Le processus de configuration que nous avons couvert vous donne une base solide pour le développement. Vous pouvez créer des types de contenu, tester des flux de travail éditoriaux et développer des fonctionnalités sans affecter les systèmes de production. Rappelez-vous que le développement local ne nécessite aucune licence Optimizely - elles ne sont nécessaires que lorsque vous déployez vers des domaines publics.

Nous avons constaté qu'avoir un environnement local correctement configuré économise d'innombrables heures pendant le développement. Prendre le temps de bien configurer les choses maintenant signifie moins de surprises lorsque vous déployez vers les environnements de préproduction ou de production.

Si vous prévoyez de construire un site de production avec Optimizely CMS 12 et avez besoin d'aide pour les décisions d'architecture, la modélisation de contenu ou la planification du déploiement, notre équipe chez Rollin peut vous guider dans le processus. Nous travaillons avec des entreprises pour concevoir et implémenter des sites Optimizely qui répondent aux besoins spécifiques de gestion de contenu tout en maintenant de bonnes performances et la satisfaction des éditeurs. Contactez-nous pour discuter de la façon dont nous pouvons aider avec votre projet Optimizely CMS 12.