환경 변수의 땅으로 돌아가기

내 첫 번째 전체 스택 앱 배포에 대한 내 블로그 게시물을 읽으면 "환경 변수의 영역으로의 빠른 일탈"을 기억할 수 있습니다(아직 읽지 않은 경우 확인할 수 있습니다!). React 앱에서 데이터를 보호하려는 분들을 위해 작은 후속 글을 작성하고 싶었습니다.

에서 언급했듯이 저는 소규모 비즈니스를 위한 프로젝트에 참여하고 있습니다. 저는 React로 사이트를 구축했으며 지난 게시물에서 언급했듯이 EmailJS를 활용하여 문의 양식을 처리했습니다. Github에 푸시할 때 클라이언트의 이메일 계정으로 다시 추적할 수 있는 정보를 푸시하고 싶지 않다는 것을 알았고 환경 변수를 사용하여 Ruby에서 이를 지원한 후에는 React에서도 마찬가지입니다! 사용할 수 있는 npm 모듈이 있고 전체 프로세스가 매우 쉽고 간단합니다.


시작하려면 패키지에 dotenv를 추가해야 합니다. 운영:

npm install dotenv --save

성공적으로 설치되면 dotenv 가 필요합니다. Ruby 연습의 environment.rb에 요구 사항을 추가한 것처럼 React의 경우 App.js 에서 요구할 것입니다. 계속해서 return 문 전에 앱 함수에 다음 줄을 입력하세요.

require('dotenv').config()

문맥상 다음과 같아야 합니다.

function App() {
  require('dotenv').config()
  return (
  ...
  );
}

export default App;

엄청난! 이제 .env 파일을 생성하려고 합니다. Ruby 연습에서처럼 .env 파일을 시스템 구조의 루트 수준에 넣고 파일은 .env 라고 합니다. 그 파일에서 우리는 당신의 비밀 키를 정의할 것입니다. 참고로 비밀 키는 모두 대문자이며 그 뒤에 =가 붙은 다음 보간하려는 값이 붙습니다. 중요한 알림: 여기에 공백을 추가하지 않도록 하십시오!

따라서 해당 .env 파일의 예는 다음과 같습니다.

REACT_APP_ENV_SERVICE_ID=anexampleserviceid
REACT_APP_ENV_TEMPLATE_ID=anexampletemplateid
REACT_APP_ENV_USER_ID=anexampleuserid

이제 .env 파일을 만들었으므로 gitignore 에 추가하려고 합니다. 내 Ruby 연습에서 언급했듯이 Github에는 gitignore 파일을 생성/추가하기 위한 훌륭한 리소스가 있으며 (거의 모든 코딩 언어에 대해!) here 파일을 찾을 수 있습니다. 우리의 경우 다음을 추가하여 .env 파일을 추가합니다.

# Used by dotenv library to load environment variables.
 .env

gitignore 파일에. (자유롭게 git status 실행하여 모든 것이 올바르게 작동하는지 확인하십시오!)

이제 환경 변수가 필수/사용 가능, 생성 및 보호되었으므로 process.env.SECRET_KEY 형식으로 호출하여 사용을 시작할 수 있습니다. 사용 방법의 예는 다음과 같습니다.

    function sendEmail(e) {
      e.preventDefault();

      emailjs.sendForm(process.env.REACT_APP_ENV_SERVICE_ID, process.env.REACT_APP_ENV_TEMPLATE_ID, e.target, process.env.REACT_APP_ENV_USER_ID)
        .then((result) => {
            console.log(result.text);  alert("Message sent successfully!");
        }, (error) => {
            console.log(error.text); alert("Failed."+error);
        });
        e.target.reset()
    }

그리고 결국, 그게 다야! 매우 쉽고 매우 안전합니다! 이 연습이 도움이 되었기를 바라며 다음에 뵙겠습니다!

앱을 배포할 계획이라면 환경 변수를 gitignore에 포함하면 해당 데이터를 가져오지 않고는 작동하지 않는다는 것을 기억할 가치가 있습니다. Heroku로 이를 수행하는 방법에 대한 자세한 내용은 내 게시물을 참조하십시오.Netlify에서 "Build & deploy"탭의 "Environment"섹션에 있는 프로젝트의 "Site settings"에서 환경 변수를 추가할 위치를 찾을 수 있습니다!