MY_DOMAINに<code>kan.run</code>のようなドメインを設定すれば動くようになります。 Clouflare workersのworker.jsに貼り付けて、Workerに独自ドメインを設定すれば動きます。Notionとかも独自ドメインに出来ます。<div data-filename="worker.js"><pre><code class="language-javascript">const MY_DOMAIN = &apos;&apos;;
const PAGE_TITLE = &apos;&apos;;
const PAGE_DESCRIPTION = &apos;&apos;;
const GOOGLE_FONT = &apos;&apos;;
const CUSTOM_SCRIPT = ``;

addEventListener(&apos;fetch&apos;, (event) =&gt; {
 event.respondWith(fetchAndApply(event.request));
});

async function fetchAndApply(request) {
 let url = new URL(request.url);
 url.hostname = MY_DOMAIN;

 let response = await fetch(url.toString(), {
 body: request.body,
 headers: request.headers,
 method: request.method,
 });

 response = new Response(response.body, response);
 response.headers.delete(&apos;Content-Security-Policy&apos;);
 response.headers.delete(&apos;X-Content-Security-Policy&apos;);

 return response;
}</code></pre></div>

独自ドメイン化出来ないサイトを独自ドメイン化するCloudflare Workersコード

先週、MicroCMSに興味を持って作り始めていた物に切り替えました。デザインなどまだまだ未完成なので、これから調整していきます。リポジトリは<a href="https://github.com/nnmykn/kan-jamstack" target="_blank" rel="noopener noreferrer nofollow">コチラ</a><h2 id="hc202f5b15e">Jamstackとは？ by ChatGPT</h2>Jamstackは、現代のウェブ開発で利用されているアーキテクチャの一つで、JavaScript、APIs、Markup（JAM）の頭文字を取って名付けられました。このアーキテクチャは、より高速で、セキュアで、スケーラブルなウェブサイトを構築するためのものです。以下に、Jamstackの主なコンポーネントとその機能について詳しく説明します。<ol><li>JavaScript: これは、クライアントサイドで動作するプログラミング言語です。JavaScriptは、ウェブサイトのユーザーインターフェースを動的に作成するために使用されます。JavaScriptはブラウザ上で実行され、ユーザーとのインタラクションを処理したり、APIからデータをフェッチしたりします。</li><li>APIs: API（Application Programming Interfaces）は、サーバとクライアント間でデータをやり取りするためのインターフェースです。これにより、JavaScriptはサーバからデータを取得し、それをウェブページに表示できます。これらのAPIは、バックエンドサービス（例えばCMSやデータベースなど）との通信を可能にします。</li><li>Markup: これは、HTMLなどのマークアップ言語を指します。これらの言語は、ウェブページの構造と内容を定義します。Jamstackでは、事前に生成された静的なHTMLを使用します。これは、ウェブサイトのロード時間を大幅に短縮し、パフォーマンスを向上させることができます。</li></ol>Jamstackのアーキテクチャを採用すると、いくつかのメリットがあります。以下に主なものをいくつか挙げてみます：<ul><li>パフォーマンス: 静的ファイルを提供することで、ウェブサイトの読み込み速度が大幅に向上します。これは、ユーザーエクスペリエンスを向上させ、SEOのパフォーマンスを向上させることができます。</li><li>セキュリティ: バックエンドのサーバーを直接エクスポーズする必要がないため、セキュリティリスクが減少します。</li><li>スケーラビリティ: トラフィックの増加に対して簡単に対応することができます。これは、静的コンテンツはCDN（Content Delivery Network）を通じて配信されるため、大量のリクエストを処理する能力があります。</li><li>開発速度: 既存のAPIとツールを利用することで、開発プロセスを高速化することができます。</li></ul>以上がJamstackの基本的な説明です。このアーキテクチャは、ウェブ開発における新しいパラダイムを提供し、より効率的でパフォーマンスの高いウェブサイトの構築を可能にしています。しかし、同時に、Jamstackを使用するためには、静的サイトジェネレーター、API、そしてJavaScriptフレームワークの知識が必要となることも覚えておきましょう。このアーキテクチャが適しているのは、更新頻度が低いウェブサイトや、大量のユーザートラフィックを持つウェブサイトなど、特定のタイプのプロジェクトであると言えます。<figure><img src="https://images.microcms-assets.io/assets/4e60bdd3c02947b9a5fab15b78673a2e/8fd8f170c8c2489a9b6b3f6606b8f6e7/Untitled.png" alt="" width="1383" height="936"></figure>

👋二宮貫(Kan Ninomiya)

📖Blogs

独自ドメイン化出来ないサイトを独自ドメイン化するCloudflare Workersコード

NextJS × MicroCMSの構成で作り直しました！

👋二宮 貫(Kan Ninomiya)

📖Blogs

独自ドメイン化出来ないサイトを独自ドメイン化するCloudflare Workersコード

NextJS × MicroCMSの構成で作り直しました！

👋二宮貫(Kan Ninomiya)