본문 바로가기
버블 개발/중급

126. Domain and DNS (중급) : custom 도메인 설정, 하위 도메인 설정, DNS 구성, SSL 암호화

by 스타트업 사업가 마르코 2023. 9. 20.
Bubble앱을 처음 개발하기 시작하면 bubbleapps.io 하위 도메인이 제공됩니다. 예를 들어 yourapp.bubbleapps.io입니다. 이번 섹션에서는 custom 도메인을 설정하고 관리하는 방법에 대해 알아보겠습니다.
  • bubbleapps.io에는 SSL/TLS 암호화가 자동으로 활성화되어 있습니다.
  • 이를 Custom 설정하고 자신의 도메인 이름을 사용하려면 Settings 탭의 Domain 섹션에서 이를 변경할 수 있습니다.

 

 

(1) 도메인 설정

자신이 소유한 도메인을 설정을 통해 자신의 Bubble 앱을 가리키도록 구성할 수 있습니다.

이 작업은 다음과 같이 두 단계로 수행됩니다.

 

  1. Bubble에서 도메인 설정
  2. 도메인 등록회사의 인터페이스에 DNS record를 설정하여 Bubble을 가리키도록 설정

 

1. Bubble에서 도메인 설정

버블에서 도메인 설정
버블에서 도메인 설정

  • 앱에서 도메인을 설정하려면 Domain 탭의 입력상자에 도메인을 입력하고 'Set up this domain'을 클릭하세요.
  • 이 작업을 완료하면 Bubble은 도메인 등록회사 측에 입력해야 하는 DNS 레코드를 제공합니다.

 

2. 도메인 등록회사에서 DNS레코드 설정

  1. Bubble에서 DNS 레코드를 받으면 Bubble에서 수정할 설정이 없습니다.
  2. 대신 도메인을 관리하고 DNS 섹션을 찾는 데 사용하는 도메인 등록회사의 서비스로 이동해야 합니다.
  3. 해당 섹션을 찾았으면 이름이 ''(빈 공간 또는 ‘@’ 또는 'www')인 기존 A레코드를 삭제하고 대신에 위에 표시된 DNS레코드를 추가하세요
이 과정은 약간 헛갈릴 수 있으므로 (각 등록회사마다 서로 다른 인터페이스를 가지고 있음) 도움이 필요한 경우 등록 회사의 고객 지원팀에 연락하여 DNS레코드 수정에 대한 지원을 받는 것이 좋습니다.
  • DNS 레코드를 설정한 후에는 새 설정이 인터넷을 통해 전파되어야 합니다. 이 작업은 최대 24시간이 걸릴 수 있지만 일반적으로 2~4시간 후에 일부 결과가 표시됩니다.
  • 버블을 사용하면 기록 아래에서 작업의 성공 여부를 확인할 수 있으며, 'Check my settings' 버튼을 클릭하면 진행 과정을 확인할 수 있습니다.
  • 도메인이 올바르게 구성되면 yourapp.bubbleapps.io에 대한 모든 요청이 자동으로 yourdomain.com으로 리디렉션 됩니다.

 

(2) 하위 도메인 설정

  • 이미 도메인을 사용하고 있고 하위 도메인을 사용하여 Bubble 앱(예: app.yourdomain.com)을 가리키고 싶다면 입력 상자에서 이 도메인을 설정하여 사용하면 됩니다.
  • DNS 레코드는 다르지만 등록 서비스에 이를 입력하는 프로세스는 위와 유사합니다.

 

(3) DNS 레코드 구성

1. 주소형식이 example.com 또는 www.example.com

 

  • 앱의 사용자는 일반적으로 example.com 또는 www.example.com으로 도메인을 로드할 수 있을 것으로 기대합니다.
  • Bubble에서는 SEO목적을 위해 이들 중 정확히 하나를 다른 주소로 리디렉션 합니다.
  • 예를 들어, custom 도메인으로 example.com으로 입력하면 DNS 레코드가 올바른 작동하는 한 자동으로 www.example.com으로 리디렉션 됩니다.

 

custom 도메인을 선택하면 Bubble은 등록 회사에서 4개의 레코드를 생성하도록 지시합니다.

Record는 다음과 같은 형식이 됩니다.

 

 

이는 여유를 위해 중복되어 추가로 설정되었지만, 대부분의 경우 기본 도메인에 대한 레코드와 www에 대한 레코드가 하나 이상 있는 경우, custom도메인은 둘 중 하나 또는 둘 모두에 동일하게 작동합니다.

 

2. 주소형식이 app.example.com 인 경우

