/Bubble Development Agency

Bubble.io와 DigitalOcean Spaces 통합: 단계별 가이드 2024

우리의 단계별 가이드를 탐색하여 Bubble.io와 DigitalOcean Spaces를 통합하여 원활한 앱 개발 및 호스팅 서비스를 제공합니다.

DigitalOcean Spaces란 무엇인가요?

DigitalOcean Spaces는 개발자들이 대량의 데이터를 저장하고 제공하는 것을 쉽고 비용 효율적으로 할 수 있도록 설계된 객체 저장 서비스입니다. Spaces는 안전하고 신뢰할 수 있으며, 데이터 내구성은 99.99%입니다. 이 서비스는 이미지, 비디오 및 백업과 같은 콘텐츠의 빠른 전송을 위한 간단하고 확장 가능한 솔루션을 제공합니다. 자동 암호화, 드래그 앤 드롭 업로드, 사용하기 쉬운 API와 같은 기능을 사용하여 개발자들은 복잡성을 줄이고 비용을 낮춘 현대적인 웹 애플리케이션을 만들 수 있습니다.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Bubble.io와 DigitalOcean Spaces을 통합하는 방법은 무엇인가요?

Bubble.io를 DigitalOcean Spaces와 통합하는 것은 약간의 기술적 지식을 필요로하지만 다음 단계를 따르면 가능합니다.

단계 1: DigitalOcean에 가입하기

먼저, 아직 가입하지 않았다면 DigitalOcean에 가입해야합니다. DigitalOcean 웹사이트로 이동하여 "가입" 버튼을 클릭하여 이를 수행할 수 있습니다. 이메일 주소를 제공하고 비밀번호를 생성한 후, DigitalOcean이 보낸 확인 이메일에 있는 링크를 클릭하여 이메일을 인증해야합니다. 이메일을 인증한 후, 결제 방법을 선택하고 가입 프로세스를 완료해야합니다.

단계 2: 새로운 Space 생성하기

DigitalOcean에 로그인하면 오른쪽 상단에서 "만들기" 버튼을 클릭한 다음 드롭다운 메뉴에서 "Spaces"를 선택합니다. 새로운 공간에 이름을 지정하고, 데이터 센터 지역을 선택하고, 파일 목록 설정에 대해 "파일 목록 제한" 또는 "파일 목록 허용"을 선택한 다음 "Space 만들기"를 클릭합니다.

단계 3: Spaces 자격 증명 가져오기

다음으로, Spaces 액세스 키와 보안 키가 필요합니다. 이는 기본적으로 Space에 액세스하기 위한 사용자 이름과 비밀번호입니다. 이를 얻으려면 DigitalOcean 제어판의 API 섹션으로 이동하여 새로운 Spaces 키를 만듭니다. 키에 이름을 지정하고 "Spaces 키 생성"이 선택되어 있는지 확인한 다음 "키 생성"을 클릭합니다. 이 페이지를 떠난 후에는 다시 볼 수 없으므로 비밀 키를 안전한 장소에 보관하세요.

단계 4: Bubble.io에 DigitalOcean Spaces 플러그인 설치하기

이제 Bubble.io로 이동하여 앱을 엽니다. 왼쪽 메뉴에서 "플러그인"을 클릭하고 "플러그인 추가"를 선택합니다. 플러그인 검색 상자에 "DigitalOcean Spaces"를 입력하고 드롭다운에서 선택합니다. "설치"를 클릭하여 앱에 추가합니다.

단계 5: DigitalOcean Spaces 플러그인 설정하기

플러그인이 설치되면, DigitalOcean에서 받은 액세스 키와 비밀 키를 사용하여 플러그인을 설정해야합니다. 플러그인 목록에서 DigitalOcean Spaces 플러그인을 클릭하고, 해당 필드에 Spaces 액세스 키와 비밀 키를 입력합니다. 설정을 저장하려면 "업데이트"를 클릭하세요.

단계 6: 앱에서 DigitalOcean Spaces 플러그인 사용하기

모든 설정이 완료되면 이제 Bubble.io 앱에서 DigitalOcean Spaces 플러그인을 사용할 수 있습니다. 이를 수행하려면 디자인 탭으로 이동하고 상단 메뉴에서 "시각적 요소"를 클릭합니다. 드롭다운에서 "DigitalOcean Spaces에 업로드"를 선택합니다. 그런 다음 디자인 패널에서 업로드 요소를 원하는대로 설정합니다.

