黒宮丈治の備忘録 AUTHOR

Notion公式での「カスタムドメイン設定」におけるナレッジ

Notion Domain

Notionから公式でカスタムドメインを設定するアドオンが提供開始となっています。設定は簡単なのですが、つまづいたことがあったので備忘録として残しておきます。

NotionとRoute53で設定

Notionには、作成したページをWebサイト上で公開する機能があります。

基本的には「◯◯.notion.site」というNotionのドメインに自分で設定したサブドメインを使って公開しますが、これを自分が取得した独自ドメインに変更することもできます。

ドメインの取得方法には、Notion自体で取得する方法と、お名前.comなどの他社で取得する方法の2つがあります。前者の方が設定は簡単ですが、コストや既存ドメインの活用を考慮して、後者を選ぶ人の方が多いかもしれません。

以前は、Notionにカスタムドメインを設定するには非公式の無料での方法が主流でした。私もそれでいくつかのページにカスタムドメインを割り当てていましたが、ある日突然アクセスできなくなったのです。調べてみると、Notionが公式で提供を始めたことがわかり、有料のアドオンを契約し、設定し直すことにしました。


※提供されたのは2024年6月末。以下リンク参照

www.watch.impress.co.jpNotionがウェブサイトに　「Notionサイト」カスタムドメインなど強化

Notion Labs Japanは、Notionでウェブサイトを簡単に作成する「Notionサイト」の機能強化を発表した。カスタムドメインサポートやビジュアルカスタマイズ、Google アナリティクスとの連携を追加する。


やり方自体は以下のNotion公式のヘルプページを見ればあっという間にできてしまいます。

www.notion.soカスタムドメインをNotionサイトに接続 – Notion (ノーション)ヘルプセンター

すでにカスタムドメインを所有している場合は、Notionサイトでそのドメインを使用できます。Notionとご利用中のDNSプロバイダーの両方での設定方法を解説します。


私は会社を始める前から多数のドメインを取得するほどのドメイン愛好家です。ドメインを販売・管理する会社（レジストラ、リセラー、プロバイダーなど）も、様々な理由で複数使い分けています。今回、このページに紐づけているドメイン「jibun.media」は、最安値だったためAmazonのRoute53を選びました。

Route53は、AWSサービスの1つということもあり、慣れない人には少し敷居が高く感じられるかもしれません。しかし、多機能なので詳しい人には魅力的です。ドメイン取得以外の機能もありますが、ここでは割愛します。前提はともかく、Route53で管理するドメインを使ってNotionにカスタムドメインを設定した備忘録として今回は記録しておきます。

必ず「サブドメイン」を設定しなくてはいけない

Notionのカスタムドメイン設定で注意すべき点は、wwwなどのサブドメインが必須だということです。Notionのヘルプページにも記載がありますが、通常は「www」を設定すれば十分です。しかし、このページの「jibun.media」のように、wwwなしの「ルート」ドメインでもアクセスを可能にするには、追加の設定が必要になります。

ヘルプに記載されている方法でも良いとは思いますが、より簡単な方法として今回はCloudflareを経由するやり方を選びました。

NotionとRoute53の間にCloudflareを挟み、Cloudflareでルートドメインのアクセスを設定すれば完了です。Cloudflareは高速化CDNサービスとしても有名で、個人利用なら無料プランで十分機能します。導入しておいて損はないでしょう。

プロバイダー→Cloudflare→Notion

このページは備忘録的なものなので、簡潔に。

まずは、プロバイダーで管理しているドメインをCloudflareに紐づけます。この作業は非常に簡単です。Cloudflareはドメインプロバイダー業務も行っており、多くのドメインで業界最安値の価格を提供しています。まだドメインを取得していない場合は、Cloudflareでの取得も検討する価値があります。今回の設定も、Cloudflare管理下のドメインならとてもスムーズに進められます。


