Créer et déployer des applications sur la plate-forme d'application avec un domaine personnalisé

Présentation

En tant que développeurs, nous construisons souvent des projets sur le 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 être en mesure d'utiliser votre application, et pour cela, il ne devrait pas seulement être dans localhost: 3000 , mais accessible via un lien. Pour y parvenir, vous devez déployer votre application et le cartographier dans un domaine personnalisé pour une meilleure lisibilité et un partage facile.

Dans cet article, vous serez présenté sur la plate-forme d'application DigitalOcean et verrez à quel point il est facile de passer du déploiement d'une application pour le cartographier dans un domaine personnalisé en quelques clics.

Condition préalable

Un compte DigitalOcean pour accéder à la plate-forme d'application.
Un compte github.
Domaine personnalisé disponible sur NameCheap ou une plate-forme similaire.

Qu'est-ce que la plate-forme d'application DigitalOcean?

La plate-forme d'application est une plate-forme entièrement gérée en tant que service (PAAS) qui aide facilement les développeurs à créer, déployer et mettre à l'échelle des applications. Il résume une grande partie de la gestion des infrastructures, vous permettant de vous concentrer sur le code et le déploiement.

Il peut analyser et créer automatiquement du code à partir de fournisseurs GIT comme GitHub et GitLab, et publier vos applications au cloud. Il peut également publier à l'aide d'images de conteneurs que vous avez déjà téléchargées dans le registre des conteneurs DigitalOcean ou Docker Hub.

Avec des fonctionnalités telles que l'atténuation DDOS, le correctif automatique du système d'exploitation, la mise à l'échelle verticale, la prise en charge HTTP, la prise en charge globale de CDN et du domaine, la plate-forme d' application facilite la publication et la gestion de vos applications.

Étape 1 - Déploiement à l'aide de la plate-forme d'application

Une fois l'application prête, vous pouvez la déployer à partir de monorepos , des images de conteneur ou à l'aide d'actions GitHub.

Un monorepo est un référentiel de code contrôlé par version qui contient de nombreux projets. Bien que ces projets puissent être liés, ils sont souvent logiquement indépendants et gérés par différentes équipes.

Voyons comment nous pouvons déployer des applications à l'aide de la plate-forme d'application avec GitHub. Disons que vous avez un référentiel GitHub privé avec un fichier index.html qui contient ce simple code mondial:

<!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 à l'aide de GitHub

Accédez à la page Apps et cliquez sur Créer l'application.

Connectez votre compte GitHub, puis sélectionnez le référentiel GitHub qui contient votre code source.

Dans le champ Source Directory , spécifiez le dossier qui contient la source comme indiqué dans l'image ci-dessous. Étant donné que notre référentiel de démonstration ne se compose qu'un fichier index.html dans le répertoire racine, nous allons aller de l'avant 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-Deploy , cela redémarrera automatiquement chaque fois que vous appuyez sur une nouvelle modification:

Configurez les ressources pour votre application et cliquez sur Suivant . C'est ce que vous verrez:

Ensuite, il passera par quelques vérifications avant de déployer enfin l'application. Pour les applications plus compliquées, comme celles utilisant une API, vous devrez peut-être ajouter des variables d'environnement, dans les pages suivantes, vous pouvez les configurer.

Dans la prochaine étape, 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 Review , où vous pouvez voir d'autres informations liées aux applications comme la facturation, l'emplacement, etc. Ensuite, cliquez enfin sur Créer des ressources pour faire déployer l'application.

Cela prendra quelques minutes. Une fois que l'application se déploie, vous pouvez afficher l'application sur l'URL et d'autres détails de la page Présentation .

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

Étape 2: mappage de l'application dans un domaine personnalisé

Maintenant que votre application est déployée avec succès et possède un ondigitalocean.app , dans cette étape, vous verrez comment vous pouvez le cartographier dans un domaine personnalisé.

Il existe deux façons par lesquelles vous pouvez ajouter un domaine personnalisé à votre application:

Utilisation de l'automatisation
Utilisation du panneau de commande

Pour cet article, vous verrez comment vous pouvez configurer le domaine personnalisé à l'aide du panneau de configuration.

Connectez le cloud TodigitalOcean et sélectionnez l'application à laquelle vous souhaitez ajouter le domaine, puis cliquez sur l'onglet Paramètres .
Ensuite, cliquez sur le lien Modifier vers la droite de . Domaines , et cliquez sur le bouton Ajouter un domaine .

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

Vous pouvez soit ajouter le domaine personnalisé à l'aide de serveurs de noms de DigitalOcean ou à l'aide d'un fournisseur CNAME.
Pour utiliser les serveurs de noms de DigitalOcean, copiez-les et collez-les ( ns1.linux-console.net , ns2.linux-console.net , ns3.digitalocean. com ) dans les enregistrements du serveur de noms de votre registraire de domaine. Consultez notre didacticiel sur les serveurs de noms DigitalOcean à partir de registraires de domaine communs pour obtenir des conseils sur la délégation de votre domaine aux serveurs de noms de DigitalOcean à partir de registraires populaires.

Vous pouvez également ajouter un enregistrement CNAME à votre domaine. Si votre fournisseur DNS n'est pas DigitalOcean, consultez leur documentation pour les instructions. Utilisez le bouton copier pour copier le ondigitalocean.app et coller dans l'enregistrement CNAME sur votre fournisseur DNS pour pointer votre domaine personnalisé vers l'application de plate-forme d' application. Une fois terminé, cliquez sur le bouton Ajouter un domaine .

Pour des paramètres plus avancés liés au domaine, reportez-vous à notre documentation sur la façon de gérer les domaines dans la plate-forme d'application.

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 plate-forme. Pour cet exemple, voyons comment vous configureriez les paramètres d'un domaine acheté sur namecheap.

Connectez-vous à votre compte Namecheap. Cliquez sur liste de domaine , sélectionnez le domaine que vous souhaitez ajouter, puis cliquez sur gérer .
Déplacez-vous ensuite vers l'onglet DNS Advanced et cliquez sur Ajouter un nouvel enregistrement .

Ensuite, accédez au panneau de configuration de DigitalOcean et copiez le lien du champ ci-dessous.

Collez-le dans Namecheap et enregistrez vos modifications.

C’est tout! Maintenant, vous avez votre application mappée sur votre domaine personnalisé.

Conclusion

Dans cet article, vous avez appris à déployer vos applications et à gérer des domaines personnalisés à l'aide de 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. Il est également plus facile pour les gens de se souvenir de l'URL et d'accès à votre application.

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

Assurer la sécurité SSL/TLS, car il 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 protéger contre la perte de données et permettez une récupération rapide si votre domaine ou votre site rencontre des problèmes.

Étapes suivantes

Si vous décidez d'arrêter 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 configuration, cliquez sur votre application, puis cliquez sur Paramètres . Ensuite, cliquez sur le lien modifier vers la droite des domaines et l'élément de menu Triple-Dot (… ), et enfin, cliquez sur Retirez le domaine pour supprimer le domaine.

Voici une liste de ressources qui peuvent être utiles:

Comment ajouter un domaine qui contient des caractères spéciaux?
DNS How-Tos
Je ne peux pas supprimer mon domaine à cause d'un certificat de crypte de rendez-vous associé