Экстернализация различных переменных среды для разных сред в React - PullRequest
Новая
       3

Экстернализация различных переменных среды для разных сред в React

0 голосов
/ 16 июня 2020

Есть ли способ полностью экстернализовать переменные среды (включая секретные ключи) в приложении React в контексте DevOps? Мы хотим автоматизировать наши сборки для разных сред (каждая среда имеет свои собственные переменные среды) . Мы изучили переменные среды в React с помощью Webpack, но это не совсем удовлетворяет наши потребности, и мы не можем экстернализовать переменные среды с помощью этого подхода. Кроме того, нам пришлось бы явно объявить все эти переменные в файле конфигурации webpack, который был бы раздут, если бы мы это сделали. Мы думаем, что лучший способ go - это поместить секреты api в Firebase и особенности времени выполнения внутри jenkins script.

Мы используем Jenkins в качестве нашего сервера CI / CD, и приложение запускается с nginx в контейнере Docker.

1 Ответ

0 голосов
/ 16 июня 2020

Вы можете создать два файла .env, .env и .env.prod на уровне root и можете определить свои конкретные «переменные», относящиеся к определенной среде c в этих файлах env. Затем в вашем коде вы сможете получить к ним доступ через process.env.NODE_ENV

if(process.env.NODE_ENV === "production"){
    //Execute this in production environment
    var url= `${process.env.REACT_APP_AC_ORIGIN}/`;
    url = url + ...,
}else{
    //Execute this in dev environment
    var url= `${process.env.REACT_APP_AC_ORIGIN}/`;
    url = url + ...,
}

.env 

REACT_APP_AC_ORIGIN=https://example1.com

.env.prod 

REACT_APP_AC_ORIGIN=https://example2.com

Если вы имеют несколько сред, скажем, production, staging, QA и т. д., вы можете даже подумать о создании динамических c URL-адресов, предполагая, что к разным средам будут обращаться разные имена хостов в браузере, что-то вроде этого:

api-config. js

  let backendHost;
const apiVersion = 'v1';

const hostname = window && window.location && window.location.hostname;

if(hostname === 'realsite.com') {
  backendHost = 'https://api.realsite.com';
} else if(hostname === 'staging.realsite.com') {
  backendHost = 'https://staging.api.realsite.com';
} else if(/^qa/.test(hostname)) {
  backendHost = `https://api.${hostname}`;
} else {
  backendHost = process.env.REACT_APP_BACKEND_HOST || 'http://localhost:8080';
}

export const API_ROOT = `${backendHost}/api/${apiVersion}`;

И затем вы можете импортировать его следующим образом: 

import { API_ROOT } from './api-config';

function getUsers() {
  return fetch(`${API_ROOT}/users`)
    .then(res => res.json)
    .then(json => json.data.users);
}

ИЛИ, вы можете определить свои переменные во время выполнения в различных средах. 

$ REACT_APP_API_HOST=example.com yarn run build

# The resulting app would have
#   process.env.REACT_APP_API_HOST === "example.com"
#   process.env.NODE_ENV === "production"

Ссылка: https://daveceddia.com/multiple-environments-with-react/

...