おすすめ記事

おすすめ記事一覧

Bubbleアプリに独自ドメイン名を使用する方法を解説してみた!!

記事作成

皆さん、ごきげんよう!!

今回は、Bubbleアプリに独自ドメイン名を使用する方法について解説していきます。自分で構築したBubbleアプリを独自ドメイン名で運用していきたい人にとっては特に有益な情報だと思うので、是非参考にしてください。

概要

Bubbleアプリは自動的にbubbleapps.ioのサブドメインを持ち、SSL(暗号化するための通信手順)で提供されます。例えば、yourapp.bubbleapps.ioです。これをカスタマイズして独自のドメイン名を使用したい場合は、設定タブのドメインセクションでこれを行うことができます。

ドメインの設定

プロセスの概要

任意のレジストラサービス(NameCheap、Dreamhostなど)で所有しているドメインを使用して、Bubbleに向けるように設定することができます。この操作は2つのステップで行います。

1.Bubbleでドメインを設定する

2.レジストラのインターフェイスで、Bubbleに向けるようにDNSレコードを設定する

アプリでドメインを設定するには、ドメインタブの入力ボックスにドメインを入力し、「このドメインを設定する」をクリックします。これが完了すると、Bubbleがレジストラ側で入力すべきDNSレコードを提供してくれます。

BubbleからDNSを取得したら、Bubbleで変更する設定はありません。代わりに、ドメインを管理するために使用しているレジストラサービスに向かい、DNSセクション(またはDNSゾーンファイル)を見つける必要があります。そのセクションを見つけたら、名前が”(空)と’www’の既存のAレコードを削除し、代わりに上記のようにレコードを追加します。(レジストラによっては、空のドメインを参照するために’@’を使用する場合もあります)。

このプロセスは少し技術的に難しく、各レジストラは異なるインターフェイスを持っています。助けが必要な場合は、レジストラのカスタマーサポートに連絡して、レコードを修正するためのサポートを受けることをお勧めします。他のユーザーが同じレジストラサービスを利用した経験を持っている可能性が高いので、フォーラムで遠慮せずに助けを求めてください。

DNSレコードを設定した後、新しい設定をインターネット上に広める必要があります。これには24時間かかることもありますが、通常は2-4時間後に結果を見ることができます。Bubbleでは、レコードの下にある操作が成功したかどうかを確認することができ、「Check my settings」ボタンをクリックしてプロセスを確認することができます。

ドメインが適切に設定されるとすぐに、yourapp.bubbleapps.ioへのすべてのリクエストは自動的にyourdomain.comにリダイレクトされます。

サブドメインの設定

すでにドメインを使用していて、サブドメインを使用してBubbleアプリを指すようにしたい場合(例えば、app.yourdomain.comなど)、これを入力ボックスのドメインとして使用するだけで、これを行うことができます。DNSレコードは異なりますが、レジストラサービスに入力するプロセスは上記と同様です。

ドメインの変更/削除

ドメインを変更する必要がある場合は、まず現在のドメインを削除する必要があります。「delete this domain name」をクリックすると、アプリケーションとドメイン間の接続が終了します。レジストラサービスのDNSレコードを削除するまでは、あなたのドメインはBubbleのサーバーを指していることには注意してください。Bubbleのページに、このドメインにリンクされているアプリがないことを示すメッセージが表示されます。ドメインを削除したら、上記のように新しいドメインを追加することができます。

ドメインを削除して、最初に発生したようなappname.bubbleapps.io ドメインを使用したい場合、リダイレクトは通常ブラウザレベルでキャッシュされるため、ブラウザのキャッシュをクリアする必要がある場合があることにも注意してくださいね

SSL暗号化(HTTPS)

2019年10月以降にアカウントを作成した場合はSSL化(暗号通信化)が必須となります。

レガシー(2019年以前)パーソナルプラン以上をご利用の場合は、カスタムドメインでSSL暗号化を有効にすることができます。bubbleapps.ioサブドメインでホストされているすべてのアプリも、すべてのプランでSSLをサポートしています

