web-dev-qa-db-fra.com

Définir la variable d'environnement pour la génération dans Netlify

J'essaie de définir une variable d'environnement pour une clé API que je ne veux pas dans mon code. Mon javascript source ressemble à ceci:

.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)

J'utilise webpack et le package dotenv-webpack https://www.npmjs.com/package/dotenv-webpack pour définir API_KEY dans un fichier .env gitignored et tout fonctionne bien sur mon local . J'aimerais également pouvoir définir cette variable lors du déploiement via Netlify, j'ai essayé de l'ajouter à l'interface graphique aux `` variables d'environnement de génération '', et également de la définir directement dans la commande de génération, mais sans succès.

Une idée de ce qui pourrait être le problème?

webpacknetlify
10
Maëlig

AVERTISSEMENT: S'il s'agit d'une clé secrète, vous ne voudrez pas exposer cette valeur de variable d'environnement dans un ensemble renvoyé au client . Il ne doit être utilisé que par vos scripts de génération pour être utilisé pour créer votre contenu pendant la génération.

Problème

dotenv-webpack s'attend à ce qu'il y ait .env fichier à charger dans vos variables lors de la construction du webpack de votre bundle. Lorsque le référentiel est extrait par Netlify, le .env n'existe pas car pour de bonnes raisons, il est dans .gitignore.

Solution

Stockez votre API_KEY dans Netlify build environment variables et construisez le .env en utilisant un script avant d'exécuter la commande build.

scripts/create-env.js

const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)

Exécutez le script dans le cadre de votre build

node ./scripts/create-env.js && <your_existing_webpack_build_command>

Mises en garde et recommandations

  • N'utilisez pas cette méthode avec un référentiel accessible au public [ouvert] car tout PR ou déploiement de branche pourrait créer un simple script dans votre code pour exposer l'API_KEY
  • L'exemple de script ci-dessus est pour plus de simplicité, donc faites en sorte que tout script que vous utilisez puisse générer une erreur avec un code autre que 0 donc si le script échoue, le déploiement échouera.
12
talves

Vous pouvez définir Dotenv-webpack pour charger les variables d'environnement système ainsi que celles que vous avez déclarées dans votre fichier .env en procédant comme suit:

  plugins: [
    new Dotenv({
        systemvars: true
    })
  ]

I.e Définir l'attribut systemvars de votre plugin webpack dotenv sur true.

Notez que les variables d'environnement système portant le même nom remplaceront celles définies dans votre fichier .env.

Source: https://www.npmjs.com/package/dotenv-webpack#properties

4
Riky_Tree

si vous accédez aux paramètres du site correspondant dans Netlify, sous build&deploy vous pouvez trouver une section appelée environment variables vous pouvez facilement ajouter vos variables d'environnement à partir de là. si vous ajoutez MY_API_KEY variable aux variables d'environnement vous pourrez y accéder à l'intérieur de votre projet via process.env.MY_API_KEY.

enter image description here

2
Lakshan S

Si vous utilisez Nuxt JS , il existe une approche plus "directe".

Modifiez simplement le nuxt.config.js ainsi:

module.exports = {
  env: {
    GOOGLE_API_KEY: process.env.GOOGLE_API_KEY

  },
  // ...

Ajoutez ensuite GOOGLE_API_KEY à Netlify via build environment variables comme d'habitude.

Le crédit revient à yann-linn et sa réponse sur github .

1
Peter Piper