환경 변수를 사용하여 보호된 리소스에 액세스

Managed Runtime 환경 변수를 사용하면 코드를 변경하지 않고도 환경에서 실행 중인 애플리케이션 프로세스에 변수를 추가할 수 있습니다. 환경 변수는 안전하게 저장되므로 다음과 같은 활용 사례에 적합합니다.

API 키로 보호되는 타사 리소스 호출
조건부로 React.js 렌더링 변경

자세한 내용은 환경 변수를 참조하십시오.

환경 변수를 사용하여 안전한 외부 리소스에 액세스하는 데 사용되는 API 키를 저장해 보겠습니다. 이 튜토리얼의 리소스는 가상의 타사 콘텐츠 관리 시스템(CMS)입니다. CMS에 요청하고 보호된 데이터로 응답하는 처리기를 Express.js 서버의 ssr.js에 추가합니다. 그런 다음 이 처리기를 호출하여 데이터에 액세스합니다.

보안상의 이유로, 이 API 키는 클라이언트 측 코드가 아닌 서버 측 코드에서 CMS를 호출합니다.

사전 요구 사항

이 튜토리얼을 완료하려면 먼저 다음을 수행합니다.

Managed Runtime 및 Runtime Admin에 대한 액세스 권한을 부여 받습니다. Managed Runtime 관리를 참조하십시오.
Managed Runtime API를 사용하기 위한 API 키를 얻습니다. API 키를 찾으려면 Runtime Admin 도구에 로그인하여 계정 설정 페이지로 이동하십시오.
환경 변수를 설정하는 프로젝트에 대한 개발자 또는 관리자 역할을 부여 받습니다. 액세스 권한이 없는 경우 Managed Runtime 관리자 역할의 다른 사람에게 도움을 요청하십시오.

로컬 컴퓨터에서

이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.

로컬로 환경 변수 설정

현재 세션에서 환경 변수를 설정하려면 터미널을 열고 다음 명령을 실행합니다.
- Windows: set CMS_API_KEY='my-cms-api-key'
- macOS를 비롯한 대부분의 Unix 계열 운영 체제:export CMS_API_KEY='my-cms-api-key'
다음을 실행하여 환경 변수가 올바르게 설정되었는지 확인합니다.
- Windows: echo %CMS_API_KEY%
- macOS를 비롯한 대부분의 Unix 계열 운영 체제:echo $CMS_API_KEY
이 명령은 my-cms-api-key를 출력으로 반환합니다.
ssr.js에서 CMS를 호출하기 위해 이 JavaScript 코드를 추가합니다.

1async function fetchCMSData() {
2  const key = process.env.CMS_API_KEY;
3  if (!key) {
4    throw new Error("Environment variable CMS_API_KEY isn't set.");
5  }
6
7  return await fetch("https://api.example.com/", {
8    headers: {
9      Authorization: "Bearer " + key,
10    },
11  }).json();
12}
13
14async function handlerCMS(req, res) {
15  try {
16    const data = await fetchCMSData();
17    return res.json(data);
18  } catch (err) {
19    return res.status(500).json({ error: err.message });
20  }
21}

이 처리기를 Express.js 서버의 경로에 바인딩합니다. 그런 다음 npm start를 사용하여 개발 서버를 시작합니다. 마지막으로, 로컬에서 처리기로 이동하여 CMS 데이터가 반환되는지 확인합니다.

비프로덕션 또는 프로덕션 환경에서

변경 사항을 프로덕션 환경에 배포하기 전에 비프로덕션 환경에서 이러한 단계를 테스트하는 것이 좋습니다.