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

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

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

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

このブログはタイ語のブログから日本語に翻訳したものです。
วิธีการแสดงผลเว็บไซต์ที่สร้างจาก EC2 ด้วย CloudFront | DevelopersIO


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.