Utiliser les variables d'environnement avec Nuxt.js sur un Cloud Web

Publié le - 2 min - écrit par Silbad Utiliser les variables d'environnement avec Nuxt.js sur un Cloud Web

Utiliser des API c'est bien, sécuriser les identifiants c'est mieux.
Cloud Web propose une gestion simplifiée des variables d'environnement, nous allons voir comment les utiliser au sein votre application Nuxt.js.

Prérequis

  • Le gestionnaire de package Yarn.
  • Un abonnement Cloud Web exécutant un moteur node.js.
  • Posséder quelques connaissances en développement, notamment en Vue.js.
  • Une application (ou site Web) créée avec Nuxt.js.

Pourquoi utiliser des variables d'environnement

Si vous utilisez des API que ce soit pour faire du mailing, récupérer des données ou interagir avec une application, dans tous les cas vous devrez vous authentifier. Les identifiants que vous utilisez sont, dans la plupart des cas, privés. Les stocker dans votre application n'est donc pas une bonne idée. Le système de variables d'environnement permet de les stocker sur votre serveur d'application et d'en disposer comme bon vous semble. Mais pas que ! Ces variables peuvent être également utilisées entre plusieurs applications. Nous allons voir comment les utiliser avec Nuxt.js en local et en production.

Utiliser les variables d'environnement en local

Pour les utiliser en local, nous allons simuler l'action d'un serveur en les stockant dans un fichier dédié. Installons le module dotenv qui va gérer cela pour nous :

yarn add --dev @nuxtjs/dotenv

A la racine de votre projet, créer un fichier .env.
Dans celui-ci, ajouter vos variables, exemple :

silbad_recaptcha_public='A1B2C3D4E5F6G7xxxxxxxxxxp'
silbad_recaptcha_secret='A1B2C3D4E5F6G7xxxxxxxxxxs'

Dans votre fichier de config nuxt.config.js, ajouter les paramètres suivants :

env: {
	silbad_recaptcha_public: process.env.silbad_recaptcha_public,
	silbad_recaptcha_secret: process.env.silbad_recaptcha_secret,
},

buildModules: [
	['@nuxtjs/dotenv', { systemvars: true }]
],

modules: [
	// https://github.com/nuxt-community/dotenv-module
	'@nuxtjs/dotenv',
],

Plus d'info sur ce paramétrage sur le site de Nuxt.js.

Voilà vous êtes en mesure d'utiliser en local vos variables d'environnement où vous le souhaitez dans votre application Nuxt.js :

console.log(process.env.silbad_recaptcha_public);

Utiliser les variables d'environnement en production

Pour ce qui de l’environnement de production, la config dans votre fichier nuxt.config.js sera la même. Par contre, pour des raisons évidentes de sécurité le fichier .env ne doit pas être présent sur votre serveur. Si vous utilisez GIT, vous pouvez par exemple exclure ce fichier dans le .gitignore.

Pour les ajouter sur votre Web Cloud, ouvrez votre plateforme OVH, onglet Variables d'environnement, liste déroulante Actions puis Ajouter une variable d'environnement :

Pensez bien-sûr à refaire un build et à redémarrer votre site.

Have fun ^^

Widgets

Recherche

Aucun article correspondant à votre recherche...

    Calendrier

    Suivre Human Geek

    Auteurs