Bubble.io와 Backblaze B2 통합: 단계별 가이드 2024

단계 1: Bubble과 Backblaze B2에 계정 생성

그 어떠한 것보다도, 우선 Bubble.io와 Backblaze B2에 계정을 생성해야 합니다. 만약 아직 계정이 없다면 공식 웹사이트에 접속하여 생성하세요.

Bubble을 위한 주소: https://bubble.io/
Backblaze B2를 위한 주소: https://www.backblaze.com/b2/cloud-storage.html

단계 2: Bubble에서 새 앱 생성

먼저 Bubble 계정으로 로그인하여 새로운 앱을 생성하세요. '새 앱(New App)' 버튼을 클릭하고, 앱의 이름을 정하고, 원한다면 템플릿도 선택하세요. 만족스러우면 '새 앱 생성(Create New App)'을 클릭하세요.

단계 3: Backblaze B2에서 버켓(Bucket) 설정

이제는 Backblaze B2로 전환합니다. 로그인 한 후, Bubble을 통해 파일을 저장하는데 사용될 새로운 버켓을 생성해야 합니다. 왼쪽 메뉴에 있는 '버켓(Buckets)' 링크를 클릭하고, '버켓 생성(Create a Bucket)' 버튼을 클릭하세요. 버켓에 고유한 이름을 부여하고, 이 버켓에 대한 액세스 유형을 선택한 다음 '버켓 생성'을 클릭합니다.

단계 4: API Key 생성

버켓이 생성된 후, Bubble과 Backblaze B2 간의 상호작용을 가능하게 하는 API 키가 필요합니다. 이를 위해 왼쪽에 있는 '앱 키(App Keys)' 메뉴를 클릭하고 '새 애플리케이션 키 추가(Add a New Application Key)'를 클릭합니다. 키에 이름을 부여하고 필요한 권한을 부여하면 됩니다. 모두 완료되면 '새 키 생성(Create New Key)'을 클릭합니다. 중요: 보안상의 이유로 Backblaze는 이 키를 다시 보여주지 않으므로, 안전한 장소에 저장해두세요.

단계 5: Bubble에서 API 커넥터 설정

이제 이 키를 사용하여 Bubble이 Backblaze B2와 상호작용하도록 설정해야 합니다. Bubble로 돌아가 앱을 열고, 플러그인으로 이동하세요. '플러그인 추가(Add plugins)'를 클릭하고 'API 커넥터(API Connector)'를 검색한 후 앱에 추가합니다.

API Connector가 추가되면, 해당 플러그인을 설정해야 합니다. 플러그인 탭에서 'API 커넥터(API Connector)'를 클릭하세요. '다른 API 추가(Add another API)'를 클릭하고 "Backblaze B2"와 같은 이름을 붙여주세요.

우리는 파일 업로드용 하나와 파일 목록 확인용 하나, 총 두 개의 호출을 생성할 것입니다.

단계 6: '업로드 URL 가져오기(Get Upload URL)' 호출 설정

생성한 API에서 '다른 호출 추가(Add another call)'를 클릭하세요. 이 호출을 "Get Upload URL"이라는 이름으로 설정합니다. 다음의 설정을 사용하세요:

• 메소드: POST
• 사용 방식: Action
• URL: https://api.backblazeb2.com/b2api/v1/b2_get_upload\_url
• 헤더 키: Authorization | 값: Backblaze에서의 API 키
• 매개변수 키: bucketId | 값: Backblaze에서의 버켓 ID

'호출 초기화(Initialize Call)' 버튼을 클릭하면, 모든 설정이 올바르게 구성된 경우, 호출이 설정되었다는 메시지를 받게 될 것입니다.

단계 7: '파일 업로드(Upload File)' 호출 설정

다른 API 호출을 추가하고, 이 호출을 "Upload file"이라 이름 짓습니다. 이 호출은 파일을 Backblaze B2로 업로드하는 데 사용됩니다. 다음 구성을 사용하세요:

• 메소드: POST
• 사용 방식: Action
• URL: Use Result from … 'Get Upload URL' uploadUrl
• Body:

{
"파일_데이터(file_data)": "Base64 인코딩된 파일",
"파일_이름(file_name)": "파일의 이름"
}

• 헤더 키-값 쌍은 다음과 같아야 합니다:

• 인증(Authorization): Use Result from … 'Get Upload URL' authorizationToken

• X-Bz-File-Name: file_name

• Content-Type: content_type 파일의 콘텐츠 유형

• X-Bz-Content-Sha1: do_not_verify

여기서 'Get Upload URL'은 이전의 'Get Upload URL' 호출이어야 합니다. 'file_name'은 업로드할 파일로부터 동적으로 검색되어야 합니다. 'content_type'은 업로드할 파일 유형에 기반해야 합니다.

호출을 초기화하면 설정되어야 합니다.

단계 8: 워크플로우(Workflow) 설정

이제 Bubble 앱에서 원하는 방식에 따라 워크플로우를 요소와 함께 통합해야 합니다. 예를 들어, 버튼을 클릭할 때 파일을 업로드하려면 해당 버튼의 워크플로우를 편집해야 한다:

• 버튼 워크플로우에 새로운 액션을 추가합니다.
• '플러그인(Plugins)'을 선택하고 Backblaze API에서 '업로드 URL 가져오기(Get Upload URL)'를 선택합니다.
• 워크플로우의 두 번째 액션에서 '파일 업로드(Upload File)'를 선택하고 요구사항에 따라 동적 값(filename 및 content type)을 설정합니다.

이러한 단계를 거치면, Bubble 앱은 이제 설정한 API 커넥터를 통해 Backblaze B2의 API를 호출하고, 생성한 버켓에 파일을 업로드할 수 있어야 합니다.