LoginSignup
4
0

More than 3 years have passed since last update.

@shirok(Shiro Kobayashi)in日本オラクル株式会社

Oracle Cloud: DNS + WAF + CDN CloudFrontでコンテンツを配信してみた

Last updated at Posted at 2021-01-31

Oracle Cloud Object StorageをOriginとして、Amazon CloudFrontを使用してコンテンツ配信してみてみます。
ということで、コンテンツ配置したObject StorageをORIGINとしてAmazon CloudFrontをCDNとしてコンテンツをキャッシュします。
そして、SSLサーバ証明書を取得し WAFを配置してHTTPSアクセスできるようにしてみてみます。

■ 構成

NW構成.png

● 利用コンポーネント一覧

種類　 利用サービス
CDN Amazon CloudFront
Storage OCI Object Storage
DNS Oracle DNS
WAF OCI Web Application Firewall (WAF)
SSL認証局 (certificate authority; CA) ZeloSSL
ドメイン・プロバイダ Freenom

■ Object Storage作成とコンテンツ配置

● Buket作成

1) OCIコンソール画面
[Object Storage]をクリック
00.png

2) Object Storage画面
[Create Bucket]をクリック
01.png

3) Create Bucket画面
以下内容を設定し[Create]をクリック

・Bucket Name: 任意の名前
・Default Storage Tier: Standard

02.png

● コンテンツUpload

作成したBuketへコンテンツUpload

1) Backet画面
コンテンツUploadするBuketをクリック
03.png

２) 作成したBacket画面
[Upload]をクリック
04.png

3) Upload Objects画面
JPGなどのコンテンツを選択してUpload
05.png

● コンテンツURI確認

1) Object画面
UploadしたObjectの右端にあるボタンを選択し、[View Object Detail]をクリック
https://objectstorage.ap-tokyo-1.oraclecloud.com/n/b/CDN/o/index.html
06.png

2) Object Details画面
URL Path (URI)を確認
ここでは、以下となります
07.png

● コンテンツ公開

1) Backet画面
[Edit Visibility]をクリック
10.png

2) Edit Visibility画面
Visibilityを Public へ設定し[Save Changes]をクリック
11.png

3) Publicステータス確認
Bucket Information にある Visibilityが PublicになればOK
12.png

■ Amazon CloudFront作成

● Amazon CloudFront作成

1) AWSコンソール画面
Networking & Content Deliveryにある[Amazon CloudFront]を選択
00.png

2) Amazon CloudFront画面
[Create Distribution]をクリック
01.png

3) Select a delivery method for your content.画面
[Get Started]をクリック
02.png

4) Create Distribution画面
以下設定し、[Create Distribution]をクリック

・Origin Domain Name: 任意の名前
・Origin Path: コンテンツBacketのURI,ここではobjectstorage.ap-tokyo-1.oraclecloud.com/n/b/CDN/o
・Origin ID: 任意の名前
・Default Root Object: index.html

03.png
03_2.png

5) 作成中
Statusが In Progress からDeployedになれば作成完了
05.png

6) 設定確認
CloudFront経由のURIになるDomain Nameを確認
ここでは、d12elghs3m7xr.cloudfront.net になります。
06.png

● 動作確認

1) index.html作成
以下参考に、img src項目へ、Object StorageのコンテンツURIを設定し、index.htmlファイル作成

・参考: ディストリビューションのテスト

[opc@inst01 ~]$ cat index.html
    <html>
    <head>My CloudFront Test</head>
    <body>
    <p>My text content goes here.</p>
    <p><img src="https://objectstorage.ap-tokyo-1.oraclecloud.com/n/b/CDN/o/test01.jpg" alt="my test image" width="200" height="200"
    </body>
    </html>

2) Object StorageへUpload
index.htmlを作成したBacketへUpload
10.png

3) CloudFront動作確認
CloudFrontで作成された、Domain NameのURIをブラウザでアクセスしてindex.htmlが表示されることを確認

URI: https://d12elghs3m7xr.cloudfront.net
11_test.png

■ ドメイン取得

CloudFrontで作成された、Domain NameのURIを、自分のドメインで表示できるように、ドメインを取得します
ここでは、Freenomで取得します
01.png

■ DNS設定

取得したドメインでWebアクセスできるようにDNSへCNAME登録します

1) OCIコンソール画面
[Networking] > [DNS Management]をクリック
01.png

2) DNS Management
[Zones]をクリック
02.png

3) Zones画面
Public Zonesを選択し、[Create Zones]をクリック
03.png

4) Create Public Zones画面
以下設定し、[Create Distribution]をクリック

・ZONE NAME: 取得した個人ドメイン

04.png

5) 作成完了
05.png

● Record追加

CloudFrontで生成されたURI (d12elghs3m7xr.cloudfront.net) を 取得した個人ドメイン(cloud.shirok.com)でWebアクセスできるようにCNAME登録します

1) Zones画面
左REsourcesにある[Records]を選択し、[Add Record]をクリック
06.png

2) Add Record画面
以下設定し、[Submit]をクリック

