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 permet non seulement d'économiser de l'argent, mais aussi de déployer sur des CDN distribués à l'échelle mondiale et d'automatiser des processus.

Fourni: Netlify

Dans un article précédent, nous avons passé en revue 100 outils, API et services Jamstack pour alimentez vos sites qui comprenait 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 sonne-t-il compliqué? C'est plus facile que vous ne le pensez.

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

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

Mais lorsque vous essayez, vous tomberez sur un nombre de conditions, considérations en petits caractères et contraintes d'implémentation:

• de combien de puissance de calcul avez-vous besoin?
• votre numéro de carte de crédit, s'il vous plaît?
• où voulez-vous effectuer le déploiement?
• est votre compte tout neuf?
• et pas plus vieux que 1 an?
• en fait, quels services?

Souvent, il s'agit plus d'un essai que d'un cadeau (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 devrez 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 de petits joueurs ont pris de l'importance avec des services d'hébergement gratuits qui ne sont pas disponibles. Ce n'est pas compliqué à mettre en œuvre et il y a moins de conditions.

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

Netlify – la société qui a inventé le terme Jamstack – lancé en mars 2015. Au cours de sa courte période d'activité, il a déployé beaucoup d'efforts pour tenir sa promesse d'être le «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:

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

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 Netlify Workflow , Fonctions et plus

Déploiements automatisés

Si vous obtenez un compte, vous constaterez que lier un référentiel GitHub, GitLab ou Bitbucket pour les déploiements automatisés est dead easy .

La façon dont cela fonctionne est très simple: vous validez les changements dans votre référentiel, Netlify est instantanément notifié via webhooks et il déploie immédiatement ces changements 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 très en phase avec le intégration continue et livraison continue (CI / CD) pipelines 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 l'avez pas fait ' Je sais maintenant, vous pouvez héberger des sites Web statiques gratuitement, directement à partir de vos référentiels dans Pages GitHub et Pages GitLab .

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

Vous avez un site dynamique? Rendez-le statique!

Transformer des sites dynamiques en actifs HTML / CSS statiques, ce qui se traduit par des gains énormes en vitesse et en sécurité, est une tendance croissante dans le développement Web. Et avec le jeu d'outils approprié, cela facilite grandement le déploiement . 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 comporte à 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 a un bon ensemble de tutoriels à cette fin: Configurer un site GitHub Pages avec Jekyll .

Consultez également ces guides:

Comparing [19659020] 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 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 est insensé .

Heroku

Heroku est un cas très intéressant car, contrairement aux fournisseurs mentionnés ci-dessus, il permet l'hébergement gratuit de sites dynamiques également avec un fort accent sur intégration continue et 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 Understanding Docker, Containers and Safer Software Delivery pour plus d'informations), vous pouvez déployer efficacement votre application dans pratiquement n'importe quel langage de programmation tel que Python PHP Node.js ou beaucoup d'autres ). Vous pouvez également l'intégrer à une base de données PostgreSQL ou Redis … et même à une " Kafka-as-a-service "!

La flexibilité d'Heroku signifie que le service n'est pas aussi facile à utiliser que Netlify. Mais il est loin d’être 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.

The Catch

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 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 cadeau est bon pour tester des idées en ligne, mais pas vraiment adapté à autre chose.

Firebase Hosting

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

Vous pouvez utilisent 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. À la place, vous devrez utiliser l’outil d’interface de ligne de commande, Firebase CLI .

Extrait de la documentation Firebase :

1. Installez la CLI Firebase . La Firebase CLI 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 ressources 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 . Lorsque tout va bien, exécutez 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 (facultatif) . En associant votre site à une Firebase Web App vous pouvez utiliser Firebase Performance Monitoring pour obtenir un aperçu des caractéristiques de performance de votre site.

Juste un peu de configuration , mais ce n'est pas difficile non plus. Vous pouvez consulter ici la documentation complète pour les 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 en place et 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 également quelque chose: les projecteurs! Vous pourriez venir pour la bière gratuite, mais si le lieu et le menu sont assez attrayants, vous pourriez aussi bien rester et payer pour le dîner quand le moment est venu.

Conclusions

Certaines entreprises offraient des plans gratuits que nous n'avons pas Je ne peux pas couvrir, comme Surge et Vercel (anciennement ZEIT Now), qui sont 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 bien souvent ne peuvent pas être inversées (c'est-à-dire 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 à peu près oublier de payer pour héberger un site Web statique pour la plupart de vos projets, et dynamiser votre flux de travail dans le processus. Quel chanceux êtes-vous! ?