📖

New Service : Cloudflare Cloud Connector : クラウドオブジェクトストレージへのプロキシーサービス

2024/08/20に公開

先日Cloudflare Cloud Connector という新しいサービスがベータとしてリリースされました。これは無料プランを含めたCloudflareの全ユーザーが利用可能な機能です。

単純には以下4つのクラウドオブジェクトストレージに対して通信のプロキシーをクラウドフレアが提供し、例えば特定URIパス（仮想ディレクトリ）へのアクセスのみ指定したクラウドオブジェクトストレージからアセットを読み込むということが可能になります。

Cloudflare R2 (近日サポート予定）
Amazon S3
Google Cloud Storage
Microsoft Azure Blob Storage

何がうれしいか？　HTTP ポストヘッダとの関係性

まずこの機能が何に役に立つかを見ていきます。例えば以下のHTMLがAmazon EC2でホスティングされているとします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
    <img src="https://cloudflare0819.s3.amazonaws.com/images/images.png" alt="Example Image">
</body>
</html>

この場合クライアントブラウザは２つのドメインにアクセスすることになります。

HTMLのドメイン
images/images.pngのドメイン
通常ブラウザがウェブサーバにアクセスする際にはHost Header という値を送出しています。この値にはアクセス先のドメインが格納されます。

GET /index.html HTTP/1.1
Host: www.example.com

ウェブサーバがwww.example.comの値を読み取り正しいアクセスかどうかを判別しています。実際のドメインとHost Headerの値が一致しない場合の挙動はウェブサーバごとに異なります。通常はブラウザが自動でHost Headerをセットするためこの構成は問題になりませんが、例えばWorkers等がこのHTMLをfetchするときには少し厄介な問題が発生します。https://cloudflare0819.s3.amazonaws.com/images/images.pngを読み込むために再度Host Headerをセットしなおさないといけないということです。

またHTMLがホスティングされているドメインに対してCDNを設定する場合、https://cloudflare0819.s3.amazonaws.com/images/images.pngはCDN経由ではありませんのでこのままではコンテンツはキャッシュされません。一般的にはこのドメイン用にもう一つCDNディストリビューションを作成し管理する必要があり手間が生じます。CDNはDNSに対して設定されますが、以下の場合一つのDNSでは設定できないためです。

HTML:ec2-18-182-30-123.ap-northeast-1.compute.amazonaws.com → harunobukameda.com
IMG:cloudflare0819.s3.amazonaws.com → harunobukameda.com

このような構成は取れないためそれぞれに対してドメイン/サブドメインをセットしCDNを２か所セットすることになります。このため結局Host Header は2つになってしまいます。

これを纏めてくれるのがCloud Connectors です。

さっそくやってみる

この内容に従いWEBサイトを起動し、CloudflareのCDN経由でアクセス可能にします。

次に/images/のURIパスだけをAmazon S3に向けます。テスト用にhttps://cloudflare0819.s3.amazonaws.com/images/images.pngに画像を格納しています。

Create Cloud ConnectorをクリックしS3を選択します。

S3のドメインをセットしNextをクリックします。

適当な名前を付け、Custom filter expressionを選択します。All incoming requestsを選択した場合すべての通信がcloudflare0819.s3.amazonaws.comを向いてしまいます。http.request.full_uri wildcard "https://a.harunobukameda.com/images/*"

Deployをクリックすると完了です。

imagesUIRパスだけがS3を見ていることがわかります。
最後にHTMLを以下に変更してテストします。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>

<!-- ここに画像を追加 -->
<img src="/images/images.png" alt="Image">

</body>
</html>

単一ドメインへのアクセスのみで異なるドメインの画像をシームレスに読み込んでいることがわかります。

何がうれしいか？ HTTP ポストヘッダとの関係性

さっそくやってみる

Discussion

何がうれしいか？　HTTP ポストヘッダとの関係性