web-dev-qa-db-fra.com

Comment injecter l'URL du serveur d'API lors du déploiement de Frontend?

_ {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:

  • utiliser les fichiers .env.production et .env.development pour stocker variabl REACT_APP_API_URI avec des paramètres différents
  • ceci est automatiquement capturé par l'échafaudage de build de create-react-app et disponible dans le code d'interface utilisateur en tant que process.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.

reactjsnpm
3
insitu

tu peux essayer ça

if(process.env.NODE_ENV === 'development') {
  url = 'https://google.com'
}

if(process.env.NODE_ENV === 'production') {
  url = 'https://stackoverflow.com/'
}
2
Giang Le

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"
  }
}
2
Rizal Ibnu

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.

1
Lokuzt

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;
0
Mithun G S