Dans cet article, nous allons voir comment utiliser les variables d'environnement en Vanilla JavaScript. Nous allons aussi voir comment les utiliser dans les actions Github.
Qu'est-ce que les variables d'environnement JavaScript ?
Les variables d'environnement sont très courantes lorsque vous utilisez des frameworks JavaScript comme React ou Vue pour créer des interfaces utilisateur frontend ou NodeJS côté serveur.
Le but principal des variables d'environnement est de vous donner la flexibilité de définir des conditions pour la manière dont vous souhaitez que l'application ou le logiciel se comporte dans différents modes – développement et production.
Vous les utilisez lorsque l'interface utilisateur/frontend du logiciel interagit avec une API ou un serveur backend qui nécessite une méthode d'authentification avant de fournir les résultats de l'action (comme un appel API). La méthode la plus courante consiste à fournir une clé API avant de pouvoir compléter une requête.
Si vous avez déjà essayé d'obtenir des données d'une API, vous devez fournir cette clé pour que la requête de données soit réussie. Cela implique d'ajouter un en-tête d'autorisation à l'appel.
Regardez une requête fetch typique et son en-tête d'autorisation ci-dessous :
const apiCall = () => {
fetch(url, {
headers: {
Authorization: `bearer ${private_api_key}`
}
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => JSON.stringify(err))
}
Les variables d'environnement stockent des variables, comme leur nom l'indique. Les valeurs ou choses qui sont assignées à ces variables pourraient être des clés API dont vous avez besoin pour effectuer certaines requêtes ou opérations.
Pour créer une variable d'environnement, tout ce que vous avez à faire est de créer un nouveau fichier appelé .env dans le dossier racine du projet sur lequel vous travaillez. Ensuite, vous pouvez commencer à ajouter toutes les variables que vous ne voulez révéler à personne.
Le fichier .gitignore contient la liste des fichiers que Git ne doit pas suivre, et le fichier .env sera dans ce fichier.
Comment utiliser les fichiers .env dans VanillaJS
Vous utilisez des variables d'environnement dans le back-end d'une application, le fichier .env n'est utilisable que côté back. Maintenant, vous vous dites probablement "mais je peux créer un fichier .env dans une application React".
Vous avez raison – mais React a été bootstrappé de telle manière que Node.js est inclus avec. Cela signifie que vous devez utiliser le gestionnaire de packages Node pour effectuer certaines opérations.
Vous pouvez également créer un fichier .env lorsque vous utilisez VanillaJS, mais vous ne pourrez pas accéder à la variable globale process.env que Node fournit à l'exécution. À l'aide de la librairie dotenv, Node transforme le fichier .env en objet utilisable.
Si vous utilisez VanillaJS côté client, il n'est donc pas vraiment faisable de créer un fichier .env et d'utiliser des variables d'environnement, car il n'y a pas de processeur de .env côté front et ceci n'aurait pas de sens du moment que le fichier devient accessible à tous les clients.
Alors, comment pouvez-vous réellement utiliser les variables d'environnement ?
ATTENTION : ne jamais stocker de données sensibles côté front, elles deviennent publiques.
Utiliser la puissance de NPM et des actions Github
L'idée ici est de construire votre propre système de variables d'environnement en utilisant un build personnalisé.
Dans votre package.json, vous pouvez configurer des scripts de build en fonction de votre environnement (dev, recette, production)
Pour déployer votre application, vous pouvez configurer les actions Github.
Configurer une branche qui pointe vers chaque environnement et un fichier yml pour chaque branche en question.
Par exemple :
name: Deploy to Elastic Beanstalk PROD
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ vars.AWS_REGION }}
- name: Deploy to Elastic Beanstalk
run: |
npm ci
npm run build-prod
zip -r $version.zip .
aws s3 cp $version.zip s3://$s3
aws elasticbeanstalk create-application-version --application-name $app_name --version-label $version --source-bundle S3Bucket=$s3,S3Key=$version.zip
aws elasticbeanstalk update-environment --environment-name $env_name --version-label $version
env:
version: github-action-${{ github.event.repository.updated_at}}
s3: elasticbeanstalk-${{ vars.AWS_REGION }}-${{ secrets.ACCOUNT_ID }}
env_name: ${{ vars.AWS_ENV_NAME }}
app_name: thomas-dupont.io
Et le script npm de build :
"scripts": {
"build-prod": "cp config/env.prod.js config/env.js",
}
Utilisez un fichier par branche que vous voulez déployer et le tour est joué.
Maintenant, vous savez comment implémenter les variables d'environnement en JavaScript.
