Đặt biến môi trường trong phản ứng gốc?

Tôi đang sử dụng Reac -igen để xây dựng một ứng dụng đa nền tảng, nhưng tôi không biết cách đặt biến môi trường để tôi có thể có các hằng số khác nhau cho các môi trường khác nhau.

Thí dụ:

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

Thay vì mã hóa cứng các hằng số ứng dụng của bạn và thực hiện chuyển đổi môi trường (tôi sẽ giải thích cách thực hiện điều đó ngay lập tức), tôi khuyên bạn nên sử dụng đề xuất mười hai yếu tố để quy trình xây dựng của bạn xác định BASE_URLvà của bạn API_KEY.

Để trả lời cách phơi bày môi trường của bạn react-native, tôi khuyên bạn nên sử dụng các biến babel-plugin-Transform-inline-môi trường-biến của Babel .

Để làm việc này, bạn cần tải xuống plugin và sau đó bạn sẽ cần phải thiết lập một .babelrcvà nó sẽ trông giống như thế này:

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

Và vì vậy, nếu bạn dịch mã mã gốc phản ứng của mình bằng cách chạy API_KEY=my-app-id react-native bundle(hoặc start, run-ios hoặc run-android) thì tất cả những gì bạn phải làm là để mã của bạn trông như thế này:

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

Và sau đó Babel sẽ thay thế bằng:

const apiKey = 'my-app-id';

Hi vọng điêu nay co ich!

Giải pháp đơn giản nhất (không phải là tốt nhất hoặc lý tưởng ) mà tôi tìm thấy là sử dụng Reac -igen-dotenv . Bạn chỉ cần thêm cài đặt trước "Reac -igen-dotenv" vào .babelrctệp của bạn tại thư mục gốc của dự án như sau:

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

Tạo một .envtệp và thêm thuộc tính:

echo "SOMETHING=anything" > .env

Sau đó, trong dự án của bạn (JS):

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

Theo tôi, lựa chọn tốt nhất là sử dụng Reac -igen-config . Nó hỗ trợ 12 yếu tố .

Tôi thấy gói này cực kỳ hữu ích. Bạn có thể thiết lập nhiều môi trường, ví dụ như phát triển, dàn dựng, sản xuất.

Trong trường hợp của Android, các biến cũng có sẵn trong các lớp Java, gradle, AndroidManifest.xml, v.v. Trong trường hợp của iOS, các biến cũng có sẵn trong các lớp Obj-C, Info.plist.

Bạn chỉ cần tạo tập tin như

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

Bạn điền các tệp này bằng khóa, các giá trị như

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

và sau đó chỉ cần sử dụng nó:

import Config from 'react-native-config'

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

Nếu bạn muốn sử dụng các môi trường khác nhau, về cơ bản, bạn đặt biến ENVFILE như thế này:

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

hoặc để lắp ráp ứng dụng cho sản xuất (android trong trường hợp của tôi):

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

React bản địa không có khái niệm về các biến toàn cục. Nó thực thi nghiêm ngặt phạm vi mô-đun , để thúc đẩy mô-đun thành phần và tái sử dụng.

Đôi khi, mặc dù, bạn cần các thành phần để nhận thức được môi trường của họ. Trong trường hợp này, rất đơn giản để xác định một Environmentmô-đun mà các thành phần sau đó có thể gọi để lấy các biến môi trường, ví dụ:

môi trường

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

my-thành phần.js

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

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

Điều này tạo ra một môi trường đơn lẻ có thể được truy cập từ bất kỳ đâu trong phạm vi ứng dụng của bạn. Bạn phải rõ ràng require(...)mô-đun từ bất kỳ thành phần nào sử dụng biến môi trường, nhưng đó là một điều tốt.

Tôi đã sử dụng __DEV__polyfill được tích hợp sẵn để phản ứng để giải quyết vấn đề này. Nó được tự động đặt thành truemiễn là bạn không xây dựng phản ứng tự nhiên cho sản xuất.

Ví dụ:

//vars.js

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

export {url, publicKey}

Sau đó, chỉ import {url} from '../vars'và bạn sẽ luôn luôn có được một cái chính xác. Thật không may, điều này sẽ không hoạt động nếu bạn muốn có nhiều hơn hai môi trường, nhưng nó dễ dàng và không liên quan đến việc thêm nhiều phụ thuộc vào dự án của bạn.

Phương pháp cụ thể được sử dụng để đặt biến môi trường sẽ thay đổi theo dịch vụ CI, cách tiếp cận xây dựng, nền tảng và công cụ bạn đang sử dụng.

Nếu bạn đang sử dụng Buddybuild cho CI để xây dựng ứng dụng và quản lý các biến môi trường và bạn cần truy cập để định cấu hình từ JS, hãy tạo một env.js.examplekhóa (có giá trị chuỗi trống) để đăng ký để kiểm soát nguồn và sử dụng Buddybuild để tạo env.jstệp tại thời điểm xây dựng trong post-clonebước, ẩn nội dung tệp khỏi nhật ký bản dựng, như vậy:

