Catégories
Astuces et Design

Comment héberger des sites statiques gratuitement avec un pipeline automatisé

Saviez-vous que vous pouvez héberger gratuitement des sites statiques sur un certain nombre de services de haut niveau? Cela ne permet pas seulement d’économiser de l’argent, mais signifie également que vous effectuez un déploiement sur des CDN distribués à l’échelle mondiale et automatisez des processus.

Fourni: Netlify

Dans un article précédent, nous avons passé en revue 100 outils, API et services Jamstack pour alimenter vos sites, qui comprenaient de nombreux services d'hébergement.

Dans cet article, nous allons vous familiariser et vous montrer comment héberger des sites statiques avec un pipeline automatisé pour le déploiement.

Cela vous semble-t-il compliqué? C’est plus facile que vous ne le pensez.

Hébergement cloud gratuit, mais avec des chaînes attachées

Vous pouvez en fait héberger des sites Web gratuitement – même des sites dynamiques – avec le niveau gratuit AWS (Amazon Web Services), le niveau gratuit GCP (Google Cloud Platform) et Windows Azure (avec quelques solutions de contournement).

Mais lorsque vous essayez, vous rencontrez un certain nombre de conditions, de petits caractères et de contraintes de mise en œuvre:

  • de quelle puissance de calcul avez-vous besoin?
  • votre numéro de carte de crédit, s'il vous plaît?
  • où voulez-vous vous déployer?
  • votre compte est-il nouveau?
  • et pas plus de 1 an?
  • en fait, quels services?

Souvent, il s'agit davantage d'un essai que d'un cadeau gratuit (d'où la raison pour laquelle AWS Amplify Storage n'est pas inclus dans cette liste). Et bien que certains utilisateurs expérimentés puissent profiter des avantages, si vous ne connaissez pas bien ces plates-formes au préalable, vous découvrirez que la courbe d'apprentissage pour commencer à utiliser ces services est très raide, et que pour chaque service cloud que vous envisagez. Pour l'utiliser, vous devez d'abord savoir de quelle manière chaque fournisseur a réinventé la roue avant de pouvoir la faire tourner dans un déploiement gratuit.

Voyons maintenant comment une poignée d'acteurs plus petits ont pris de l'importance avec des services d'hébergement gratuits qui ne sont pas compliqués à mettre en œuvre et qui ont moins de conditions.

Le déploiement dans le cloud était difficile – Puis est venu Netlify

Netlify – la société qui a inventé le terme Jamstack – a été lancée en mars 2015. Au cours de sa courte période d'activité, elle a déployé beaucoup d'efforts pour tenir sa promesse d'être la "Le moyen le plus rapide de créer les sites les plus rapides".

Netlify Drop

Netlify a littéralement développé un service de glisser-déposer avec cette prémisse:

Faites glisser et déposez un dossier contenant les fichiers HTML, CSS et JS de votre site. Nous les publierons en direct et vous fournirons un lien pour le partager.

Vous n’avez même pas besoin d’un compte Netlify! Ce n’est pas plus simple que cela. Et vous obtenez ces fonctionnalités dès la sortie de la boîte:

  • HTTPS gratuit
  • déploiement mondial sur Netlify Edge, un CDN multi-cloud distribué

