CloudFront の経由で EC2 インスタンス上の Webサイトを公開する

CloudFront の経由で EC2 インスタンス上の Webサイトを公開する

Amazon CloudFront は、EC2 インスタンスからデータを取得して Webサイトに公開できます。このブログでは、CloudFront の経由で EC2 インスタンス上の Webサイトを公開するのをご紹介致します。

こんにちは、クラスメソッドタイランドのPOPです。


Amazon CloudFront とは

Amazon CloudFront は、Amazon Web Services (AWS) が提供するコンテンツ配信ネットワーク (CDN) です。CloudFront は、ウェブサイト、アプリケーション、動画、API などのコンテンツを、世界中のユーザーに対して迅速かつ安全に配信するためのサービスです。
ec2_cf

前提条件

EC2 Instance

※EC2 インスタンスが作成済であること。

EC2 インスタンスの作成方法については、以下のリンクを参照してください。
https://dev.classmethod.jp/articles/how-to-install-amazon-linux-2023-on-ec2-jp/

Elastic IP アドレスを割り当てる

※Elastic IP アドレスが割り当て済であること。

Elastic IP アドレスを割り当てる方法については、以下のリンクを参照してください。
https://dev.classmethod.jp/articles/how-to-link-eip-to-ec2-instance-jp/

EC2 インスタンスの PHP 8.2

※EC2 インスタンスに PHP 8.2 と Apache がインストール済であること。

EC2 インスタンスに PHP 8.2 と Apache のインストール方法については、以下のリンクを参照してください。
https://dev.classmethod.jp/articles/how-to-install-php82-and-apache-in-ec2-amazon-linux-2023-jp/

Amazon CloudFront の構成概要

CloudFront の経由で EC2 インスタンス上の Webサイトを公開します。
ec2_cf_start

CloudFront の経由で Webサイトを公開する

CloudFront でディストリビューションを作成

まずは「パブリック IPv4 DNS」をコピーします。
public_website_cf-1

「CloudFront」を検索して選択します。
service_cloudfront_search-202411

まだ作成したことがない場合は、このような画面が表示されますので、「CloudFront ディストリビューションを作成」をクリックすることができます。
service_cloudfront_button-first_page-202411

または、「☰」>「ディストリビューション」>「ディストリビューションを作成」をクリックして、ディストリビューションに移動することもできます。
service_cloudfront_button-distribution_page-202411

次に「ディストリビューションを作成」画面で以下のように設定します。
オリジン
・Origin domain:「パブリック IPv4 DNS」
・プロトコル:「HTTP のみ (HTTP port 80)」(このように選択すると HTTP port は 80 に変わります。)
public_website_cf-2

デフォルトのキャッシュビヘイビア

ビューワー に設定する内容
・ビューワープロトコルポリシー:「Redirect HTTP to HTTPS」
・許可された HTTP メソッド:「GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE」

※注記: ビューワー についての説明
ビューワープロトコルポリシー には次の接続特性があります。

  • HTTP and HTTPS (接続中に変更はありません。)
    • HTTP → HTTP
    • HTTPS → HTTPS
  • Redirect HTTP to HTTPS (接続中に自動的に変更されます。)
    • HTTP → HTTPS
    • HTTPS → HTTPS
  • HTTPS only (接続できません。)
    • HTTP → ✕
    • HTTPS → ✓
      public_website_cf-3

キャッシュキーとオリジンリクエスト

・キャッシュポリシー:「CachingDisabled」
・オリジンリクエストポリシー - オプション:「AllViewer」

※注記: キャッシュポリシー の選択肢についての説明
CachingDisabled はキャッシュを無効する設定で、データが常に変更される動的 Webサイトに適しています。
public_website_cf-4

ウェブアプリケーションファイアウォール (WAF)

⦿「セキュリティ保護を有効にしないでください」
※アプリケーションに AWS WAF セキュリティ保護が必要ない場合は、このオプションを選択してください。
public_website_cf-5

設定

・説明 - オプション:「pop-ec2-cf」(任意の名前を入力してください。)
すべての設定が完了したら、一番下の「ディストリビューションを作成」をクリックします。

※注記: 説明されていない設定はすべてデフォルト値を使用します。
public_website_cf-6

すると自動的にこの画面に移動されます。
最終変更日を確認し、「デプロイ」と表示されていることがわかります。最終変更日が現在の日付に変わるまで少々お待ちください。(今回は約 4 分程度かかります。)
public_website_cf-7

CloudFront から作成したディストリビューションドメイン名で Webサイトの公開をテストする

ディストリビューションドメイン名をコピーしておきます。
test_domain_cf-1

ディストリビューションドメイン名をコピーするとこのような URL が得られます。使用しているブラウザーで開きます。

https://xxxxxxxxxx.cloudfront.net/

test_domain_cf-2

または、PHP 8.2 と Apache をインストールする手順を完了すると、以下の URL を開くこともできます。

https://xxxxxxxxxx.cloudfront.net/test.php

test_domain_cf-3

まとめ

Amazon CloudFront 経由で Webサイトを公開すると、 Webサイトの速度が向上します。また、EC2 インスタンスが自動的に作成するパブリック IPv4 アドレスを使用するよりも安全です。

この記事がどなたかのお役に立てば幸いです。
以上、クラスメソッドタイランドのPOP(Tinnakorn Maneewong)でしたっ!

関連記事

Amazon Linux 2023 を EC2 に作成し、PuTTY でサーバーに接続する方法 | DevelopersIO
Elastic IP (EIP) を EC2 インスタンスに割り当てる方法 | DevelopersIO
AWS の EC2 上で Amazon Linux 2023 に PHP 8.2 と Apache をインストールする | DevelopersIO

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.