Créer et déployer des applications sur la plateforme d’applications DigitalOcean avec un domaine personnalisé

Tutoriels
DNS

Introduction

En tant que développeurs, nous construisons souvent des projets à côté, que ce soit pour le plaisir ou pour apprendre quelque chose de nouveau. Ces projets servent également de preuve de nos compétences.

Vous devriez avoir une preuve de travail. Au-delà de votre code, les utilisateurs devraient pouvoir utiliser votre application, et pour cela, elle ne devrait pas seulement être sur localhost:3000, mais accessible via un lien. Pour y parvenir, vous devez déployer votre application et la mapper vers un domaine personnalisé pour une meilleure lisibilité et un partage facile.

Dans cet article, vous allez découvrir la plateforme d’application DigitalOcean, et voir à quel point il est facile de passer du déploiement d’une application à sa mise en correspondance avec un domaine personnalisé en quelques clics seulement.

Prérequis

  1. Un compte DigitalOcean pour accéder à la plateforme d’application.

  2. Un compte GitHub.

  3. Nom de domaine personnalisé disponible sur NameCheap ou une plateforme similaire.

Qu’est-ce que la plateforme App de DigitalOcean ?

La plateforme App est une plateforme en tant que service (PaaS) entièrement gérée qui aide les développeurs à créer, déployer et faire évoluer des applications facilement. Elle abstractionne une grande partie de la gestion de l’infrastructure, vous permettant de vous concentrer sur le code et le déploiement.

Il peut analyser automatiquement et construire du code à partir de fournisseurs Git tels que GitHub et GitLab, et publier vos applications sur le cloud. Il peut également publier en utilisant des images de conteneur que vous avez déjà téléchargées sur le Registre de conteneurs DigitalOcean ou Docker Hub.

Avec des fonctionnalités telles que la mitigation des attaques DDoS, le patching automatique du système d’exploitation, le dimensionnement vertical, le support HTTP, CDN global et le support de domaine, la Plateforme App rend simple la publication et la gestion de vos applications.

Étape 1 – Déploiement avec la Plateforme App

Une fois l’application prête, vous pouvez la déployer à partir de monorepos, images de conteneurs, ou en utilisant GitHub Actions.

Un monorepo est un référentiel de code versionné qui contient de nombreux projets. Bien que ces projets soient liés, ils sont souvent logiquement indépendants et gérés par des équipes différentes.

Voyons comment nous pouvons déployer des applications en utilisant la Plateforme d’application avec GitHub. Disons que vous avez un dépôt GitHub privé avec un fichier index.html qui contient ce code simple de bonjour monde:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

Déployer en utilisant Github

  • Allez sur la page des Applications et cliquez sur Créer une application.

  • Connectez votre compte GitHub et sélectionnez le dépôt GitHub qui contient votre code source.

  • Dans le champ Répertoire Source, spécifiez le dossier qui contient la source comme indiqué dans l’image ci-dessous. Puisque notre dépôt de démonstration ne contient qu’un fichier index.html dans le répertoire racine, nous allons continuer avec le / par défaut. Si votre code suit une structure monorepo, assurez-vous de choisir le répertoire particulier où se trouve le code.

Sélectionnez auto-déploiement, cela se déploiera automatiquement chaque fois que vous apportez une nouvelle modification:

  • Configurez les ressources pour votre application et cliquez sur Suivant. Voici ce que vous verrez:

  • Ensuite, il effectuera quelques vérifications avant de déployer définitivement l’application. Pour des applications plus complexes, telles que celles utilisant une API, vous devrez peut-être ajouter des variables d’environnement, dans les pages suivantes, vous pourrez les configurer.

  • Dans l’étape suivante, vous pouvez modifier le nom de l’application et choisir la ressource sous laquelle votre application sera déployée.

  • Ensuite, vous cliquez sur Suivant pour afficher la page Revue, où vous pourrez voir d’autres informations liées à l’application telles que la facturation, l’emplacement, etc. Enfin, cliquez sur Créer la ressource pour déployer l’application.

  • Cela prendra quelques minutes. Une fois l’application déployée, vous pourrez voir l’application à l’URL et d’autres détails dans la page Aperçu.

Si vous suivez toutes les étapes ci-dessus, voici à quoi ressemblera votre application : https://sea-lion-app-l8cvv.ondigitalocean.app/.

Étape 2 : Mappage de l’application vers un domaine personnalisé

