Article original : What Are Environment Variables and How Can I Use Them with Gatsby and Netlify?

Lorsque vous commencez à intégrer des services tiers dans votre application ou votre site web, vous trouverez utile d'avoir différents environnements, tels qu'un environnement de développement et de production.

Comment pouvons-nous configurer cela pour ne pas avoir à modifier directement notre code pour changer notre environnement ?

Qu'est-ce que les variables d'environnement ?

Les variables d'environnement sont des valeurs prédéterminées qui sont généralement utilisées pour fournir la capacité de configurer une valeur dans votre code depuis l'extérieur de votre application.

Image _Variable d'environnement MY_SECRETKEY utilisée pour l'autorisation

Lors du développement local, ou parfois même dans un pipeline de déploiement, vous trouverez souvent ces variables stockées dans un fichier nommé avec une sorte de variation de .env.

Comment les variables d'environnement peuvent-elles être utiles ?

Probablement le cas d'utilisation le plus courant pour les variables d'environnement est la possibilité de configurer différentes options pour différents environnements. Souvent, lors du développement contre des services tiers, vous souhaitez avoir une version de développement ou un bac à sable disponible pour faire des requêtes de test, de cette façon, cela n'impacte pas les données de production réelles.

Les variables d'environnement sont utiles car elles vous permettent de changer quel environnement utilise quel environnement de service tiers en changeant une clé API, un endpoint, ou ce que le service utilise pour distinguer les environnements.

Le code que vous déployez doit être prévisible, donc en n'ayant pas à changer de code, juste la configuration en dehors du code, vous pouvez maintenir cette prévisibilité.

Comment puis-je garder ces fichiers sécurisés ?

C'est probablement l'un des points les plus importants ici – vous devez vous assurer de manipuler ces fichiers avec soin et de ne pas les ajouter à un dépôt git. En exposant ces clés en les téléchargeant involontairement dans un endroit public, l'internet pourrait facilement trouver ces clés et les utiliser à ses propres fins.

Par exemple, les clés AWS sont une source précieuse. Les gens exécutent des bots dans le seul but d'essayer de scanner Github pour des clés. Si quelqu'un trouve une clé AWS, il pourrait utiliser cette clé pour accéder à des ressources telles que l'exécution d'une opération bitcoin à vos frais. Ce n'est pas pour vous faire peur, c'est pour vous rendre conscient afin d'éviter que vos clés ne soient compromises.

Alors, comment pouvons-nous garder ces fichiers sécurisés ? La manière la plus simple est d'ajouter le fichier d'environnement où vous gardez ces clés à votre fichier .gitignore.

Pour ce faire, ouvrez simplement votre fichier .gitignore existant ou créez-en un nouveau à la racine de votre dépôt et ajoutez le nom du fichier comme nouvelle ligne :

# Dans .gitignore
.env

Si vous voulez aller plus loin et vous assurer que cela n'arrive jamais à un dépôt, vous pouvez consulter des outils comme git-secrets d'AWS Labs ou GitLeaks qui dispose même d'une Github Action pour faciliter l'intégration avec Github.

Gatsby et les variables d'environnement

Gatsby par défaut rend deux fichiers disponibles dans le cadre de son flux de travail des variables d'environnement qui rend ces valeurs disponibles dans le client : .env.development et .env.production. Ces fichiers correspondent aux scripts gatsby develop et gatsby build pour développer ou construire votre site.

Image _Variable d'environnement MY_SECRETKEY pour le développement et la production

Pour utiliser ces fichiers dans le processus de développement et de construction de Gatsby, Gatsby vous demande de préfixer ces variables avec GATSBY_. Cela fonctionne également si vous souhaitez les avoir disponibles au niveau du processus OS.

Bien que vous puissiez intégrer dotenv si vous avez des besoins plus avancés ou si vous ne souhaitez pas utiliser le préfixe GATSBY_, votre chemin de moindre résistance est probablement de simplement suivre la méthode Gatsby lorsque vous travaillez dans Gatsby.

Netlify et les variables d'environnement

Netlify fournit la possibilité d'ajouter des variables d'environnement dans le cadre de ses paramètres Build & deploy qui sont pris en compte dans les processus de construction.

Image Ajout d'une variable d'environnement dans Netlify

Heureusement, Netlify facilite l'ajout de n'importe quelle variable d'environnement que vous souhaitez au processus de construction ! Pour en ajouter une, vous pouvez simplement naviguer vers la section Environment de la page des paramètres Build & deploy de votre projet et ajouter une variable sous Environment variables.

Nous vous guiderons à travers ce processus un peu plus tard.

Étape 1 : Créer un site web "Hello, world"

Pour notre guide, nous allons configurer un exemple très basique d'un site web Gatsby juste pour tester cela.

Image Nouveau site web avec Gatsby Sass Starter

Bien que ce ne soit pas vraiment un cas d'utilisation courant des variables d'environnement, où normalement vous les utiliseriez pour des choses comme les clés API et les configurations de service, cela vous donnera une excellente idée de leur fonctionnement fondamental.