・RECORD TYPE: CNAMEを選択
・NAME: URIになる任意の名前を設定 
・TTL: 任意のTTL(Time to live)を設定
・RDATA MODE: Basicを選択
・TARGET: CloudFrontで生成されたURIを設定

10.png

3) Records画面
設定反映するためRecordsにある[Publish Changes]をクリック
11.png

4) Confirm画面
設定内容を確認し、[Publish Changes]をクリック
12.png

5) 設定完了
15.png

● ドメインプロバイダへDNSのNameservers情報登録

ドメインプロバイダFreenomへDNSのNameservers情報を登録

● 設定確認

1) nslookup確認

[opc@inst01 ~]$ nslookup cloudfront.shirok.ga
    Server:     2404:1a8:7f01:b::3
    Address:    2404:1a8:7f01:b::3#53

    Non-authoritative answer:
    cloudfront.shirok.ga    canonical name = d12elghs3m7xr.cloudfront.net.
    Name:   d12elghs3m7xr.cloudfront.net
    Address: 13.225.177.118
    Name:   d12elghs3m7xr.cloudfront.net
    Address: 13.225.177.23
    Name:   d12elghs3m7xr.cloudfront.net
    Address: 13.225.177.84
    Name:   d12elghs3m7xr.cloudfront.net
    Address: 13.225.177.21

2) コンテンツURI確認
https接続は、ssl証明書が登録されていないため次のようなエラー画面になります

https://cloudfront.shirok.ga
30_504Error.png

ERROR
504 ERROR
The request could not be satisfied.
CloudFront attempted to establish a connection with the origin, but either the attempt failed or the origin closed the connection. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

Generated by cloudfront (CloudFront)

ということで、次は、ssl証明書を取得し、エラー出ないようにします

■ SSL証明書 取得

ここでは、ZeroSSLからSSL証明書を取得します
SSLの取得設定には、DNS、AWSの設定が間に必要になり以下のような手順になります

● ZeroSSL①

1) ZeroSSLアクセス
https://zerossl.com/ し、[Create Free SSL Certificate]へ DNSへ登録したCNAMEのドメインを設定し、[Next Step]をクリック
01.png

2) New Certificate: Domains画面
以下内容を設定し、[Next Step]をクリック

・Enter Domains: SSLするドメインを設定

03.png

3) Validity画面
Certificateする期間を設定し、[Next Step]をクリック
04.png

4) CSR & Contact画面
証明書の連絡先情報とCSRを自動生成するので、[Auto-Generate CSR]をチェックし、[Next Step]をクリック
05.png

5) Finalize Your Order画面
必要なSSL Certificateを選択し、[Next Step]をクリック
06.png

6) Verification Method for Domain画面
[DNS (CNAME)]を選択し、以下内容をメモしDNSへCNAME登録します

・Name: DNSへ登録するCNAME
・Point To : DNSへ登録するCNAMEのTARGET
・TTL : 3600 (or lower)

07.png

● DNS設定追加

7) DNS Zone画面
DNSのRecordsへZeroSSLで出力された以下値内容を設定し、[Submit]をクリック

・RECORD TYPE: CNAMEを選択
・NAME: ZeroSSLで出力された Nameの値を設定
・TTL: 3600以下の任意のTTL(Time to live)を設定
・RDATA MODE: Basicを選択
・TARGET: ZeroSSLで出力された Point Toの値を設定

09.png

8) 設定反映
設定反映するためRecordsにある[Publish Changes]をクリック
10.png

● ZeroSSL続き②

9) Verification Method for Domain画面
[Next Step]をクリック
07.png

10) Verification Method for Domain画面
[Verify Domain]をクリック
13.png

11) Download Certificate画面
Sever Type[AWS]を選択し、[Download Certificate(zip)]をクリック
14.png

12) ダウンロード画面
ファイルを任意の場所へ保存
15.png

13) ファイル確認

[opc@inst01 ~]$ ls -l cloudfront.shirok.ga
    total 24
    -rw-rw-r--@ 1 opc  staff  2431  1 30 14:06 ca_bundle.crt
    -rw-rw-r--@ 1 opc  staff  2301  1 30 14:06 certificate.crt
    -rw-rw-r--@ 1 opc  staff  1706  1 30 14:06 private.key

● AWS Certificate ManagerへSSL証明書登録

1) AWSコンソール
Security, Identity, & Compliance にある[Certificate Manager]をクリック
30.png

2) Certificate画面
[Import Certificate]をクリック
31.png

3) Select certificate画面
以下項目にダウンロードしたSSL証明書ファイルのテキストをコピーして、[Next]をクリック

・Certificate body* : certificate.crtファイルの内容を設定
・Certificate private key* : private.keyprivate.keyファイルの内容を設定
・Certificate chain : ca_bundle.crtprivate.keyファイルの内容を設定

32.png

4) Add Tags画面
[Review and Import]をクリック
33.png

5) Review and Import画面
[Import]をクリック
34.png

6) Certificate画面
Statusが "Issued"でグリーンならOK
41.png

