Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@shengjun-zh(Shengjun Zhu)

Oracle Cloud Infrastructure Object Storageでホストされている静的WebサイトをCloudflareに公開

Posted at

1.1. 概要

このチュートリアルで、OCI オブジェクト ストレージと Oracle API Gateway を使用して、HTTP 経由で静的 Web アプリケーションのホスティングを構成する手順を説明します。また、パフォーマンス、セキュリティおよび信頼性を向上させるには、静的Webサイトをコンテンツ配信ネットワーク(CDN)と統合する手順を説明します。同じ手順に従って、任意のCDNプロバイダにWebサイトを追加できます。このチュートリアルでは、Cloudflareに静的にホストされたWebサイトを追加する手順について説明します。

同じアプローチでリッチなコンパイル済みのAOT 準拠のJavaScript Web アプリケーション (サポートされているフレームワークとライブラリは、Angular 2+、ReactJs、NestJs、VueJs、Ionic など) を構成することも可能です。

1.2. 前提条件

  1. このチュートリアルでは、Oracle Cloud へのアクセスが必要です。無料アカウントにサインアップするには、「OCI Cloud Free Tier」を参照してください。

  2. 静的Webサイト アプリケーションが必要です。このチュートリアルでは、HTMLファイル、Javascriptファイル、CSSファイルそれぞれ１つを含むサンプル・アプリケーションを利用しています。AOT 準拠のサンプル・アプリケーション (サポートされているフレームワークとライブラリは、Angular 2+、ReactJs、NestJs、VueJs、Ionic など)も利用可能です。

  3. Cloudflareアカウントが必要です。無料アカウントにサインアップするには、「Cloudflareポータルサイト」を参照してください。

  4. 独自ドメイン名が必要です。今回は、有料のNameSiloドメインを利用しています。

1.3. Oracle Object Storageバケットを作成する

まず、OCI オブジェクト ストレージに新しいバケットを作成します。このバケットは、静的 Web サイトのホストに使用されます。

01_create_bucket_01.png

1.4. 配布ファイルをバケットにアップロードする

前のタスクで作成したバケットにアプリケーション配布ファイルをアップロードします。こちらのチュートリアルで利用するサンプルアプリケーションのファイル構成がこちらになります。

├── css
│   └── style.css
├── index.html
└── js
    └── script.js

  1. HTMLファイルをバケットのルートディレクトリにアップロードします。

    02_upload_file_01.png

  2. CSSファイルをcss/の下にアップロードします。

    02_upload_file_02.png

  3. Javascriptファイルをjs/の下にアップロードします。

    02_upload_file_03.png

  4. すべてのファイルをアップロードしました。

    02_upload_file_04.png

1.5. 事前認証済みリクエストを作成する

Oracle API Gateway がインターネット経由で配布ファイルを提供できるようにするには、配布ファイルが保存されているオブジェクト ストレージ バケットに対して事前認証されたリクエストPARを作成する必要があります。

API ゲートウェイを構成するときにこれを使用します。

  1. オブジェクト・ストレージのバケット詳細画面で、「事前認証済リクエスト」に移動します。「事前認証済リクエストの作成」をクリックします。

    03_create_par_01.png

  2. 事前認証済リクエスト・ターゲットを「バケット」と指定します。アクセス・タイプ及び有効期限を指定し、「事前認証済リクエストの作成」をクリックします。

    03_create_par_02.png

  3. 事前認証リクエストのURLをコピーして、他の場所に保存します。

    03_create_par_03.png

  4. オブジェクト・ストレージにアップロードしたHTMLファイルのURL（オブジェクトの詳細画面でURLを取得できます）をブラウザに入力して、サイトの表示を確認します。

    02_upload_file_05.png

1.6. VCNの作成

Oracle API Gatewayを作成する前に、VCNを作成する必要があります。

  1. ナビゲーションメニューからネットワーキング、仮想クラウド・ネットワーキングの順に移動します。「VCNウィザードの起動」をクリックします。「インターネット接続性を持つVCNの作成」を選択します。

    04_create_vcn_01.png

  2. VCN名を指定します。

    04_create_vcn_02.png

  3. 作成をクリックします。

    04_create_vcn_03.png

    04_create_vcn_04.png

  4. HTTPS用のポート433を開放するために、セキュリティ・リストを更新します。デフォルトセキュリティリストを開きます。

    04_create_vcn_05.png

  5. イングレス・ルールを追加します。

    04_create_vcn_06.png

    04_create_vcn_07.png

1.7. Oracle API Gatewayを作成する

Oracle API Gateway サービスを使用すると、プライベート エンドポイントを持つ API を公開できます。また、インターネット トラフィックを受け入れる場合は、パブリック IP アドレスで公開できます。エンドポイントは、API 検証、リクエストとレスポンスの変換、CORS、認証と認可、およびリクエストの制限をサポートします。詳細については、「Oracle API Gateway の概要」を参照してください。

  1. OCI メニュー、開発者サービス、API ゲートウェイに移動し、「ゲートウェイの作成」をクリックします。ゲートウェイの作成画面で次のように入力します。

    • タイプ：パブリック
    • ネットワーク：作成したVCNとパブリック サブネットを選択します。

    05_create_api_gateway_01.png

  2. 作成したゲートウェイの詳細画面が次のようです。

    05_create_api_gateway_02.png

1.8. Oracle API Gatewayのデプロイメントを設定する

  1. Oracle API Gateway が正常に作成されたら、「デプロイメント」に移動して新しいデプロイメントを作成します。

    06_create_api_gateway_deployment_01.png

  2. 「最初から作成」を選択し、パス接頭辞を「/」と設定します。これが URL のベースパスになります。ほかの設定はデフォルト値を受け入れ、[次へ]をクリックします。

    06_create_api_gateway_deployment_02.png

  3. 「認証なし」を選択し、「次へ」をクリックします。静的 Web サイトには認証を追加する必要はありません。

    06_create_api_gateway_deployment_03.png

  4. API デプロイメント ウィザードで、デプロイメントのベース パスを拡張するルーティングを追加します。

    • パスフィールドに/{req*}と入力します。
    • 「メソッド」ドロップダウンリストから「GET」を選択します。
    • 複数のバックエンドの追加を選択します。
    • セレクター フィールドでパスを選択します。
    • パス名フィールドでreqと入力します。
    • バックエンドの定義をクリックします。

    06_create_api_gateway_deployment_04.png

    パス・パラメータおよびワイルドカードの追加方法は、ドキュメント「ルート・パスへのパス・パラメータおよびワイルドカードの追加」をご参照ください。

  5. バックエンド・ルールを作成します。まずは、デフォルトのルールを作成し、「名前」に default 、「一致タイプ」にいずれかのと入力し、「デフォルトに設定」チェックボックスをオンにして、「バックエンド・タイプ」にHTTPを選択し、 [URL]フィールドに index.html ページのオブジェクト ストレージ URL（例えば、https://objectstorage.ap-tokyo-1.oraclecloud.com/p/OueoOQA_-doEbIpCKoC8fi9HPFJUjd68inmYbfWerlMQrobd4SYIGOLvCthxRIzB/n/sehubjapacprod/b/Static-Web-Site-Demo/o/index.html） を入力して、[定義] をクリックします。

    バックエンド・ルール照合に関するノート

    使用するバックエンドを決定するルールを作成するときに、特定のバックエンドにルーティングするリクエストに対して、コンテキスト変数値が特定の値と一致する必要がある程度を指定できます。完全一致を要求することも、ワイルドカードで始まる値を指定することもできます。APIゲートウェイは、指定した順序(完全一致ルールが最初に、ワイルドカード・ルールが続く)でルールを評価し、最初の一致ルールを使用します。コンテキスト変数値がバック・エンド・ルールと一致しない場合に使用するデフォルト・ルールを指定することもできます。デフォルトとしてルールが指定されておらず、受信リクエストのコンテキスト変数値がバック・エンド・ルールと一致しない場合、リクエストはエラーを返します。どのバックエンド・ルール(およびどのバックエンド)を使用するかを決定する優先順位は、次のように要約できます。

    • コンテキスト変数値がルールの値と完全に一致する場合は、そのルールを使用します。

    • それ以外の場合、コンテキスト変数値がワイルドカードで開始または終了するルールの値と一致する場合は、一致するワイルドカードを含む最初のルールを使用します。

    • それ以外の場合は、ルールがデフォルト・ルールとして指定されている場合は、そのルールを使用します。

    • そうでない場合は、エラーを返します。

    06_create_api_gateway_deployment_05.png

  6. 次は、htmlファイルのルールを作成します。

    06_create_api_gateway_deployment_06.png

  7. 名前にhtml、一致タイプにワイルドカード、ワイルドカード式に*.htmlと入力し、バックエンドにHTTPを選択し、「URL」フィールドにオブジェクトストレージバケットのURLとリクエスト・コンテキスト変数（${request.path[req]}）を連結したURLを入力して、定義をクリックします。URLは次のようになります。

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

    例えば、

    https://objectstorage.ap-tokyo-1.oraclecloud.com/p/OueoOQA_-doEbIpCKoC8fi9HPFJUjd68inmYbfWerlMQrobd4SYIGOLvCthxRIzB/n/sehubjapacprod/b/Static-Web-Site-Demo/o/${request.path[req]}

    これによって、API Gateway デプロイメントのエンドポイントへのリクエスト（例えば、https://n3lqcn3dvrctaclen2rxu7wmha.apigateway.ap-tokyo-1.oci.customer-oci.com/index.html ）をオブジェクトストレージ バケットのHTMLファイル（例えば、https://objectstorage.ap-tokyo-1.oraclecloud.com/p/OueoOQA_-doEbIpCKoC8fi9HPFJUjd68inmYbfWerlMQrobd4SYIGOLvCthxRIzB/n/sehubjapacprod/b/Static-Web-Site-Demo/o/index.html ）へ転送されます。URLの中にあるindex.html部分は、リクエスト・コンテキスト変数（${request.path[req]}）より取得されます。

    06_create_api_gateway_deployment_07.png

  8. 必要に応じて、css、js ファイルに同様のルールを作成します。

    06_create_api_gateway_deployment_08.png

    06_create_api_gateway_deployment_09.png

    API Gateway デプロイメントのエンドポイントへのリクエスト（例えば、https://n3lqcn3dvrctaclen2rxu7wmha.apigateway.ap-tokyo-1.oci.customer-oci.com/js/script.js ）をオブジェクトストレージ バケットのJavascriptファイル（例えば、https://objectstorage.ap-tokyo-1.oraclecloud.com/p/OueoOQA_-doEbIpCKoC8fi9HPFJUjd68inmYbfWerlMQrobd4SYIGOLvCthxRIzB/n/sehubjapacprod/b/Static-Web-Site-Demo/o/js/script.js ）へ転送されます。URLの中にあるjs/script.js部分は、リクエスト・コンテキスト変数（${request.path[req]}）より取得されます。
    Webアプリケーションのフォルダ構成によって、URLを適当に変更してください。

  9. すべてのルールを定義しましたら「次」をクリックします。

    06_create_api_gateway_deployment_10.png

  10. 確認画面で作成をクリックします。

    06_create_api_gateway_deployment_11.png

  11. 作成したAPI GatewayのデプロイメントのエンドポイントURLを確認し、コピーをクリックします。

    06_create_api_gateway_deployment_12.png

  12. コピーしたエンドポイントURLとHTMLファイル名を連携したURL（例えば、https://n3lqcn3dvrctaclen2rxu7wmha.apigateway.ap-tokyo-1.oci.customer-oci.com/index.html をブラウザでアクセスすると、アプリケーションが表示されます。

    06_create_api_gateway_deployment_13.png

    [!TIP]
    バックエンド定義に、アプリケーションに含まれるさまざまなファイル タイプをすべて追加することを忘れないでください。

    この手法を使用して設定できるのは、AOT (Ahead of Time) コンパイルされたアプリケーションと静的 Web サイトのみです。アプリケーションがネイティブの JavaScript コードでコンパイルされていることを確認してください。

1.9. Cloudflare へ Webサイトの追加

OCI Object Storageバケットで静的にホストされているWebサイトをCloudflareに追加します。詳細は、Cloudflareへのサイトの追加を参照してください。

このチュートリアルでは、shengjun.topという名前のドメインを使用します。

  1. Cloudflareにログインし、「ドメインを追加する」をクリックします。

    07_create_cloudflare_domain_01.png

  2. Webサイトのドメイン名を入力します。CloudflareはDNSレコードを自動的にスキャンしようとします。

    07_create_cloudflare_domain_02.png

1.10. ネーム・サーバーの更新

Cloudflareからドメインを購入していない場合は、ドメインレジストラのCloudflareネームサーバーを更新する必要があります。

  1. Cloudflareは、一連のネームサーバーを提供します。作成したWebサイト詳細画面から[DNS] > [レコード]タイルを選択します。ドメインの DNS 管理が表示されます。Cloudflare ネームサーバーを確認します。

    08_update_name_server_01.png

  2. ドメイン・レジストラのWebサイトにログインし、Cloudflareが提供するドメイン・ネーム・サーバーを更新します。詳細は、Change nameserversを参照してください。

    08_update_name_server_02.png

1.11. DNSレコードの追加

OCIのAPIゲートウェイのエンドポイントをCNAMEレコードとして Cloudflare DNSレコードに追加します。

  1. レコードの追加をクリックします。

    09_add_dns_record_01.png

  2. 次の情報を入力し、保存をクリックします。

    • タイプ: CNAME。
    • Name: @
    • ターゲット: <Your API Gateway Hostname>は、OCIコンソールからAPIゲートウェイのホスト名を取得できます。

    09_add_dns_record_02.png

  3. 追加したレコードを一覧に表示していることを確認します。

    09_add_dns_record_03.png

1.12. DNS伝播の待機

ネームサーバーおよびDNSレコードを更新すると、DNS伝播が発生します。このプロセスには時間がかかることがあります。通常は数分から数時間です。

1.13. SSL/TLS暗号化の構成

DNSの伝播が完了したら、「SSL/TLS」および「概要」に移動します。SSL/TLS 暗号化モードは、 Cloudflare が 2 つの接続を管理する方法を制御します。1 つは訪問者と Cloudflare の間、もう 1 つは Cloudflare とオリジン サーバーの間です。このチュートリアルでは、「フル」を選択します。

10_cloudflare_ssl_tls_01.png

Cloudflare 暗号化モードの詳細については、ドキュメントを参照してください。

デフォルトでは、Cloudflare は、 Cloudflareに追加されアクティブ化されたすべてのドメインに対して、無料で共有されない、公的に信頼された SSL 証明書（ユニバーサルSSL証明書）を発行し、更新します。独自の SSL 証明書を使用したいビジネスおよびエンタープライズ ユーザーは、カスタム証明書をアップロードできます。

1.14. ドメインURLのテスト

ドメインURLを取得し、ブラウザに入力してください。このチュートリアルでは、https://shengjun.top/index.htmlを入力します。これにより、指定したドメインでアプリケーションがオープンします。


11_confirm_domain_01.png

1.15. 参考資料

Oracle Cloud Infrastructure Object Storageでホストされている静的WebサイトをCloudflareに公開

Set Up OCI Object Storage and Oracle API Gateway for Static Website Hosting

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?