custom 도메인이 app.example.com형식인 경우, Bubble 앱의 Settings > Domain에서 custom 도메인을 등록할 수 있습니다. Bubble은 등록 회사에서 두 개의 레코드를 생성하도록 지시합니다.

 

레코드는 다음과 같은 형식이 됩니다.

 

Bubble과 Cloudflare가 도메인이 업데이트되었음을 확인하면 custom 도메인이 정상적으로 작동할 것입니다.

 

(4) 도메인 변경/제거

도메인을 변경해야 하는 경우 먼저 현재 도메인을 제거해야 합니다.
  • 'Delete this domain name'를 클릭하면 애플리케이션과 도메인 간의 연결이 종료됩니다.
  • 도메인 등록회사 서비스에서 DNS 레코드를 제거할 때까지 도메인은 여전히 Bubble의 서버를 가리킵니다. 도메인 등록회사에서 DNS레코드를 제거합니다.
  • 이 도메인에 연결된 앱이 없다는 메시지와 함께 앱 페이지가 표시됩니다.

도메인을 제거한 후에는 위에서 설명한 대로 새 도메인을 추가할 수 있습니다.

도메인을 제거하고 처음에 appname.bubbleapps.io 도메인을 사용하려는 경우 리디렉션이 일반적으로 브라우저 수준에서 캐시 되므로 브라우저 캐시를 지워야 할 수 있습니다.
  • 도메인 변경이 완료되면, 앱의 내부 Dynamic URL Expression의 조건식을 점검해봐야 합니다.
  • 업로드된 파일은 도메인에 직접 저장되지 않고 S3/appforest에 저장되므로 모든 것이 적절하게 리디렉션 되는지 점검해야 합니다.

 

(5) SSL 암호화(HTTPS)

2019년 10월 이후에 계정을 생성했다면 SSL은 필수입니다. 2019년 이전 Personal 요금제 이상을 사용 중인 경우 custom 도메인에서 SSL 암호화를 활성화할 수 있습니다.

 

  • bubbleapps.io 하위 도메인에서 호스팅 되는 모든 앱은 모든 요금제에서 SSL 지원도 제공합니다.
  • SSL 암호화를 사용하면 누구도 사용자와 사이트 사이의 트래픽을 가로챌 수 없도록 사용자에게 보장하고 사용자의 개인 정보를 보호할 수 있습니다.
  • SSL 암호화는 검색 엔진 순위에도 도움이 되며 일부 기능(Chrome의 위치 정보 액세스, Stripe 결제 사용 등)을 사용하는 데 필요할 수 있습니다.

 

(6) SSL 설정

  • 도메인을 올바르게 구성하고 Bubble이 A 레코드의 유효성을 검사하면 프로세스를 시작할 수 있습니다.

SSL활성화
SSL활성화

  • Settings > Domain 하단에서 SSL을 활성화하려면 확인란을 활성화하세요
  • 이 변경 사항이 적용되는 데 최대 1시간이 걸릴 수 있습니다.
  • Cloudflare를 사용하는 고객의 경우 SSL이 필수입니다.

 

(7) 도메인 및 DNS FAQ

Q: 내 도메인을 Cloudflare로 이동하는 데 얼마나 걸리나요?

A. DNS 레코드를 업데이트하는 데 걸리는 시간은 2분에서 몇 시간까지 걸립니다.

 

  • Bubble 및 Cloudflare에 CUSTOM도메인을 등록하는 순간 당신의 도메인은 두 서비스 모두에 등록됩니다. Cloudflare가 올바르게 작동하려면 DNS 항목이 해당 서버를 가리키는지 확인해야 합니다.
  • DNS 레코드를 업데이트(레코드 추가, 제거 또는 이름 변경)할 때 레코드가 사용 가능한 시기는 레코드의 TTL (Time-To-Live) 값에 따라 결정됩니다.
  • 등록 기관에서 레코드를 변경했는데 해당 레코드의 TTL이 1시간이라고 가정해 보겠습니다.
  • 1시간 후에는 해당 서버가 당신의 새 레코드를 인터넷에 알리고 있을 것입니다.
  • 그러나 인터넷에는 많은 네임 서버가 있고 모든 네임 서버가 계속해서 최신 기록으로 알리고 있있으므로 시간이 좀 더 걸릴 수도 있습니다.
  • 평균적으로 TTL 길이의 두 배 내에 기록이 인터넷을 통해 전파될 것입니다. 따라서 TTL이 1시간인 경우 2시간 후에는 DNS레코드가 어디에나 퍼져 있을 것으로 예상됩니다.
  • 레코드가 모든 곳에서 업데이트되면 Cloudflare는 당신이 도메인을 소유하고 있음을 확인할 수 있으며 앱이 활성화됩니다.