단계 7: 업로드 요소를 Space에 연결하기

마지막으로, 업로드 요소를 DigitalOcean Space에 연결해야합니다. 업로드 요소를 클릭한 다음 속성 편집기로 이동합니다. "DigitalOcean Spaces - 파일 업로드" 아래에서 "Bucket" 필드에 Space의 이름을 입력합니다. 그런 다음 필요에 따라 다른 필드를 구성합니다. 축하드립니다, Bubble.io를 DigitalOcean Spaces와 성공적으로 통합하셨습니다!

Bubble.io와 DigitalOcean Spaces 통합 사용 사례

시나리오: 온라인 소매 회사가 웹사이트를 새롭게 꾸미고 여러 상품 이미지를 포함하여 더욱 상세한 시각화를 포함하려고 합니다. 이들은 전자상거래 플랫폼을 구축하기 위해 Bubble.io를 사용하며, 상품 이미지의 광범위한 콜렉션을 저장하고 관리하기 위해 DigitalOcean Spaces를 사용하기로 결정했습니다.

해결책: Bubble.io와 DigitalOcean Spaces를 통합

웹사이트 개발: 회사는 Bubble.io를 사용하여 각 항목에 대한 자세한 제품 페이지를 포함하는 직관적인 온라인 쇼핑 경험을 만듭니다. 각 제품 페이지에는 여러 이미지가 포함되므로 이러한 이미지를 저장하고 관리하는 데 믿을 수 있고 효율적인 시스템이 필수적입니다.

통합 설정: 소매 회사의 개발자는 Bubble.io에 DigitalOcean Spaces 플러그인을 설치합니다. 그런 다음 개발자는 필요한 DigitalOcean API 키로 플러그인을 구성합니다. 개발자는 또한 새로운 제품 이미지가 DigitalOcean Spaces에 업로드되어야 할 때 트리거되는 Bubble.io의 워크플로우를 설정합니다.

이미지 업로드 워크플로우: 새로운 제품 이미지가 업로드 준비가 되면 워크플로우가 시작됩니다. 이미지는 Spaces 플러그인에 의해 설정된 동작을 사용하여 자동으로 DigitalOcean Spaces로 보내집니다. 그런 다음 이미지는 지정된 버킷에 저장되고, 이미지의 URL이 Bubble.io 애플리케이션으로 반환됩니다.

가져오기 & 표시 워크플로우: 고객이 제품 페이지로 이동하면 Bubble.io에서 다른 워크플로우가 트리거되어 DigitalOcean Spaces에서 관련 이미지 URL을 가져와 제품 페이지에 이 이미지를 표시합니다.

DigitalOcean Spaces에서의 콘텐츠 관리: 플랫폼은 이미지 저장 및 관리를 위한 중앙 집중화된 시스템을 제공합니다. 무제한 저장 및 데이터 복제와 같은 기능으로 소매 회사는 상품 이미지를 원활하게 관리할 수 있습니다.

모니터링 및 분석: Bubble.io는 각 제품 이미지와 고객 상호 작용을 감독하는 데 도움이 되는 기본 분석 기능을 제공합니다. 이는 데이터 기반의 결정에 근거한 전반적인 사용자 경험을 향상시키는 데 기여할 수 있습니다.

이점:

스케일링: DigitalOcean Spaces를 사용하면 소매 회사는 용량 제약에 대해 걱정하지 않고 이미지 저장을 확장할 수 있습니다.

성능: 이 통합은 고속 이미지 검색을 보장하며, 고객에게 원활한 쇼핑 경험을 제공합니다.

비용: DigitalOcean Spaces와 Bubble.io의 결합은 시각적으로 풍부한 전자상거래 플랫폼을 구축하기 위한 비용 효과적인 해결책을 제공합니다.

Bubble.io와 DigitalOcean Spaces를 통합함으로써, 소매 회사는 전자상거래 플랫폼의 제품 이미지를 관리하기 위한 확장성, 효율성, 및 견고한 시스템을 얻게 됩니다. 이는 궁극적으로 사용자 경험을 향상시키며, 고객 참여도 및 판매를 증가시킵니다.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore
Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences