Firebase CDN

Firebase를 열고 로그인합니다. Firebase 웹사이트로 이동하여 **시작하기(Get started)**를 클릭하고 Google 계정으로 로그인합니다.

프로젝트 이름을 지정하세요. 이미 사용 중인 Google OAuth 프로젝트가 있다면 동일한 프로젝트를 재사용할 수 있습니다.

Google Analytics 구성 (선택 사항). 이 프로젝트에 대해 Google Analytics를 비활성화할 수 있습니다.

프로젝트를 생성합니다. 프로비저닝이 완료될 때까지 20-30초 정도 기다린 후, **계속(Continue)**을 클릭하세요.

모든 제품 열기. 프로젝트 대시보드에서 **모든 제품(All Products)**을 클릭하세요.

Select Storage를 선택한 다음, Get Started를 클릭하세요.

보안 규칙을 확인하세요. 다음을 클릭하여 계속하세요.

클라우드 스토리지 위치를 선택한 다음, 설정을 완료하고 Project Overview로 돌아가세요.

웹 앱 추가. 프로젝트 개요(Project Overview)에서 프로젝트 이름 아래에 있는 + Add app을 클릭한 다음, Web을 선택하세요.

앱을 등록하고 별명을 지정하세요.

firebaseConfig 값을 복사하세요. 표시된 구성을 안전한 곳에 저장하세요.

.env 파일에 값을 추가하세요. 각 firebaseConfig 값을 일치하는 변수에 매핑합니다:

FIREBASE_API_KEY=api_key                          # apiKey
FIREBASE_AUTH_DOMAIN=auth_domain                  # authDomain
FIREBASE_PROJECT_ID=project_id                    # projectId
FIREBASE_STORAGE_BUCKET=storage_bucket            # storageBucket
FIREBASE_MESSAGING_SENDER_ID=messaging_sender_id  # messagingSenderId
FIREBASE_APP_ID=1:your_app_id                     # appId

Open Storage rules. Project Overview로 돌아가서 Storage를 선택한 다음, Rules 탭을 엽니다.

읽기 및 쓰기 권한을 허용합니다. allow read, write: if false;를 아래 규칙과 일치하도록 if true;로 변경하세요:

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /images/{userId}/{fileName} {
      allow read, write: if true;
    }
  }
}

변경 사항을 게시하세요.

CORS 구성 파일을 생성합니다. 텍스트 편집기에서 cors.json 파일을 생성하고 귀하의 도메인에서 액세스를 허용하도록 설정합니다:

[
  {
    "origin": ["https://ai.example.com"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]

구성을 적용합니다. cors.json이 포함된 디렉토리에서 아래 명령어를 실행하고, <your-cloud-storage-bucket>을 본인의 버킷 이름으로 변경하세요:

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

설정을 확인합니다. 활성 정책을 검색하고 cors.json과 일치하는지 확인합니다:

gsutil cors get gs://<your-cloud-storage-bucket>

테스트해 보세요. 허용된 출처(origin)에서 대화를 PNG로 내보냅니다. 모든 설정이 올바르게 구성되었다면, CORS 오류 없이 내보내기가 성공할 것입니다.