Et il y a plus:

  • vous pouvez revendiquer le site (à quel moment vous avez besoin d'un compte)
  • y attacher un domaine gratuitement (également avec HTTPS gratuit)
  • aller plus loin avec le flux de travail Netlify, les fonctions et plus encore

Déploiements automatisés

Si vous créez un compte, vous constaterez que lier un référentiel GitHub, GitLab ou Bitbucket pour des déploiements automatisés est extrêmement simple.

La façon dont cela fonctionne est très simple: vous validez des modifications dans votre référentiel, Netlify est instantanément notifié via des webhooks et déploie immédiatement ces modifications en ligne. C’est tout – pas de carte de crédit, et pas de petits caractères qui vous frapperont plus tard (dont je suis au courant). En cas de problème avec un déploiement, ne vous inquiétez pas: vous disposez de restaurations en un clic directement sur l'interface Web!

Et ce flux de travail, aussi simple soit-il à mettre en œuvre, est tout à fait en phase avec les pipelines d'intégration continue et de livraison continue (CI / CD) qui ont gagné du terrain parmi les pratiques DevOps qui sont si demandées ces jours-ci.

Pages GitHub et pages GitLab

Si vous ne le saviez pas maintenant, vous pouvez héberger des sites Web statiques gratuitement, directement à partir de vos référentiels dans les pages GitHub et GitLab.

Les pages GitHub et GitLab sont très faciles à utiliser. Suivez simplement ces directives:

Vous avez un site dynamique? Rendez-le statique!

Transformer des sites dynamiques en actifs HTML / CSS statiques, ce qui se traduit par d'énormes gains de vitesse et de sécurité, est une tendance à la hausse dans le développement Web. Et avec le bon ensemble d'outils, il permet le déploiement beaucoup Plus facile. Nous ne couvrirons pas le processus ici, mais nous publierons un guide qui le fera plus tard cette semaine.

Comme approche alternative, vous pouvez créer un pipeline automatisé pour transformer un ensemble d'actifs statiques en quelque chose qui se comporterait à peu près comme un site dynamique. Par exemple, vous pouvez pousser les fichiers Markdown vers votre référentiel et les créer automatiquement dans une page Web pour le déployer sur votre site Web. Comment? Jekyll.

GitHub propose un bon ensemble de tutoriels à cette fin: Configurer un site de pages GitHub avec Jekyll.

Consultez également ces guides:

Comparant

Les utilisateurs se sont plaints du fait que les pages GitHub sont extrêmement lentes, prenant parfois jusqu'à 20 à 30 minutes pour déployer une poignée de fichiers HTML. La navigation peut souffrir de problèmes de performances, avec une latence pouvant atteindre cinq secondes. C'est vraiment étrange, étant donné que les pages GitHub utilisent (ou devraient utiliser) un CDN. (Voir des pages GitHub plus rapides et plus impressionnantes).

Et bien que certains de ces problèmes aient pu être résolus par Microsoft (la société mère de GitHub), en général le nombre et la qualité des fonctionnalités gratuites offertes par GitLab sont insensés.

Pages GitHub Pages GitLab
Générateur de site statique (SSR) Jekyll Gatsby, Jekyll, Hugo, Middleman, Harp, Hexo, Brunch et plus
prise en charge des plugins non Oui
Configuration de la construction Travis CI Travis CI
Prise en charge HTTPS partiel / buggy oui, incl. domaines personnalisés

Heroku

Heroku est un cas très intéressant car, contrairement aux fournisseurs susmentionnés, il permet l'hébergement gratuit de sites dynamiques, également avec un fort accent sur l'intégration continue et la livraison continue.

Heroku utilise une technologie de conteneur léger propriétaire appelée Dynos pour exécuter des applications, et comme votre environnement sera conteneurisé (voir Comprendre Docker, Containers et une livraison logicielle plus sûre pour plus d'informations), vous pouvez déployer efficacement votre application virtuellement tout langage de programmation – tel que Python, PHP, Node.js, ou bien d'autres). Vous pouvez également l'intégrer à une base de données PostgreSQL ou Redis… et même à un «Kafka-as-a-service»!

La flexibilité d'Heroku signifie que le service n'est pas aussi facile à utiliser que Netlify. Mais c'est loin aussi difficile qu'AWS, GCP ou Azure. En fait, si vous avez déjà utilisé des conteneurs auparavant, vous pourrez trouver votre chemin dans Heroku en un rien de temps.

La prise

Oui, il y a un hic ici: votre application «dormira» après 30 minutes d'inactivité. Donc, si votre site reste inactif (aucune visite) pendant un court moment, Heroku mettra les ressources affectées pour exécuter votre application Web en veille jusqu'à ce que le serveur reçoive une nouvelle demande.

Si vous souhaitez montrer votre application à un collègue ou à un client, il y a de fortes chances que la latence (le temps nécessaire pour qu'une demande soit servie) lorsque vous accédez pour la première fois à la page soit énorme, car les ressources devront être à nouveau allouées lorsque l'application «se réveillera». Après cela – tant qu'il reste actif pendant au moins 30 minutes – la latence devrait être normale.

En raison de ce mécanisme d'économie de ressources, ce billet de faveur est bon pour tester des idées en ligne, mais ne convient pas vraiment à autre chose.

Hébergement Firebase

Google Firebase, la suite cloud pour le développement mobile, Web et Unity, propose également Firebase Hosting.

Vous pouvez utilisez le service gratuitement jusqu'à 10 Go de stockage et 10 Go de données transférées par mois*, y compris les certificats SSL gratuits même pour les domaines personnalisés et la prise en charge de plusieurs sites par projet. C’est plutôt bien!

Déploiements

Contrairement à Netlify, le déploiement avec Firebase Hosting n’est pas aussi simple. Firebase ne lit pas les webhooks de votre référentiel pour un pipeline CI / CD transparent. Au lieu de cela, vous devrez utiliser l'outil d'interface de ligne de commande, Firebase CLI.

À partir de la documentation Firebase:

  1. Installez la CLI Firebase. L'interface de ligne de commande Firebase facilite la configuration d'un nouveau projet d'hébergement, l'exécution d'un serveur de développement local et le déploiement de contenu.
  2. Configurer un répertoire de projet. Ajoutez vos actifs statiques à votre dossier de projet d'hébergement local et configurez Cloud Functions ou Cloud Run pour votre contenu dynamique et vos microservices. Vous pouvez ensuite tester votre site localement en exécutant firebase serve.
  3. Déployez votre site. Quand les choses vont bien, cours firebase deploy pour télécharger le dernier instantané sur nos serveurs. De nouvelles versions sont publiées en même temps, vous n'aurez donc jamais à vous soucier des déploiements à moitié terminés. Mais si quelque chose ne va pas, vous pouvez revenir en arrière en un seul clic.
  4. Lien vers une application Web Firebase (optionnel). En associant votre site à une application Web Firebase, vous pouvez utiliser Firebase Performance Monitoring pour obtenir un aperçu des caractéristiques de performances de votre site.

Juste un peu de configuration, mais ce n’est pas difficile non plus. Ici, vous pouvez consulter la documentation complète des déploiements.

L'hébergement gratuit est amusant, mais qu'est-ce que les entreprises en retirent?

Vous devez tenir compte du fait que ces entreprises disposent déjà d'une infrastructure massive et que nous parlons principalement d'actifs statiques qui ne nécessitent aucun prétraitement pendant l'exécution. Ainsi, les frais généraux pour exécuter ces sites statiques sont faibles. Ce contraste est mieux démontré par Heroku avec son support dynamique – il économise des ressources lorsque les sites sont inactifs, ce qui est la plupart du temps pour les petits sites.

Et les entreprises en tirent aussi quelque chose: les projecteurs! Vous pourriez venir pour la bière gratuite, mais si le lieu et le menu sont suffisamment attrayants, vous pouvez aussi bien rester et payer le dîner au moment opportun.

Conclusions

Certaines entreprises proposaient des forfaits gratuits que nous n'avons pas pu couvrir, comme Poussée et Vercel (anciennement ZEIT Now), tous deux orientés Jamstack comme Netlify. Mais j'espère que vous obtenez beaucoup plus qu'un «hébergement gratuit» de cet article: lorsque vous implémentez un pipeline de déploiement, vous faites vraiment passer votre flux de travail au niveau supérieur, car vous automatisez des processus qui sont fastidieux et enclins à erreurs douloureuses, et assez souvent ne peuvent pas être inversées (c'est-à-dire les fichiers écrasés sur FTP).

Et qui n'aime pas l'hébergement gratuit? Mais encore une fois, il y a plus à faire lorsque vous déployez également sur des CDN dans le monde entier et que votre site est extrêmement rapide dans le monde entier

Ainsi, vous pouvez pratiquement oublier de payer pour héberger un site Web statique pour bon nombre de vos projets et dynamiser votre flux de travail dans le processus. Quel chanceux êtes-vous! 💥

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *