Notionの共有URLを独自Domainで公開する

2022年1月4日 12:50

試したこと

@yutakikuchi_ です
Notionので書いたページを共有URLとして、Webに公開することをします。その際に、Notionの共有URLの機能では subdomain.notion.site、notion.so/your-domain のようなnotionのドメインとなってしまうので、これを独自のdomainで利用できるようにします。

Notionの共有URLを独自ドメインに変えるやりかたはいくつかあるかと思います。
1. Cloudflare, Fruitionを使う
2. Superを使う
3. 自身でReverse Proxyを立てる

結論として

今回試したのは3が駄目で、結局は1のCloudflare, Fruitionを使う方針にしました。3の自身でReverse Proxyを立てるのをGoogle Compute EngineでNginxを立てて、confだけでproxy_passしたかったのですが、Notion側のJavascript側で厳格なaccess URLとJavascriptの提供元のURLの一致を見ているようなエラーがでて、その先に進むことが出来ませんでした。具体的に下記のようなNginxのconfの設定によるproxyではNotion側の挙動でalert popupが表示されます。popupのalert messageは Mismatch between origin and baseUrl (dev).と出ます。1のFruitionのやりかたを見ているとJavascriptのlayerでNotion側から配信されるJavascriptファイルの内部をかなり書き換ええているので、Nginxのconfで同等の処理を書く、もしくはFruitionのようにJavaScriptのlayerでproxyをしたら、自身でReverse Proxyを作ることができるかもしれません。(今回はそこまでやってません。)

ドメインを独自のものにして、その次にNotion先のURLにリダイレクト(URLが書き換わる方式)する方式であれば、3の自身でReverse Proxyを立てる方針でも簡単にできます。
以下にRedirect方式のNginxのconf例を記載します。
https://gist.github.com/yutakikuchi/51d0e129181f30568acae4e3d432996f#gistcomment-4015585

ただし、今回はリダイレクト方式でURLがNotionのものに切り替わるのではなく、独自ドメインのもので完結させたいので、Fruitionを使う方式にしました。Fruitionを使うやりかたはQiitaなどにいくつか記事が載っているので、そちらを参考にします。おおよその手順は下記のStep0〜3の通りで、ドメインの取得、Cloudflareのアカウントやドメイン設定、FruitionによるCloudflare上に登録するworkerのJavaScript生成、JavaScriptをClodflareに登録という手順になります。

Cloudflare, Fruitionで注意が必要なこと

上記Step 1: Set up your Cloudflare account (5 mins)において、Notionのアクセスに使いたい独自ドメインがサブドメインになっているのであれば、Cloudflare側でのDomain登録はCNAMEでの登録が必要になります。例えば僕の場合は、corp.ab3.visionというドメインの接続先をNotionの公開URLにしたいのですが、その際にCloudflare側のDNS設定では、CNAMEとして、corp.ab3.visionの接続先をab3.visionにしました。(ab3.visionの接続先はAレコードとして、事前にIPを登録してあります)

上記Step2,3において、アクセスしたいサブドメインURLを入力してもコピーモードにならないため、ベースドメインの名前を記載します。ただし、ベースドメイン名でのFruitionで生成されるJavascriptをそのままSave & Deployも Mismatch between origin and baseUrl (dev).のエラーが出るので、Javascriptコードの const MY_DOMAIN = 'xxxxx';のxxxxxの箇所がサブドメイン式に書き換えてからCloudflare側のworkerにペーストする必要があります。

またStep2,3において、Notionに対してGoogle Analyticsを設定したい場合、Fruitionで生成されるJavaScriptの23行目あたりに表示されている const CUSTOM_SCRIPTの定数に対して、GAやGoogle Tag Managerのタグ読み込みスクリプトを1行で代入する必要があります。

できたURL

https://corp.ab3.vision
上がアクセスしたいURLになります。会社の紹介ページになります。ドメインのコンテンツ先はNotionのURLになっています。

掛かる費用

CloudflareとFruitionの利用だと基本はFreeで行けるはずです。下記がCloudflareの料金表になります。

Google Compute Engineを使って独自にReverse Proxyを立てる場合、サーバーの利用するゾーンやマシンのスペックにより値段が変わりますが、一番低いスペックのものでも月$5ほどは掛かります。

この記事が気に入ったらサポートをしてみませんか？