การตั้งค่าตัวแปรสภาพแวดล้อมในปฏิกิริยาพื้นเมือง?

ฉันใช้ react-native เพื่อสร้างแอปข้ามแพลตฟอร์ม แต่ฉันไม่ทราบวิธีตั้งค่าตัวแปรสภาพแวดล้อมเพื่อให้ฉันสามารถมีค่าคงที่ต่างกันสำหรับสภาพแวดล้อมที่แตกต่างกัน

ตัวอย่าง:

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

แทนการเข้ารหัสค่าคงที่แอปของคุณอย่างหนักและทำการสลับกับสภาพแวดล้อม (ฉันจะอธิบายวิธีการทำเช่นนั้นในชั่วครู่หนึ่ง) ฉันขอแนะนำให้ใช้ข้อเสนอแนะสิบสองปัจจัยในการกำหนดกระบวนการสร้างของBASE_URLคุณAPI_KEYและของคุณ

เพื่อที่จะตอบวิธีการเปิดเผยสภาพแวดล้อมของคุณไปreact-nativeผมขอแนะนำให้ใช้ Babel ของBabel-ปลั๊กอินเปลี่ยน-อินไลน์สิ่งแวดล้อมตัวแปร

ในการทำให้การทำงานนี้คุณต้องดาวน์โหลดปลั๊กอินจากนั้นคุณจะต้องตั้งค่า.babelrcและควรมีลักษณะดังนี้:

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

ดังนั้นถ้าคุณ transpile code-native code ของคุณโดยการรันAPI_KEY=my-app-id react-native bundle(หรือ start, run-ios หรือ run-android) สิ่งที่คุณต้องทำก็คือให้โค้ดของคุณมีลักษณะดังนี้:

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

แล้วบาเบลจะแทนที่ด้วย:

const apiKey = 'my-app-id';

หวังว่านี่จะช่วยได้!

ที่ง่ายที่สุด (ไม่ดีที่สุดหรือเหมาะ ) วิธีการแก้ปัญหาที่ผมพบคือการใช้งานตอบสนองพื้นเมือง-dotenv คุณเพียงเพิ่มค่าล่วงหน้า "react-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"

ในความคิดของตัวเลือกที่ดีที่สุดคือการใช้งานตอบสนองพื้นเมือง-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

หรือสำหรับการประกอบแอพสำหรับการผลิต (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__polyfill ที่สร้างขึ้นเป็นปฏิกิริยาพื้นเมืองเพื่อแก้ปัญหานี้ มันถูกตั้งค่าโดยอัตโนมัติtrueตราบเท่าที่คุณไม่ได้สร้างปฏิกิริยาพื้นเมืองสำหรับการผลิต

เช่น:

//vars.js

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

export {url, publicKey}

จากนั้นเพียงแค่import {url} from '../vars'คุณจะได้รับสิ่งที่ถูกต้องเสมอ น่าเสียดายที่วิธีนี้ใช้ไม่ได้หากคุณต้องการมากกว่าสองสภาพแวดล้อม แต่มันง่ายและไม่เกี่ยวข้องกับการเพิ่มการอ้างอิงเพิ่มเติมให้กับโครงการของคุณ

วิธีการเฉพาะที่ใช้ในการตั้งค่าตัวแปรสภาพแวดล้อมจะแตกต่างกันไปตามบริการ CI วิธีการสร้างแพลตฟอร์มและเครื่องมือที่คุณใช้

หากคุณกำลังใช้ Buddybuild สำหรับ CI เพื่อสร้างแอปและจัดการตัวแปรสภาพแวดล้อมและคุณต้องเข้าถึงการกำหนดค่าจาก JS ให้สร้างenv.js.exampleด้วยปุ่ม (พร้อมค่าสตริงว่าง) สำหรับการเช็คอินไปยังการควบคุมแหล่งและใช้ Buddybuild เพื่อสร้างenv.jsไฟล์ที่เวลา build ในpost-cloneขั้นตอนซ่อนเนื้อหาไฟล์จาก build ของบันทึกเช่น:

#!/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เพื่อเพิ่มการควบคุมการสร้าง config ของคุณในเวลาบิลด์

ฉันคิดว่าบางสิ่งบางอย่างเช่นไลบรารี่ต่อไปนี้จะช่วยคุณแก้ไขปริศนาที่ขาดหายไปฟังก์ชัน 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);
  });

ปัญหาเดียวที่ฉันเห็นนี้คือรหัส async มีคำขอดึงเพื่อสนับสนุน getSync ลองดูสิ

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

ฉันได้สร้างสคริปต์บิลด์ก่อนหน้าสำหรับปัญหาเดียวกันเพราะฉันต้องการจุดปลาย api differents สำหรับสภาพแวดล้อม differents

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เพื่อดำเนินการวิ่งตอบสนองพื้นเมือง ..

package-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']NOT process.env.STRINGหรือไม่แปลงอย่างถูกต้อง

[แหล่งที่มา]จากสิ่งที่ฉันพบดูเหมือนว่าจะเป็นไปได้ที่จะกำหนดค่าการผลิตและการพัฒนาเท่านั้น (ไม่มีการจัดเตรียมหรือสภาพแวดล้อมอื่น ๆ ) - ถูกต้องหรือไม่

ตอนนี้ฉันใช้ไฟล์ environment.js ที่สามารถใช้เพื่อตรวจจับช่องทาง expo และเปลี่ยนตัวแปรที่ส่งคืนตามนั้น แต่สำหรับการสร้างฉันต้องอัปเดตตัวแปรnon- DEV ที่ส่งคืนเป็น staging หรือ แยง:

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;

ทางเลือก

ไม่มีใครมีประสบการณ์การใช้ react-native-dotenv สำหรับโครงการที่สร้างขึ้นด้วยงานแสดงสินค้าหรือไม่? ฉันชอบที่จะได้ยินความคิดของคุณ

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 จะอนุญาตให้เข้าถึงได้ในรหัส:

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

คำตอบของ @chapinkapa เป็นสิ่งที่ดี วิธีการที่ฉันดำเนินการเนื่องจาก Mobile Center ไม่สนับสนุนตัวแปรสภาพแวดล้อมคือการเปิดเผยการกำหนดค่าการสร้างผ่านโมดูลเนทิฟ:

บน Android:

   @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