Maintenant que votre application est déployée avec succès et dispose d’un domaine ondigitalocean.app, dans cette étape, vous verrez comment vous pouvez la mapper vers un domaine personnalisé.

Il existe deux façons d’ajouter un domaine personnalisé à votre application :

  1. Utiliser l’automatisation

  2. Utilisation du panneau de contrôle

Pour cet article, vous verrez comment configurer un domaine personnalisé en utilisant le panneau de contrôle.

  • Connectez-vous auCloud DigitalOcean et sélectionnez l’application à laquelle vous souhaitez ajouter le domaine, puis cliquez sur l’onglet Paramètres.

  • Ensuite, cliquez sur le lien Modifier à droite de Domaines, puis cliquez sur le bouton Ajouter un domaine.

  • Dès que vous commencez à taper le nom de votre domaine dans le champ de texte ci-dessous, vous obtiendrez deux options pour ajouter votre domaine personnalisé.

  • Vous pouvez ajouter le domaine personnalisé soit en utilisant les serveurs de noms de DigitalOcean, soit en utilisant un fournisseur de CNAME.

  • Pour utiliser les serveurs de noms de DigitalOcean, copiez et collez-les (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) dans les enregistrements de serveurs de noms de votre registrar de domaine. Consultez notre tutoriel sur Pointer vers les serveurs de noms de DigitalOcean depuis des registrars de domaine courants pour des conseils sur la délégation de votre domaine aux serveurs de noms de DigitalOcean depuis des registrars populaires.

  • Vous pouvez également ajouter un enregistrement CNAME à votre domaine. Si votre fournisseur DNS n’est pas DigitalOcean, consultez sa documentation pour des instructions. Utilisez le bouton copier pour copier l’alias ondigitalocean.app et le coller dans l’enregistrement CNAME de votre fournisseur DNS pour pointer votre domaine personnalisé vers votre application sur App Platform. Une fois cela fait, cliquez sur le bouton Ajouter un domaine.

Pour des paramètres avancés supplémentaires liés au domaine, consultez notre documentation sur Comment Gérer les Domaines dans la Plateforme App.

Ajout de domaines achetés sur Namecheap

Vous pouvez suivre les étapes ci-dessus pour ajouter des domaines personnalisés achetés sur n’importe quelle plateforme. Pour cet exemple, voyons comment vous configureriez les paramètres pour un domaine acheté sur Namecheap.

  • Connectez-vous à votre compte Namecheap. Cliquez sur Liste des Domaines, sélectionnez le domaine que vous souhaitez ajouter, puis cliquez sur Gérer.

  • Ensuite, allez dans l’onglet DNS Avancé et cliquez sur Ajouter un nouveau enregistrement.

  • Ensuite, allez dans le panneau de contrôle de DigitalOcean et copiez le lien du champ indiqué ci-dessous.

  • Collez-le dans Namecheap et enregistrez vos modifications.

C’est tout ! Maintenant, votre application est associée à votre domaine personnalisé.

Conclusion

Dans cet article, vous avez appris comment déployer vos applications et gérer des domaines personnalisés en utilisant DigitalOcean.

Les domaines personnalisés peuvent aider votre site web à se classer plus haut dans les moteurs de recherche car ils sont uniques et pertinents pour votre marque. Cela rend également plus facile aux gens de se souvenir de l’URL et d’accéder à votre application.

Voici quelques bonnes pratiques à suivre pour un domaine personnalisé :

  • Assurez-vous de la sécurité SSL/TLS, car elle crypte les données et améliore le référencement en fournissant une connexion sécurisée.

  • Surveillez régulièrement la santé du domaine pour détecter les problèmes et maintenir des performances optimales pour les utilisateurs.

  • Créez des sauvegardes pour vous protéger contre la perte de données et permettre une récupération rapide si votre domaine ou site rencontre des problèmes.

Étapes suivantes

Si vous décidez d’interrompre votre application pour une raison quelconque, assurez-vous de supprimer le domaine personnalisé avant de supprimer l’application. Pour le supprimer, accédez au panneau de contrôle, cliquez sur votre application, puis cliquez sur Paramètres. Ensuite, cliquez sur le lien Modifier à droite de Domaines et sur l’élément de menu à trois points (…), et enfin, cliquez sur Supprimer le domaine pour le supprimer.

Voici une liste de ressources qui peuvent s’avérer utiles :

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain