[CDN] AWS CloudFront に変わる構成を、OCIでも考えてみた [ Cloudflare + ObjectStorage ]

はじめに

AWSにはCloudFrontというCDNサービスが在る
Oracle Cloud Infrastructure でこれに変わる構成として、任意のCDNプロバイダとのかけあわせが考えられる
本記事では、Object Storageでホストされている静的WebサイトをCloudflareに公開する方法について、それに関連する資料を纏める

CloudFrontとは

概要

https://aws.amazon.com/jp/cloudfront/
(引用抜粋)
Amazon CloudFront は、高いパフォーマンス、セキュリティ、デベロッパーの利便性のために構築されたコンテンツ配信ネットワーク (CDN) サービスです。

設定流れ

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
(引用抜粋)

1. Amazon S3 バケットや独自の HTTP サーバーなどのオリジンサーバーを指定
2. ファイルをオリジンサーバーにアップロード
3. ディストリビューション作成
4. ディストリビューションにドメイン名を割り当て
5. CloudFrontがEdge Locationにディストリビューション構成を送信

OCIで考えられる類似構成

冒頭記載の通り、Cloudflare + ObjectStorageを考えてみる

Cloudflareとは

https://www.cloudflare.com/ja-jp/
Cloudflareは、サイトのパフォーマンス向上と安全性の確保を目的とした、グローバルなContent Delivery Network（CDN）サービスのひとつです。ウェブサイトを高速化し、DDoS攻撃などの脅威から保護するための機能を提供しています。

なぜCloudflareなのか?

Oracleは、Cloudflareと共同でBandwidth Allianceに加盟し、データ転送料金の削減に取り組むことを発表しました。
これにより、両社のサービスを利用する企業は、高額なデータ転送料金を回避でき、コスト削減が可能になります。
Bandwidth Allianceは、データ転送料金の割引や免除を提供するクラウドプロバイダーのグループで、現在19社が参加しています。
Oracleは、特にデータ転送に関する料金を無料にすることで、企業がより効率的にクラウドサービスを利用できるよう支援します。

実装の流れ

下記に実装の流れを示します
今回の検証では、object storageに静的コンテンツ(html)を配置し、Cloudflare->API gateway->object storage経由でコンテンツが見えることをゴールとしています

下準備

Oracle Cloudへのアクセス/アカウントサインナップ

静的Webサイトの準備

html , javascript , css 等、静的コンテンツを用意します
私の検証ではシンプルに index.html のみ用意しました

OCI上でのObject Storageバケット用意

• オブジェクト・ストレージの画面から「バケットの作成」をクリック
• バケット名 : 任意
• デフォルト・ストレージ総 : 標準
• 暗号化 : Oracle管理キーを使用した暗号化 (デフォルトのまま
• 「作成」クリック

バケットへの配布ファイル(html,js,css等)のアップロード

• リソース「オブジェクト」から、オブジェクトの「アップロード」をクリック
• オブジェクト名の接頭辞 : 任意
• ストレージ層 : 標準
• ファイルを選択
• 「アップロード」
• Object StorageにアップロードしたhtmlファイルのURLをブラウザで入力し、サイト表示できることを確認しましょう

コンテンツが少し寂しいですが、シンプルhtmlだとこのような感じです

事前認証済リクエストの作成

• 名前 : 任意
• 事前承認リクエスト・ターゲット : バケット
• アクセス・タイプ : オブジェクトの読み取りを許可

VCN作成

「仮想クラウド・ネットワーク」クリック

「VCNの作成」クリック

名前 : 任意

IPv4 CIDR blocks : 任意

DNS関連->デフォルトのまま
IPv6 Prefixes : 任意
「VCNの作成」クリック

セキュリティ・リストでポート433を許可

• 左ツリーより、「セキュリティ・リスト」を選択
• 「Default Security List for ～」クリック

「イングレス・ルールの追加」クリック

ソース・タイプ : CIDR
ソースCIDR : 0.0.0.0/0
IPプロトコル : TCP
ソース・ポート範囲 : 443
宛先ポート範囲 : All (デフォルトのまま
「イングレス・ルールの追加」クリック

Oracle API Gatewayの作成

• 開発者サービス -> API管理 -> ゲートウェイ
• ゲートウェイの作成

• 名前 : 任意
• タイプ：パブリック
• ネットワーク：作成したVCNとパブリック サブネットを選択
• 証明書 : デフォルト

Oracle API Gatewayデプロイメントの設定

• 「デプロイメントの作成」

• 「最初から作成」を選択

• パス接頭辞を「/」と設定
• APIリクエスト・ポリシー 以降は操作せずに「次」

• 「認証なし」を選択
• 「次」

• パスフィールドに/{req*}と入力
• 「メソッド」ドロップダウンリストから「GET」を選択
• 複数のバックエンドの追加

• セレクター フィールドでパスを選択
• パス名フィールドでreqと入力

• バックエンドの定義をクリック
• 「名前」に default

• 「一致タイプ」に「いずれかの」を選択
• 「デフォルトに設定」チェックボックスをオン
• 「バックエンド・タイプ」にHTTPを選択

• [URL]フィールドに index.html ページのオブジェクト ストレージ URLを入力
  • 例 : https://objectstorage.ap-tokyo-1.oraclecloud.com/p/OueoOQA_-doEbIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxbd4SYIGOLvCthxRIzB/n/xxxx/b/Static-Web-Site-Demo/o/index.html
• 「定義」

次にhtmlファイルのルールを作成します

• 「バックエンド定義」を再度クリック
• 名前 : html
• 一致タイプ : ワイルドカード
• 式 : *.html
• バックエンドにHTTPを選択
• 「URL」フィールドにオブジェクトストレージバケットのURLとリクエスト・コンテキスト変数（${request.path[req]}）を連結したURLを入力
  - https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

必要に応じて、css , js ファイルに同様のルールを作成します
すべてのルールを定義しましたら「次」をクリックします
確認画面で作成をクリック
作成したAPI GatewayのデプロイメントのエンドポイントURLを確認します
ブラウザで上記URLへアクセスしコンテンツが表示できることを確認

cloudflare実装

• CloudflareにWebサイトの追加
  • 「ドメインを追加する」
  • 既存のドメインを入力に、ドメイン名を入力 （ドメインを取得しましょう）

ネーム・サーバーの更新

• [DNS] > [レコード]タイルを選択
• Cloudflare ネームサーバを確認する
• ドメインの管理元で、Nameserverの設定に上記のネームサーバを設定する

DNSレコードの検証

• OCIのAPIゲートウェイのエンドポイントをCNAMEレコードとして Cloudflare DNSレコードに追加
  • タイプ: CNAME
  • Name: @
  • ターゲット: APIゲートウェイのホスト名

DNS伝播の待機

• 通常は数分から数時間、とのこと

SSL/TLS暗号化の構成

• 「SSL/TLS」および「概要」
• カスタムSSL/TLS : フル

ドメインURLテスト

• 取得/設定したドメインをブラウザに入力し想定のコンテンツが表示されることを確認します
• 例 : https://hogehoge.nnn.top/index.html