● AWS CloudFrontへCNAME登録

1) 作成したCloudFront ID画面
[Edit]をクリック
50.png

2) Edit Distribution画面
以下内容を設定し、[Yes Edit]をクリック

・Alternate Domain Names (CNAMEs): SSL証明取得した個人ドメインを設定
・SSL Certificate: [Custom SSL Certificate (example.com):]

51.png

3) 設定確認
52.png

● ZeroSSL続き③

1) Download Certificate画面
[Check Installation]をクリック
61.png

2) 設定完了
62.png

■ WAF

1) OCIコンソール画面
[Security] > [Web Application Firewall]をクリック
01.png

2) WAF画面
[Create WAF Policy]をクリック
02.png

3) Create WAF Policy画面
以下内容を設定し、[Create WAF Policy]をクリック

・Name: 任意の名前を設定
・Primary domain: 個人ドメインを設定
・Origin name: 任意の名前を設定
・URI: CloudFrontで生成されたURIを設定

03.png

4) Setting画面
作成したWAFの [Settings]を選択し、[Edit]をクリック
05修正.png

5) Edit Settings画面
以下内容を設定し、[Save Changes]をクリック

・Enable HTTPS support: チェック
・Certificate source: [pload or paste certificate and private key]をクリック
・Upload certificates source: certificate.crtファイルを設定
・Upload private key sourceprivate.keyprivate.keyファイルを設定
・HTTP to HTTPS redirect: 必要に応じてチェック
・Enable SNI: チェック

08.png

6) UPDATING
数分まちます
09.png

7)UPDATING 完了
表示された"CNAME Target"項目の値をコピーして、DNSのCNAMEへ登録します

CNAME Target: cloudfront-shirok-ga.o.waas.oci.oraclecloud.net

24.png

● DNS CNAME登録

DNSへ、個人ドメインとWANで生成されたドメインをCNAMEします
以前登録したCloudfrontで生成されたドメインと入れ替えます。

1) Add Record画面
以下内容を設定し、Submitをクリックし、[Publis Changes]をクリック

・RECORD TYPE: CNAMEを選択
・NAME: 個人ドメインを設定 
・TTL: 任意のTTL(Time to live)を設定
・RDATA MODE: Basicを選択
・TARGET: WAFで生成されたドメインを設定

51_DNSーCNAME登録01.png

2) Confirm画面
内容を確認し、[Publis Changes]をクリック
51_DNSーCNAME登録02.png

3) 更新確認
CNAMEが更新されたことを確認
51_DNSーCNAME登録03.png

● nslookup確認

DNS CNAMEの宛先がOCI WAFで発行された"CNAME Target"の値になっていることを確認

    [opc@inst01 ~]$  nslookup cloudfront.shirok.ga
        Server:     2606:b400:300:d:feed::1
        Address:    2606:b400:300:d:feed::1#53

        Non-authoritative answer:
        cloudfront.shirok.ga    canonical name = cloudfront-shirok-ga.o.waas.oci.oraclecloud.net.
        cloudfront-shirok-ga.o.waas.oci.oraclecloud.net canonical name = tm.inregion.waas.oci.oraclecloud.net.
        tm.inregion.waas.oci.oraclecloud.net    canonical name = apac-tokyo.inregion.waas.oci.oraclecloud.net.
        Name:   apac-tokyo.inregion.waas.oci.oraclecloud.net
        Address: 192.29.33.95
        Name:   apac-tokyo.inregion.waas.oci.oraclecloud.net
        Address: 192.29.33.251
        Name:   apac-tokyo.inregion.waas.oci.oraclecloud.net
        Address: 192.29.32.155

● WAF Bot Management追加

OCI WAFのCAPTCHAチャレンジ機能を追加して、保護されたWebアプリケーション機能にボットからアクセスできないようにします。

1) WAF画面
WAFのWAF Policyから[Bot Management]をクリックし、[CAPTCHA Challenge]タブをクリック
60_WAF_Bot_設定画面.png

2) Add CAPTCHA Challenge画面
[Add CAPTCHA Challenge]をクリックし、以下内容を設定し、[Add]をクリック
61_WAF_Bot_CAPTCHA.png

3) 設定完了
63_WAF_Bot_設定完了画面.png

■ 接続テスト

1) URI接続
URI接続(ここではhttps://cloudfront.shirok.ga) して
WAFの Bot機能CAPTCHA Challengeを設定したので、以下チャレンジ・レスポンス認証画面が出力されることを確認し、正しい文字を入力してクリック
64_WAF_Bot_設定確認画面.png

2) URI接続完了
コンテンツへアクセスできればOK
30_HTTPS接続テスト.png

　

■ 参考

　・SSL証明:ZeroSSL
　・Domain Provider:Freenom
　・AWSマニュアル: Amazon CloudFront ドキュメント
　・Oracle マニュアル
　　　　- WAF ボット管理
　　　　- Web Application Firewall
　　　　- DNSおよびトラフィック管理
　　　　- Object Storage
　　　　- SSL証明書の作業

4
0
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
4
0