Cloudflareとの紐づけが完了したら、DNSの設定はCloudflare上でやります。Notionのヘルプにある通り、CNAMEとTXTを設定したら完了。正しく設定していたら、あっという間にカスタムドメインでの接続が開始します。

ちなみにCloudflareでの接続方法は、さきほどのヘルプにも詳細があるので、そちらを参照するとよいかもしれません。

ルートでのアクセスを設定

さて、ここからはChatGPTやPerplexity、ClaudeあたりのAIちゃんにもアドバイスをもらいながら仕上げました。

以下が、生成AIの出した答え。

💡
Cloudflareでルートドメインもwwwにリダイレクトさせる簡単な方法は？

Cloudflareを使用してルートドメインをwwwサブドメインにリダイレクトする簡単な方法はいくつかあります。その中でも、

Page Rules

を利用する方法が一般的です。以下に手順を説明します。

Cloudflareでルートドメインをwwwにリダイレクトする方法

  1. Cloudflareアカウントにログイン:
    • まず、Cloudflareのアカウントにログインし、対象のドメインを選択します。
  2. DNSレコードの設定:
    • ルートドメイン（example.com）のAレコードを設定します。通常、Cloudflareのプロキシ（オレンジの雲のマーク）が有効になっていることを確認します。
  3. Page Rulesの設定:
    • Cloudflareのダッシュボードで「Page Rules」を選択します。
    • 新しいPage Ruleを作成します。
    • 以下の設定を行います：
      • URL: example.com/*
      • Pick a Setting: Forwarding URL
      • Select status code: 301 - Permanent Redirect
      • Enter destination URL: https://www.example.com/$1
    • 最後に「Save Page Rule」ボタンを押して設定を保存します。

この設定により、ルートドメインにアクセスがあった場合にwwwサブドメインにリダイレクトされるようになります

「Enter destination URL」にある$1が謎で質問したところ、以下が回答。

💡
CloudflareのPage Rulesでリダイレクトを設定する際に、URLの末尾に「$1」は必要か？

Page Rulesでリダイレクトを設定する場合、「$1」は非常に重要です。これは、元のURLのパス部分をそのまま新しいURLに引き継ぐためのプレースホルダーです。具体的には、以下のような役割を果たします：

  • 元のパスを保持: 例えば、example.com/aboutをwww.example.com/aboutにリダイレクトしたい場合、「$1」を使用することで、元のパス「/about」が新しいURLに引き継がれます。
  • 動的なリダイレクト: 複数の異なるパスを持つURLを一括でリダイレクトする場合にも便利です。例えば、example.com/*をwww.example.com/$1にリダイレクトすることで、すべてのパスを個別に設定する必要がなくなります。

したがって、元のURLのパスを新しいURLに引き継ぎたい場合は、「$1」を使用することをお勧めします。これにより、リダイレクト設定がより柔軟かつ効率的になります。

言われた通りやったところ、あっという間にルートでのアクセスもできるようになりました。


自分のドメインを設定できるのはドメイン好きとしては嬉しいのですが、各ページのURLを任意の文字列にするといったことができないので、少し消化不良。あくまでもNotion上のページにドメインを紐づけるというだけなのです。そのため、トップページであってもアクセスするとすぐに謎の文字列が入ったURLにリダイレクトされます。これが少し残念ではありますね。MediumなどのようにURLを任意のものに変えられるようになったら最高だと思いました。


余談ですが、Route53でCloudflareとの接続がうまくいかない人は以下を参照してください。

jibun.mediaRoute53とCloudflareの接続がうまくいかないのはNSの設定場所かもしれません | 黒宮丈治の備忘録

Route53でCloudflareとドメインを連携させる際、ネームサーバーの設定場所が重要です。「ホストゾーン」ではなく、「ドメイン」管理ページでNSを編集する必要があります。これを怠ると、設定がグローバルに反映されず、連携ができません。…


関連記事