Задать переменную окружения в реагирующем?

Я использую реактивную систему для создания кроссплатформенного приложения, но я не знаю, как установить переменную среды, чтобы у меня были разные константы для разных сред.

Пример:

development: 
  BASE_URL: '',
  API_KEY: '',
staging: 
  BASE_URL: '',
  API_KEY: '',
production:
  BASE_URL: '',
  API_KEY: '',

Вместо того, чтобы жестко программировать константы вашего приложения и переключать среду (я сейчас объясню, как это сделать), я предлагаю использовать двенадцать факторов, чтобы ваш процесс сборки определял вас BASE_URLи ваш API_KEY.

Чтобы ответить, как представить свою среду react-native, я предлагаю использовать babel-plugin-transform-inline-environment-variable .

Чтобы это работало, вам нужно скачать плагин, а затем вам нужно будет настроить a, .babelrcи он должен выглядеть примерно так:

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

И поэтому, если вы переносите свой реактивный код с помощью запуска API_KEY=my-app-id react-native bundle(или start, run-ios или run-android), то все, что вам нужно сделать, это сделать ваш код следующим образом:

const apiKey = process.env['API_KEY'];

И тогда Бабель заменит это на:

const apiKey = 'my-app-id';

Надеюсь это поможет!

Самое простое (не самое лучшее или идеальное ) решение, которое я нашел, состояло в том, чтобы использовать response-native-dotenv . Вы просто добавляете предустановку «response-native-dotenv» в свой .babelrcфайл в корне проекта следующим образом:

{
  "presets": ["react-native", "react-native-dotenv"]
}

Создайте .envфайл и добавьте свойства:

echo "SOMETHING=anything" > .env

Тогда в вашем проекте (JS):

import { SOMETHING } from 'react-native-dotenv'
console.log(SOMETHING) // "anything"

На мой взгляд, лучший вариант - это использовать response-native-config . Поддерживает 12 факторов .

Я нашел этот пакет чрезвычайно полезным. Вы можете установить несколько сред, например, разработка, подготовка, производство.

В случае Android переменные доступны также в классах Java, gradle, AndroidManifest.xml и т. Д. В случае iOS переменные доступны также в классах Obj-C, Info.plist.

Вы просто создаете файлы, как

• .env.development
• .env.staging
• .env.production

Вы заполняете эти файлы ключом, такими значениями

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

а затем просто используйте его:

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

Если вы хотите использовать разные среды, вы в основном устанавливаете переменную ENVFILE следующим образом:

ENVFILE=.env.staging react-native run-android

или для сборки приложения для производства (андроид в моем случае):

cd android && ENVFILE=.env.production ./gradlew assembleRelease

React native не имеет понятия глобальных переменных. Он строго соблюдает модульную область видимости , чтобы способствовать модульности и повторному использованию компонентов.

Однако иногда вам нужны компоненты, чтобы быть в курсе их среды. В этом случае очень просто определить Environmentмодуль, который компоненты могут затем вызывать для получения переменных среды, например:

environment.js

var _Environments = {
    production:  {BASE_URL: '', API_KEY: ''},
    staging:     {BASE_URL: '', API_KEY: ''},
    development: {BASE_URL: '', API_KEY: ''},
}

function getEnvironment() {
    // Insert logic here to get the current platform (e.g. staging, production, etc)
    var platform = getPlatform()

    // ...now return the correct environment
    return _Environments[platform]
}

var Environment = getEnvironment()
module.exports = Environment

мой-component.js

var Environment = require('./environment.js')

...somewhere in your code...
var url = Environment.BASE_URL

Это создает одноэлементную среду, к которой можно получить доступ из любого места в пределах области вашего приложения. Вы должны явно указать require(...)модуль из любых компонентов, которые используют переменные окружения, но это хорошо.

Я использовал __DEV__полифилл, встроенный в реагирующий натив, чтобы решить эту проблему. Он автоматически устанавливается до trueтех пор, пока вы не создаете реагирующую версию для производства.

Например:

//vars.js

let url, publicKey;
if (__DEV__) {
  url = ...
  publicKey = ...
} else {
  url = ...
  publicKey = ...
}

export {url, publicKey}

Тогда как раз import {url} from '../vars'и вы всегда получите правильный. К сожалению, это не будет работать, если вам нужно более двух сред, но это просто и не требует добавления дополнительных зависимостей в ваш проект.

