React-Native에서 비밀 관리(2022)

소개

SECRETS 생성 및 유지 관리는 일부 데이터를 소스 코드나 git에 노출하지 않고 안전하게 유지하는 일반적인 방법 중 하나입니다. 웹 앱의 세계에서는 .env 파일을 만들고 그 안에 모든 환경 변수를 만드는 것이 매우 간단하지만 React-Native의 세계에서는 원하는 결과를 얻기 위해 몇 가지 추가 단계를 따라야 합니다. 이 게시물에서는 이러한 몇 가지 추가 단계를 살펴보고 개발, 스테이징 및 프로덕션과 같은 다양한 환경을 관리해 보겠습니다.

설치:

React-Native 의 공식 문서를 사용하여 React-Native에서 기본 프로젝트를 설정합니다.

그런 다음 NPM 또는 Yarn을 사용하여 아래 명령으로 프로젝트에 ' react-native-dotenv ' 라이브러리를 설치합니다.

오후:

npm i react-native-dotenv

실:

yarn add react-native-dotenv

용법:

babel.config.js 파일을 열고 플러그인 배열 내부의 하위 배열로 아래 구성을 추가합니다.

babel.config.js

plugins: [
  [
      'module:react-native-dotenv',
      {
        envName: 'APP_ENV',
        moduleName: '@env',
        path: '.env',
        blocklist: null,
        allowlist: null,
        safe: false,
        allowUndefined: false,
        verbose: false,
      },
  ]
]

위의 구성을 설명하기 위해 프로젝트의 루트에 있을 .env 파일의 경로를 정의하기만 하면 됩니다. 'envName'은 터미널에서 런타임 중에 변수를 설정할 때 사용됩니다. 사용 가능한 다른 옵션에 대한 자세한 내용은 이 패키지의 문서를 참조하세요.

.env

프로젝트의 루트에 .env 파일을 생성합니다.

## Development
DEV_BASE_URL=https://example-development.com/api/v1

## Staging
STAG_BASE_URL=https://example-staging.com/api/v1

## Production
PROD_BASE_URL=https://example-production.com/api/v1

필요에 따라 원하는 환경(개발, 스테이징, 프로덕션)에 대해 .env 파일에 환경 변수를 만듭니다.

소스/환경

'src' 폴더 안에 'env'라는 이름의 폴더를 만들고, 'src' 폴더가 없으면 프로젝트 루트에 하나 만듭니다.

'env' 폴더 아래에 index.js, development.js, staging.js, production.js의 네 가지 파일을 만듭니다. 아래에 설명된 대로 각 파일에 다음 코드를 추가합니다.

개발.js

import { DEV_BASE_URL } from '@env';

export default { BASE_URL: DEV_BASE_URL };

staging.js

import { STAG_BASE_URL } from '@env';

export default { BASE_URL: STAG_BASE_URL };

production.js

import { PROD_BASE_URL } from '@env';

export default { BASE_URL: PROD_BASE_URL };

index.js

import ENV from './development';

export default ENV;

src/api/index.js

이제 프로젝트 내에서 이 ENV 변수를 사용하려면 아래와 같이 env 폴더에서 간단히 가져올 수 있습니다.

import ENV from '../env';

const baseUrl = ENV.BASE_URL

변화하는 환경

이제 중요한 부분은 환경, 개발을 기본값으로 변경하고 스테이징 또는 프로덕션으로 전환하는 것입니다.

가장 쉬운 방법은 env 폴더의 index.js 파일에서 가져오기 경로를 변경하는 것입니다. 세 파일 중 하나를 가져오면 환경 변수를 사용하여 애플리케이션의 변경 사항을 확인할 수 있습니다.

index.js

import ENV from './development';
// import ENV from './staging'; 
// import ENV from './production';


export default ENV;

다른 방법은 환경을 전환하고 싶을 때 index.js 파일을 덮어쓰는 스크립트를 만드는 것입니다.

프로젝트의 루트에 scripts 폴더를 만듭니다. 다음 파일을 작성하십시오.

스크립트/development.js

이 파일은 env 폴더 내의 index.js 파일을 덮어씁니다.

const fs = require('fs');
const path = './src/env/index.js';

const data = `import ENV from './development';
export default ENV;`;

fs.writeFile(path, data, 'utf8', function (err) {
  if (err) return console.log('[ERROR]: Changing env to development', err);
  else {
    console.log('[Environment]: DEVELOPMENT\n');
  }
});

마찬가지로 staging.js 및 production.js와 같은 다른 파일을 만들고 'development'를 'staging' 또는 'production'으로 바꾸십시오.

development.sh

실행할 스크립트를 생성하고 env 폴더 내의 index.js 파일을 덮어씁니다.

#!/usr/bin/env bash
echo '-----Changing ENV to DEVELOPMENT-----'
node ./scripts/development.js

마찬가지로 staging.sh 및 production.sh와 같은 다른 스크립트를 만들고 'development'를 'staging' 또는 'production'으로 바꾸십시오.

마지막으로 package.json 파일 내에서 아래 스크립트를 추가하고 환경 전환이 필요할 때 실행합니다.

패키지.json

'scripts': {
   'start': './scripts/development.sh && react-native start',
   'staging': './scripts/staging.sh && react-native start',
   'production': './scripts/production.sh && react-native start'
}

참고: 이러한 스크립트는 명령을 실행하기 위해 터미널에 대한 권한이 필요할 수 있습니다. 위의 설정을 통해 이제 환경 간에 전환하고 다음 React-Native 프로젝트에서 비밀을 저장할 수 있습니다.

오늘은 여기까지입니다 여러분! 끝까지 읽어주셔서 감사합니다.

빨리 다음편으로 갑시다.

원래 게시 날짜: https://blogs.appymango.com/blogs/62a9672d6130cd41c4432da1