L'utilisation de Netlify est une expérience unique pour tout développeur. Il n'a guère besoin d'être guidé. En quelques clics, vous pouvez connecter votre référentiel GitHub, GitLab ou BitBucket et configurer CI/CD et l'hébergement en une seule fois.

Il fournit également un niveau gratuit généreux, suffisant pour les sites Web à faible trafic.

Netlify est unique

Netlify est spécialisé dans l'hébergement de contenu statique frontend.

Et certains d'entre vous se demandent peut-être comment nous pouvons connecter les backends lors de l'utilisation de Netlify ? Netlify prend également en charge les backends sans serveur.

Vous pouvez héberger le frontend et le backend dans Netlify et utiliser ses fonctionnalités proxy pour acheminer le trafic en conséquence.

Voyons donc comment utiliser Netlify pour héberger une application full-stack.

Commencer

Tout d'abord, vous devez disposer des éléments suivants pour l'essayer ;

• Une application frontale simple, prête à être publiée dans un référentiel Git. Vous pouvez utiliser ce référentiel GitHub, si vous en avez besoin.
• Un compte Netlify .

Remarque : Si vous utilisez un Monrepo pour le backend et le frontend, utilisez le chemin de construction pour configurer le CI/CD en conséquence.

Étape 1 : ajouter un nouveau site à partir de Git

Après vous être connecté au compte Netlify, cliquez sur le bouton « Nouveau site de Git ».

Sélectionnez le référentiel

Ensuite, vous pouvez autoriser l'accès aux comptes GitHub , Bitbucket ou GitLab et sélectionner votre référentiel d'applications frontend dans la liste.

Une fois le pont entre votre référentiel et Netlify établi, nous avons presque terminé la configuration principale.

Sélectionnez la succursale

Ensuite, vous pouvez sélectionner la branche que vous souhaitez déployer. En règle générale, la branche principale est sélectionnée.

Étape 2 : Configurez le déploiement du frontend.

Avant de déployer le frontend de l'application, vous devez configurer les commandes de build. Par exemple, si votre projet est basé sur JavaScript, la commande de construction est quelque chose comme npm run build.

Ensuite, vous pouvez terminer le déploiement en cliquant sur le bouton Déployer le site. Et, vous pourrez trouver l'URL de l'application déployée dans l'onglet de présentation.

Remarque : vous pouvez modifier cette URL ou configurer un domaine personnalisé que vous désirez en accédant aux paramètres du site.

Étape 3 : Déployez l'API

J'ai créé une API NodeJS simple pour la démo. Voyons donc comment nous pouvons le déployer en utilisant Netlify.

Si vous regardez le projet backend dans ce référentiel GitHub, vous remarquerez un fichier appelé netlify.toml.

netlify.toml est un fichier de configuration qui spécifie comment Netlify crée et déploie votre site.

De plus, j'ai utilisé la serverless-httpbibliothèque et netlify-clipour créer cette application et vous pouvez l'exécuter à l'aide de la Netlify devcommande.

// Installing serverless http library
npm install serverless-http
// Installing netlify cli
npm install netlify-cli -g

Remarque : laissez la commande build et le répertoire de publication vides pour le déploiement de l'API

Étape 4 : configuration du proxy

Maintenant, vous pouvez accéder à l'URL fournie par Netlify et voir l'action de votre application.

Cependant, si vous surveillez de près, vous remarquerez que l'URL principale de l'application pointe toujours vers des répertoires à l'intérieur du dossier du projet.

Nous pouvons utiliser les fonctionnalités de redirection proxy de Netlify pour résoudre ce problème.

Pour cela, vous devez modifier le netlify.tomlfichier avec les lignes suivantes ;

[[redirects]] 
  to=”/.netlify/functions/api:splat” 
  from=”/*” 
  status=200

Note : Vous pouvez également ajouter la configuration du proxy au projet frontend, pour transférer le trafic vers l'API (/api/* -> API_URL/*) afin que toute l'application s'exécute sur la même origine.

Étape 5 : Configurer les variables d'environnement

Comme dernière étape, je recommande de configurer toutes les variables d'environnement de l'application avec Netlify pour augmenter la sécurité.

Vous pouvez modifier les variables d'environnement des paramètres du site en accédant à Paramètres du site > Construire et déployer > Environnement > Variables d'environnement

Les variables de paramètres de site ont une priorité plus élevée que les variables de niveau d'équipe.

Vous pouvez trouver les variables d'environnement au niveau de l'équipe en accédant à Paramètres d'équipe > Sites > Paramètres de site globaux > Variables d'environnement partagées

C'est ça. J'espère que vous avez tous bien compris l'hébergement d'applications full-stack avec Netlify dans cet article.

Merci d'avoir lu !!!

Créez et partagez des composants Javascript avec Bit

Bit est un outil extensible qui vous permet de créerdes applications véritablement modulaires avec des composants créés, versionnés et maintenus indépendamment .

Utilisez-le pour créer des applications et des systèmes de conception modulaires, créer et fournir des micro-interfaces ou simplement partager des composants entre les applications.

Apprendre encore plus