programing

Firebase 호스팅에서 개인 환경 변수를 어떻게 설정합니까?

topblog 2023. 6. 12. 21:04
반응형

Firebase 호스팅에서 개인 환경 변수를 어떻게 설정합니까?

최근 Divshot이 종료되면서 여러 애플리케이션을 Firebase 호스팅으로 전환했습니다.이 앱들 중 일부는 외부 API에 연결되기 때문에 파이어베이스 호스팅에 개인 환경 변수(예: S3 액세스용 비밀 키)를 저장하는 방법이 필요합니다. 아이디어가 있으신 분?https://www.firebase.com/blog/2015-10-29-managing-development-environments.html 이라는 기사가 있지만 이 기사는 비공개 환경 변수에만 해당됩니다.

감사합니다!

Firebase Hosting은 개인 환경 변수를 저장할 수 없습니다.정적 호스팅 전용입니다.개인 변수를 사용하려면 해당 서버 쪽을 사용해야 합니다.

만약 당신이 비밀을 다루는 "파이어베이스 방식"을 원한다면, 당신은 파이어베이스 클라우드 기능을 사용할 수 있고, 클라우드 기능에 환경 변수를 설정할 수 있습니다.다음은 이러한 방법에 대한 설명서 링크입니다. https://firebase.google.com/docs/functions/config-env

Firebase 호스팅에 클라우드 기능이 추가되지 않은 경우 Firebase CLI 도구를 통해 추가할 수 있습니다.

firebase init functions
npm install --save firebase-functions@latest
npm install -g firebase-tools

자세한 내용은 https://firebase.google.com/docs/hosting/functions 을 참조하십시오.

클라우드 기능에서 환경 변수를 설정하려면 명령줄에서 다음과 같이 설정할 수도 있습니다.

firebase functions:config:set someservice.key="THE API KEY" someservice.id="THE CLIENT ID"

그런 다음 다음과 같은 함수에서 변수에 액세스할 수 있습니다.

const functions = require('firebase-functions');
const request = require('request-promise');

exports.userCreated = functions.database.ref('/users/{id}').onWrite(event => {
  let email = event.data.child('email').val();

  return request({
    url: 'https://someservice.com/api/some/call',
    headers: {
      'X-Client-ID': functions.config().someservice.id,
      'Authorization': `Bearer ${functions.config().someservice.key}`
    },
    body: {email: email}
  });
});

당신은 구글의 시크릿 매니저 API를 사용해 볼 수 있습니다.

Firebase Cloud Functions에서 환경 변수로 저장하는 것보다 안전한 이유는 다음과 같습니다.

  1. Secret Manager API는 최소 권한 원칙을 적용합니다.즉, 암호에 대한 액세스를 제한할 수 있으므로 인증된 사용자만 암호를 보거나 편집할 수 있습니다.
  2. 비밀은 AES-256을 사용하여 암호화됩니다.
  3. 이상 징후 탐지에 사용할 수 있는 감사 로깅 기능이 있습니다.

소스 코드의 더 많은 예를 보려면 여기에서 Google Cloud의 Secret Manager NPM 패키지 설명서를 참조하십시오.

도움이 되길 바랍니다!

GitHub 생성을 고려할 수 ..env변수를 지정할 수 있습니다.

및 GitHub ..github/workflows/{action}.yml 합니다.

...
- name: Create env file
    run: |
      touch .env
      echo API_ENDPOINT=${{ secrets.API_ENDPOINT }} >> .env
      echo API_KEY=${{ secrets.API_KEY }} >> .env
      cat .env
...

그리고 코드베이스에서, 그냥 전화하세요.process.env.API_KEY변수를 사용합니다!

다음 기사를 기반으로 저에게 맞는 솔루션이 있습니다. https://victorbruce82.medium.com/how-to-deploy-a-react-app-to-different-firebase-hosting-environments-dev-and-prod-da3f4cae9a1e

그것은 사용합니다.env-cmd또한 현재 방화벽 기반에서 올바른 환경 변수를 얻기 위해 클라우드 기능이 필요하지 않습니다. 사이트 호스팅이 실행되는 시점은 다음과 같습니다.NODE_ENV 상항되옴아돌을 반환합니다.production화재 기지에 배치된 경우)

두 개의 별도 소방 기지 프로젝트를 사용하는 것을 기준으로 합니다. 하나는 생산용, 하나는 개발용입니다.따라서 두 번째 화재 기지 프로젝트를 추가한 후 개발에 사용됩니다.

다음을 사용하여 개발 프로젝트를 현재 프로젝트에 추가합니다.firebase use --add별칭을 사용합니다.dev.

개의 두개만을 ..env 파일:.env.production그리고..env.development과 같은합니다.

APP_ENV="production"

)로 합니다.development 파일env.development 파일에 합니다.

파일에 를 추가할 . 하십시오.).gitignore코드베이스에 비밀이 없어야 합니다.)

당신 을 이제코서드참수있다습니할조이를에▁this다▁you▁with와 함께 참조할 수 .process.env.APP_ENV:

const websiteConfig = process.env.APP_ENV=== 'production' ? {
  themeColor: '#fff'
} : {
  themeColor: '#ccc'
}

(또한 사용자는 다음을 선택할 수 있습니다.APP_THEME_COLOR 수 .env 파일 이름은 .env 파일 은 .env 파일 이름은 .env 파일 이름과 같습니다.)

를 설치합니다.env-cmd

npm i -D env-cmd

이제 스크립트 2개를 추가합니다.package.json:

"build:dev":"env-cmd -f .env.development npm run build && firebase deploy -P dev",
"build:prod":"env-cmd -f .env.production npm run build && firebase deploy -P prod"

이제 두 개의 말 그대로 다른 환경에 코드를 배포할 수 있지만 환경 변수도 서로 다릅니다.

( (으)로 사용: 사용NODE_ENV작동하지 . .env 파일을 합니다. 항상 반환됩니다.productionFirebase 호스팅에 배치된 경우)

.envor 환경 값을 Firebase 호스팅에 추가하려면 다음 단계를 수행합니다.

  1. Google 클라우드 계정으로 이동합니다. https://cloud.google.com/
  2. Firebase에서 호스팅하는 프로젝트와 동일한 프로젝트를 선택합니다.
  3. 합니다.cloud function
  4. 하세요.edit환경 변수, 빌드 변수를 추가할 수 있습니다.
  5. (선택 사항) 빌드 파일을 볼 수 있고 .env 파일을 추가/편집할 수 있습니다.

여기에 이미지 설명 입력

2023년 현재 대부분의 API 액세스 키에 대해 구성 대신 암호를 사용해야 합니다.

firebase functions:secrets:set YOUR_ENV_VARIABLE_NAME

그리고 비밀을 콘솔에 복사하여 붙여넣습니다.

그런 다음 기능을 사용하여 액세스할 수 있습니다.

exports["myfunc"] = runWith({secrets: ["YOUR_ENV_VARIABLE_NAME"]}).https.onCall(() => {
  process.env.YOUR_ENV_VARIABLE_NAME
})

자세한 내용은 Firebase 공식 문서 확인

React가 process.env를 통해 이러한 환경 변수에 액세스하려면 환경 변수 이름을 REACT_APP_로 시작합니다.

언급URL : https://stackoverflow.com/questions/34442739/how-does-one-set-private-environment-variables-on-firebase-hosting

반응형