Конкретный метод, используемый для установки переменных среды, зависит от службы CI, подхода к сборке, платформы и инструментов, которые вы используете.

Если вы используете Buddybuild for CI для создания приложения и управления переменными среды , и вам нужен доступ к конфигурации из JS, создайте env.js.exampleключи с ключами (с пустыми строковыми значениями) для регистрации в системе контроля версий и используйте Buddybuild для создания env.jsфайл во время сборки на post-cloneшаге, скрывая содержимое файла из журналов сборки, вот так:

#!/usr/bin/env bash

ENVJS_FILE="$BUDDYBUILD_WORKSPACE/env.js"

# Echo what's happening to the build logs
echo Creating environment config file

# Create `env.js` file in project root
touch $ENVJS_FILE

# Write environment config to file, hiding from build logs
tee $ENVJS_FILE > /dev/null <<EOF
module.exports = {
  AUTH0_CLIENT_ID: '$AUTH0_CLIENT_ID',
  AUTH0_DOMAIN: '$AUTH0_DOMAIN'
}
EOF

Подсказка: не забудьте добавить env.jsв .gitignoreконфигурацию, чтобы секреты не попадали в систему контроля версий случайно во время разработки.

Вы можете управлять , как файл будет написана с использованием переменных Buddybuild , как BUDDYBUILD_VARIANTS, например, чтобы получить больший контроль над тем, как ваш конфиг производится во время сборки.

Я думаю, что-то вроде следующей библиотеки может помочь вам решить недостающую часть головоломки, функцию getPlatform ().

https://github.com/joeferraro/react-native-env

const EnvironmentManager = require('react-native-env');

// read an environment variable from React Native
EnvironmentManager.get('SOME_VARIABLE')
  .then(val => {
    console.log('value of SOME_VARIABLE is: ', val);

  })
  .catch(err => {
    console.error('womp womp: ', err.message);
  });

Единственная проблема, которую я вижу с этим, что это асинхронный код. Существует запрос на получение поддержки getSync. Проверьте это тоже.

https://github.com/joeferraro/react-native-env/pull/9

я создал сценарий предварительной сборки для той же проблемы, потому что мне нужны разные конечные точки API для разных сред

const fs = require('fs')

let endPoint

if (process.env.MY_ENV === 'dev') {
  endPoint = 'http://my-api-dev/api/v1'
} else if (process.env.MY_ENV === 'test') {
  endPoint = 'http://127.0.0.1:7001'
} else {
  endPoint = 'http://my-api-pro/api/v1'
}

let template = `
export default {
  API_URL: '${endPoint}',
  DEVICE_FINGERPRINT: Math.random().toString(36).slice(2)
}
`

fs.writeFile('./src/constants/config.js', template, function (err) {
  if (err) {
    return console.log(err)
  }

  console.log('Configuration file has generated')
})

И я создал обычай npm run scriptsдля запуска реакции на родную ..

Мой пакет-json

"scripts": {
    "start-ios": "node config-generator.js && react-native run-ios",
    "build-ios": "node config-generator.js && react-native run-ios --configuration Release",
    "start-android": "node config-generator.js && react-native run-android",
    "build-android": "node config-generator.js && cd android/ && ./gradlew assembleRelease",
    ...
}

Затем в моих службах компоненты просто импортировать автоматически сгенерированный файл:

import config from '../constants/config'

fetch(`${config.API_URL}/login`, params)

Шаг 1: Создайте отдельный компонент, такой как имя компонента: pagebase.js
Шаг 2: Внутри этого кода использования

    export const BASE_URL = "http://192.168.10.10:4848/";
    export const API_KEY = 'key_token';

Шаг 3: Используйте его в любом компоненте, для использования сначала импортируйте этот компонент, а затем используйте его. Импортируйте это и используйте это:

        import * as base from "./pagebase";

        base.BASE_URL
        base.API_KEY

Я использую babel-plugin-transform-inline-environment-variables.

Что я сделал, так это поместил файлы конфигурации в S3 с моими различными средами.

s3://example-bucket/dev-env.sh
s3://example-bucket/prod-env.sh
s3://example-bucket/stage-env.sh

КАЖДЫЙ env файл:

FIRSTENV=FIRSTVALUE
SECONDENV=SECONDVALUE

После этого я добавил новый скрипт, package.jsonкоторый запускает скрипт для комплектации

if [ "$ENV" == "production" ]
then
  eval $(aws s3 cp s3://example-bucket/prod-env.sh - | sed 's/^/export /')
elif [ "$ENV" == "staging" ]
then
  eval $(aws s3 cp s3://example-bucket/stage-env.sh - | sed 's/^/export /')
else
  eval $(aws s3 cp s3://example-bucket/development-env.sh - | sed 's/^/export /')
fi

react-native start

В вашем приложении вы, вероятно, будете иметь файл конфигурации, который имеет:

const FIRSTENV = process.env['FIRSTENV']
const SECONDENV = process.env['SECONDENV']

который будет заменен на babel:

const FIRSTENV = 'FIRSTVALUE'
const SECONDENV = 'SECONDVALUE'

ПОМНИТЕ, что вы должны использовать process.env['STRING']НЕ, process.env.STRINGиначе он не будет преобразован должным образом.

[Источник] Из того, что я обнаружил, похоже, что по умолчанию можно выполнять только конфигурации для производства и разработки (без промежуточной или другой среды) - это правильно?

Прямо сейчас я использую файл environment.js, который можно использовать для обнаружения каналов выпуска expo и изменения возвращаемых переменных на основании этого, но для сборки мне нужно обновить не- DEV переменную, возвращаемую в качестве промежуточной или промежуточной. прод:

import { Constants } from 'expo';
import { Platform } from 'react-native';
const localhost = Platform.OS === 'ios' ? 'http://localhost:4000/' : 'http://10.0.2.2:4000/';
const ENV = {
  dev: {
    apiUrl: localhost,
  },
  staging: {
    apiUrl: 'https://your-staging-api-url-here.com/'
  },
  prod: {
    apiUrl: 'https://your-prod-api-url-here.com/'
  },
}
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else {
    // When publishing to production, change this to `ENV.prod` before running an `expo build`
    return ENV.staging;
  }
}
export default getEnvVars;

альтернативы

У кого-нибудь есть опыт использования response-native-dotenv для проектов, построенных с помощью expo? Я хотел бы услышать ваши мысли

https://github.com/zetachang/react-native-dotenv

у вас также могут быть разные сценарии env: production.env.sh development.env.sh production.env.sh

А затем отправьте их в начало, когда начнете работать [который просто привязан к псевдониму], так что все, что имеет файл sh, это экспорт для каждой переменной env:

export SOME_VAR=1234
export SOME_OTHER=abc

И затем добавление babel-plugin-transform-inline-environment-variable позволит получить к ним доступ в коде:

export const SOME_VAR: ?string = process.env.SOME_VAR;
export const SOME_OTHER: ?string = process.env.SOME_OTHER;

Ответ @ chapinkapa хорош. Подход, который я выбрал с тех пор, как Mobile Center не поддерживает переменные среды, заключается в предоставлении конфигурации сборки через собственный модуль:

На андроиде:

   @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        String buildConfig = BuildConfig.BUILD_TYPE.toLowerCase();
        constants.put("ENVIRONMENT", buildConfig);
        return constants;
    } 

или на ios:

  override func constantsToExport() -> [String: Any]! {
    // debug/ staging / release
    // on android, I can tell the build config used, but here I use bundle name
    let STAGING = "staging"
    let DEBUG = "debug"

    var environment = "release"
    if let bundleIdentifier: String = Bundle.main.bundleIdentifier {
      if (bundleIdentifier.lowercased().hasSuffix(STAGING)) {
        environment = STAGING
      } else if (bundleIdentifier.lowercased().hasSuffix(DEBUG)){
        environment = DEBUG
      }
    }

    return ["ENVIRONMENT": environment]
  }

Вы можете прочитать конфигурацию сборки синхронно и решить в Javascript, как вы будете себя вести.

Можно получить доступ к переменным с помощью process.env.blablaвместо process.env['blabla']. Я недавно заставил это работать и прокомментировал, как я сделал это по проблеме на GitHub, потому что у меня были некоторые проблемы с кешем на основе принятого ответа. Здесь проблема.

Для последних версий RN вы можете использовать этот собственный модуль: https://github.com/luggit/react-native-config