SSL暗号化を使用することで、ユーザーとサイト間のトラフィックを誰にも傍受されず、個人情報を保護できることをユーザーに保証することができます。SSL暗号化は検索エンジンの最適化にも役立ちます。また、一部の機能(Chromeでのジオロケーションへのアクセス、Stripeの支払いの使用など)を使用する際に必要となる場合があります。

SSLの設定

ドメインを適切に設定し、バブルがAレコードを検証したら、プロセスを開始することができます。あなたのサイトでSSLを有効にするには、チェックボックスを有効にします。

この変更が完了するまでに最大1時間かかることがあります。Cloudflareをご利用のお客様は、SSLの利用が必須となります

メール設定

あなたのアプリケーションは、ユーザーに電子メールを送信することがよくあります。これは、電子メールの送信アクションで行うことができますが、パスワードのリセットアクションなどでも行うことができます。アプリが独自ドメインを使用していない場合、すべての電子メールは admin-no-reply@bubble.is から送信されます

ドメインを設定したら、このメールをカスタマイズできます。ドメインがyourdomain.comの場合、管理者の電子メール アドレスを、例えば、hello@yourdomain.com、または contact@yourdomain.com などに変更できます。このメールは、SSL暗号化の有効化のためにサイトの所有権を証明するために使用したものと一致する必要はありません。

Bubbleでは、SendGridを使用して独自ドメインでメールを送信することもできます。SendGridを使用すると、メールのアクティビティ、スパムレポート、レピュテーション管理などの分析を得ることができます。

SendGridの設定

開始するには、Sendgridでアカウントを作成する必要があります。アカウントを設定したら(そしてアプリのカスタムドメインを正常に設定したら)、Sendgrid接続を有効にすることができます。

まず、SendGridからAPIキーを取得する必要があります(Sendgridのドキュメントはこちら)。ドメインタブの入力ボックスに入力し、「Verify Sendgrid Key」をクリックします。キーが有効であれば、Bubbleにサインアップする際に使用したアカウントに検証メールが送信されます。

SendGrid接続を検証したら、オプションでテンプレートIDを入力することができます(アプリから送られてくるすべてのメールがSendGridでデザインしたテンプレートに従うように)。また、管理者メールのエイリアスを変更することができます。

ドメインのホワイトラベル化、IPのホワイトラベル化など、メール配信を最適化するためにSendGrid側で設定ができます。サービスの詳細についてはSendGridのドキュメントを読むことをお勧めします。

まとめ

今回は、Bubbleにおける独自ドメインの設定・SSL化の方法について解説していきました。Bubbleで構築したアプリを独自ドメイン名で使用したい場合は有料プランに入ることは必須ですが、割と簡単に設定できるかと思うので、是非この記事を参考にして挑戦してみてくださいね。

ここまでご覧頂き、ありがとうございました!!

参考(英語)

https://manual.bubble.io/application-settings/custom-domain-ssl

システム見直し本舗編集長 三ツ谷直臣

システム見直し本舗編集長 三ツ谷直臣

日本に限らず海外のSaaSの紹介や、SaaS特集記事を取り上げていきます!
ご相談・お問い合わせは下記リンクよりお願いします。
https://andd.live/contact/







関連記事

  1. 記事作成

    Bubble・スケジュール化されたワークフロー・再帰的なワークフロー

  2. 記事作成

    Bubbleのログについて解説!!

  3. Adalo Resource・カラーとフォント(ブランディングセクション)について

  4. 記事作成

    Bubbleのプラグイン構築におけるAPI接続について解説してみた!!

  5. Adalo Resource・ データの変更、条件付きアクション、トリガー通知(アクションセクション…

  6. Adalo Resource・とりあえず始めてみる

  7. 特集記事

    強力MAツール×ノーコード!Moosendをご紹介!

  8. 記事作成

    Bubble・Segment(セグメント)とGoogle Optimize(オプティマイズ)

  9. 記事作成

    Bubbleのテンプレートの使い方&(ベータ版)Figmaからのインポート(取り込み)

人気記事

  1. topimage
  2. 記事画像
  3. Collaboration
  4. 特集記事

おすすめ記事一覧

  1. 記事画像
  2. Bubble
  3. 記事画像
  4. 記事画像
  5. 勤怠管理
PAGE TOP