Nous allons utiliser ce Gatsby Sass Starter que j'ai créé, ce qui nous donnera un point de départ et ajoutera "Hello, [Environment]" selon l'endroit où il s'exécute.

Pour commencer, créons notre projet local en utilisant le Gatsby CLI. Naviguez vers l'endroit où vous souhaitez stocker ce projet et exécutez :

gatsby new my-env-project https://github.com/colbyfayock/gatsby-starter-sass

Vous pouvez changer my-env-project en n'importe quel répertoire où vous souhaitez que ce projet soit créé, mais une fois que vous exécutez cette commande, vous aurez maintenant un projet dans ce nouveau répertoire.

Image Nouveau projet Gatsby dans le terminal

Pour commencer, une fois dans ce répertoire, exécutez yarn develop pour apporter des modifications localement ou yarn build pour compiler votre nouveau site.

Une fois que vous êtes prêt, vous voudrez ajouter ce projet à Github. Si vous n'êtes pas familier avec la façon de faire cela, vous pouvez apprendre à ajouter un projet existant à Github ici.

Étape 2 : Créer une variable d'environnement locale avec Gatsby

Notre prochaine étape est de créer un environnement local et d'ajouter une modification qui nous permettra de voir que cela fonctionne.

Pour commencer, créons d'abord un nouveau fichier à la racine de notre projet appelé .env.development. Il pourrait vous demander si vous voulez vraiment utiliser le préfixe ., assurez-vous de dire oui !

À l'intérieur de ce fichier, ajoutons :

# Dans .env.development
GATSBY_MY_ENVIRONMENT="Development"

Image Création d'un fichier .env.development

Ensuite, pour nous assurer de ne pas oublier de le faire, ajoutons également ce fichier .env.development à notre .gitignore afin de ne pas commettre accidentellement cela dans notre historique git. Si vous n'avez pas déjà de fichier .gitignore, assurez-vous de le créer à la racine de votre projet.

Image Ajout de .env.development à votre .gitignore

Enfin, pour vérifier que cela fonctionne, ouvrons pages/index.js et remplaçons le contenu de notre balise <h1> par une variation de "Hello, world!" :

<h1>Hello, {process.env.GATSBY_MY_ENVIRONMENT}</h1>

Et si nous enregistrons ce changement et l'ouvrons dans notre navigateur, nous devrions voir "Hello, Development" !

Image Utilisation d'une variable d'environnement pour votre site Gatsby

Suivez le commit !

Étape 3 : Déployer le site web sur Netlify

Nous avons donc créé notre site web en utilisant une simple variable d'environnement. Ensuite, nous voudrons déployer ce site sur Netlify. Si vous ne l'avez pas déjà fait, nous devrons ajouter notre site web à Github ou un autre fournisseur Git. Assurez-vous d'avoir cela configuré avant de continuer.

Après avoir créé un compte et vous être connecté à Netlify, cliquons sur le bouton New site from Git du tableau de bord principal, suivons les instructions pour connecter votre Github ou un autre fournisseur Git à Netlify, puis trouvons votre nouveau dépôt.

Image Ajout d'un nouveau dépôt Github à Netlify

Une fois que vous avez sélectionné votre dépôt, vous serez invité à configurer votre processus de construction. Heureusement, Netlify peut détecter que nous utilisons un site Gatsby et l'a pré-rempli pour nous. Sauf si vous avez ajouté quelque chose de spécial, gardez la configuration de base pour utiliser gatsby build pour construire votre projet et public/ pour la sortie.

Image Configuration des paramètres de construction de Netlify

Maintenant, avant de cliquer sur Deploy, il y a une chose que nous voulons ajouter, et c'est notre variable d'environnement !

Juste au-dessus du bouton Deploy site, il y a un bouton Advanced. Cliquez dessus et vous verrez une nouvelle liste déroulante avec un bouton supplémentaire New variable.

Image Configuration d'une variable d'environnement dans la configuration de Netlify

Cliquez sur ce bouton New variable, ajoutez notre GATSBY_MY_ENVIRONMENT comme nouvelle variable et ajoutez Production comme valeur. Et enfin, cliquez sur Deploy site !

À partir de là, vous devriez pouvoir regarder votre site web se déployer et une fois terminé, vous verrez votre nouveau site avec "Hello, Production" !

Image Site Gatsby déployé utilisant la variable d'environnement de Netlify

Où pouvez-vous ajouter ou mettre à jour plus de variables dans Netlify ?

Avec notre exemple, nous n'avons ajouté qu'une seule variable pendant la configuration. Mais Netlify vous permet d'ajouter ou de mettre à jour n'importe quelle autre variable que vous souhaitez.

Si vous souhaitez un jour changer cette variable ou en ajouter d'autres, vous pouvez naviguer vers la section Environment des paramètres Build & deploy, où vous pouvez modifier et ajouter d'autres variables dans la section Environment variables.

Image Paramètres des variables d'environnement dans Netlify

Vous cherchez à en apprendre plus ?

Voici quelques autres choses pour vous aider à commencer avec les fondamentaux du développement !