_ {Disclaimer: Je suis un noct de réaction, alors ce que j'essaie de faire n'est peut-être pas le voie de réaction
J'écris un serveur React qui sera déployé pour être servi de manière statique par un fournisseur de cloud, par exemple. S3 ou Google Storage ou autre. Ce serveur frontal interagit avec plusieurs serveurs API qui résident quelque part dans le cloud, peut-être même chez le même fournisseur. De plus, lors du développement de l'interface utilisateur ou d'une partie de celle-ci, les adresses de ces serveurs peuvent être des instances locales ou des instances de test.
Comment puis-je injecter les URL du (des) serveur (s) d'API dans mon application de réaction de manière flexible afin de pouvoir effectuer un déploiement dans dev, staging ou prod en utilisant différentes adresses?
SOLUTION: J'ai finalement utilisé une combinaison de solutions proposées:
.env.production
et .env.development
pour stocker variabl REACT_APP_API_URI
avec des paramètres différentsprocess.env.REACT_APP_API_URL
Notez que cela va quelque peu à l’encontre des principes de 12 Factor Apps , par exemple. stocker des variables d’env dans des fichiers dans le contrôle de version, mais il effectue le travail ATM.
tu peux essayer ça
if(process.env.NODE_ENV === 'development') {
url = 'https://google.com'
}
if(process.env.NODE_ENV === 'production') {
url = 'https://stackoverflow.com/'
}
En utilisant ce paquet https://github.com/toddbluhm/env-cmd vous pouvez créer un fichier env pour votre environnement
par exemple, créez les fichiers .env.staging et .env avec ce code
// .env.staging file
API_URL=https://staging.url.com/api/
// .env file
API_URL=https://url.com/api/
Comment récupérer avec API_URL à partir de la variable env:
fetch(process.env.API_URL)
Ensuite, vous pouvez simplement ajouter des scripts supplémentaires dans votre package.json:
{
"scripts": {
"build:staging": "env-cmd .env.staging yarn build",
"build:prod": "env-cmd .env yarn build"
}
}
Vous pouvez le faire en utilisant des variables d’environnement lors de l’étape de construction, par exemple.
Vous pouvez utiliser quelque chose comme .env qui vous permet de définir des variables d’environnement et de les charger dans votre fichier webpack par exemple (en supposant que vous utilisiez webpack). Mais vous pouvez vraiment l'utiliser avec n'importe quel bundler.
fichier .env:
API=http://localhost:3000
Sur votre webpack, vous pouvez utiliser le DefinePlugin
exemple tiré de docs: ajoutez votre env. API
...
require('dotenv').config()
...
new webpack.DefinePlugin({
API_ENDPOINT: process.env.API,
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object')
});
Quoi qu'il en soit, ce n'est qu'un moyen. J'aime cette méthode car elle prépare mon projet à la définition de clés API et à d'autres éléments utiles pour différents environnements.
NOTE: Vous pouvez même définir différents fichiers .env pour le local, le stockage intermédiaire et la production et charger le fichier correspondant dans le Webpack en fonction du type de construction.
Vous pouvez utiliser .env
fichier si les API sont constantes pour l'environnement development
ou production
. après build
, vous ne pouvez pas modifier ces paramètres.
Si vous souhaitez modifier la version URL
après la construction, ajoutez un fichier js
permettant de dire config.js
Incluez le conf.js
dans index.html
Ajouter URL
dans conf.js
comme
var URL1 = 'https://www.google.com'
Vous pouvez accéder au paramètre comme:
export const {URL1} = window;