#!/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

Mẹo: Đừng quên thêm env.jsvào.gitignore để cấu hình và các bí mật không được kiểm tra trong kiểm soát nguồn một cách tình cờ trong quá trình phát triển.

Sau đó, bạn có thể quản lý cách tệp được ghi bằng các biến Buddybuild như BUDDYBUILD_VARIANTSđể có quyền kiểm soát lớn hơn đối với cách cấu hình của bạn được tạo trong thời gian xây dựng.

Tôi nghĩ rằng một cái gì đó giống như thư viện sau đây có thể giúp bạn giải quyết phần còn thiếu của câu đố, hàm getPl platform ().

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);
  });

Vấn đề duy nhất tôi thấy với điều này, đó là mã async. Có một yêu cầu kéo để hỗ trợ getSync. Kiểm tra nó quá.

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

tôi đã tạo một tập lệnh xây dựng trước cho cùng một vấn đề vì tôi cần một số điểm cuối api khác nhau cho các môi trường khác nhau

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')
})

Và tôi đã tạo ra một tùy chỉnh npm run scriptsđể thực thi Reac -igen ..

Gói của tôi

"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",
    ...
}

Sau đó, trong các thành phần dịch vụ của tôi chỉ cần nhập tệp được tạo tự động:

import config from '../constants/config'

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

Bước 1: Tạo thành phần riêng biệt như thế này Tên thành phần: pagebase.js
Bước 2: Bên trong mã này sử dụng mã này

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

Bước 3: Sử dụng nó trong bất kỳ thành phần nào, để sử dụng nó trước tiên hãy nhập thành phần này sau đó sử dụng nó. Nhập nó và sử dụng nó:

        import * as base from "./pagebase";

        base.BASE_URL
        base.API_KEY

Tôi sử dụng babel-plugin-transform-inline-environment-variables.

Những gì tôi đã làm là đặt một tệp cấu hình trong S3 với các môi trường khác nhau của tôi.

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

MACHI tập tin env:

FIRSTENV=FIRSTVALUE
SECONDENV=SECONDVALUE

Sau đó, tôi đã thêm một tập lệnh mới package.jsonđể chạy tập lệnh cho gói

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

Trong ứng dụng của bạn, bạn có thể sẽ có một tệp cấu hình có:

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

sẽ được thay thế bởi babel để:

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

HÃY NHỚ bạn phải sử dụng process.env['STRING']KHÔNG process.env.STRINGhoặc nó sẽ không chuyển đổi đúng cách.

[Nguồn] Từ những gì tôi tìm thấy, có vẻ như theo mặc định, chỉ có thể thực hiện các cấu hình sản xuất và phát triển (không có dàn dựng hoặc các môi trường khác) - đúng không?

Ngay bây giờ, tôi đã sử dụng tệp môi trường có thể được sử dụng để phát hiện các kênh phát hành expo và thay đổi các biến được trả về dựa trên đó, nhưng để xây dựng, tôi cần cập nhật biến không DEV được trả về để phân tầng hoặc sản phẩm:

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;

Lựa chọn thay thế

Có ai có kinh nghiệm sử dụng Reac -igen-dotenv cho các dự án được xây dựng bằng expo không? Tôi rất thích nghe suy nghĩ của bạn

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

bạn cũng có thể có các tập lệnh env khác nhau: sản xuất.env.sh Development.env.sh sản xuất.env.sh

Và sau đó nguồn chúng vào khi bắt đầu hoạt động [chỉ gắn với bí danh], vì vậy tất cả các tệp sh có là xuất cho mỗi biến env:

export SOME_VAR=1234
export SOME_OTHER=abc

Và sau đó thêm các biến babel-plugin-Transform-inline-môi trường sẽ cho phép truy cập chúng trong mã:

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

Câu trả lời của chapinkapa là tốt. Một cách tiếp cận mà tôi đã thực hiện vì Trung tâm di động không hỗ trợ các biến môi trường, là hiển thị cấu hình bản dựng thông qua một mô-đun gốc:

Trên 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;
    } 

hoặc trên 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]
  }

Bạn có thể đọc cấu hình bản dựng một cách đồng bộ và quyết định trong Javascript cách bạn sẽ hành xử.

Có thể truy cập các biến với process.env.blablathay vì process.env['blabla']. Gần đây tôi đã làm cho nó hoạt động và nhận xét về cách tôi đã làm nó trên một vấn đề trên GitHub vì tôi có một số vấn đề với bộ đệm dựa trên câu trả lời được chấp nhận. Đây là vấn đề.

Đối với các phiên bản RN mới nhất, bạn có thể sử dụng mô-đun gốc này: https://github.com/luggit/react-native-config