S-map NEWS & REPORTS タイトルロゴ

ウェブプラットフォーム作成の基礎

AWSでの静的サイトホスティングと独自ドメイン設定

ホームページ用公開資料

<www.s-map.biz> 別館
アイコン

2025 [ Vol.0.1 | No.2 ]


AWSについて



AWSでの静的サイトホスティングと独自ドメイン設定

まず、AWS(Amazon Web Services)とは何か、というところからお話ししますね。

AWSは、Amazonが提供している、インターネット上で利用できる様々な「クラウドサービス」の総称です。私たちが普段使っているスマホやパソコンのアプリのように、サーバーやデータベース、データ保存の場所など、ウェブサイトやアプリケーションを動かすために必要な色々な機能が、インターネットを通じて利用できると考えてください。

AWSを使うと、自分で高価なコンピューター(サーバー)を購入したり、それを管理したりする必要がなく、使った分だけ料金を支払う形で、必要な時に必要なだけサービスを利用できます。これは、電気や水道のように、必要な時に必要なだけ利用するイメージに似ていますね。

今回の学習目標である「静的サイトホスティング」とは、簡単に言うと、動きの少ないシンプルなウェブサイト(例えば、会社の紹介ページや個人のプロフィールページ、ブログなど)をインターネット上に公開する方法の一つです。

「静的」というのは、表示される内容がほとんど変化しないウェブサイトを指します。一方、ユーザーの操作に応じて内容が変わるサイト(例:SNSやネットショッピングサイト)は「動的」なサイトと呼ばれます。

AWSでは、この「静的サイトホスティング」に最適なサービスがいくつかあります。今回はその中でも特に一般的な「Amazon S3 (Simple Storage Service)」と「Amazon CloudFront」という2つのサービスを中心に見ていきます。

Amazon S3: これは、インターネット上にデータを保存するための「巨大な倉庫」のようなサービスです。ウェブサイトの画像やHTMLファイル(ウェブページの設計図のようなもの)などをこのS3に保存することで、ウェブサイトとして公開することができます。

さらに、このS3は、ウェブサイトの部品だけでなく、大量のカタログ写真や商品情報PDFなど、大きなファイルを保管する場所としても非常に優れています。後で作成するGCPのホームページからは、これらのS3に保管されたファイルに直接リンクを貼ることで、ホームページ自体の容量を気にせず、豊富な情報を提供できるようになります。

Amazon CloudFront: これは、世界中に散らばっているユーザーに、ウェブサイトのコンテンツをより速く、スムーズに届けるためのサービスです。S3に保存されたコンテンツを、ユーザーに一番近い場所から配信してくれるので、サイトの表示速度が向上します。

Amazon S3 について

AWSのS3とCloudFrontがどんなものか、基本的な役割がわかったところで、次は実際にS3を使ってウェブサイトのファイルを保存する方法について、もう少し詳しく見ていきましょう。

Amazon S3を「ウェブサイトの倉庫」として使う

Amazon S3は、あなたのウェブサイトのファイル(HTML、CSS、JavaScript、画像など)を保管するための「ストレージサービス」です。例えるなら、ウェブサイトの部品をきれいに整理してしまっておく、大きな倉庫のようなものです。

S3でウェブサイトを公開する際、私たちは「バケット」と呼ばれるものを作成します。このバケットは、S3の中にある個別の「箱」や「フォルダ」のようなものです。あなたのウェブサイトのファイルは、このバケットの中にまとめて保存されます。

このバケットは、ウェブサイトのメインコンテンツだけでなく、例えばサブドメインで運用するブログのコンテンツ(HTML、画像など)や、大量のカタログ、PDF資料などを保管する「専用の倉庫」としても活用できます。つまり、GCPで作成するホームページの情報を補完し、容量や表示速度の面で負担をかけないように、S3を「分散型の倉庫」として利用するイメージです。

S3で静的サイトをホスティングする手順の概要:

  1. S3バケットの作成: まず、AWSの管理画面(「AWSマネジメントコンソール」と呼びます)にログインし、S3サービスで新しいバケットを作成します。このとき、バケットの名前は、あなたのウェブサイトのドメイン名と同じにするのが一般的です。例えば、あなたのドメインが your-site.biz なら、バケット名も your-site.biz にします。

  2. バケットの設定(公開設定): 作成したバケットに保存したファイルを、インターネット上の誰もが見られるように「公開設定」を行います。デフォルトでは、セキュリティのためにファイルは非公開になっているので、ウェブサイトとして公開するにはこの設定が必要です。

  3. ウェブサイトファイルのアップロード: あなたが作成したウェブサイトのHTMLファイルや画像などを、このS3バケットにアップロードします。これもAWSマネジメントコンソールから簡単に行うことができます。

  4. 静的ウェブサイトホスティングの有効化: S3バケットの設定で、「静的ウェブサイトホスティング」という機能を有効にします。これにより、S3があなたのバケット内のファイルをウェブサイトとして配信できるようになります。

このS3を使った方法の最大のメリットは、**非常に安価で、かつ非常に多くのアクセスにも耐えられる(スケーラブル)**点です。個人サイトであれば、ほとんどコストがかからない場合もあります。また、サーバーの管理やメンテナンスといった面倒な作業はAWSが全てやってくれるので、あなたはウェブサイトの内容作成に集中できます。

Amazon CloudFront について

S3にウェブサイトのファイルを保存できることが分かったところで、次は「Amazon CloudFront」の出番です。CloudFrontは、あなたのウェブサイトを世界中のどこからでも速く表示させるための「コンテンツ配信ネットワーク(CDN)」というサービスです。

Amazon CloudFrontを「高速道路網」として使う

想像してみてください。あなたのウェブサイトのファイルがS3という巨大な倉庫(大阪にあるとします)に保存されています。もし、アメリカのニューヨークにいる人があなたのサイトにアクセスしようとしたら、データは大阪からニューヨークまで、長い距離を移動しなければなりませんよね?これでは表示に時間がかかってしまいます。

CloudFrontは、この問題を解決してくれます。世界中にたくさんの「キャッシュサーバー」と呼ばれる中継地点(コンビニのようなイメージです)を持っています。ユーザーがあなたのサイトにアクセスすると、CloudFrontはユーザーに一番近いキャッシュサーバーからウェブサイトのデータを届けてくれるんです。

CloudFrontを使うメリット:

  • 表示速度の向上: ユーザーに近い場所からデータが配信されるので、ウェブサイトの表示が速くなります。これは、ユーザー体験の向上に直結します。

  • 負荷の軽減: 直接S3にアクセスが集中するのを防ぎ、CloudFrontがアクセスを分散してくれます。これにより、たくさんの人が同時にアクセスしてもサイトが安定して表示されます。

  • セキュリティの強化: CloudFrontには、ウェブサイトを不正なアクセスから守るための機能も備わっています。

CloudFrontとS3の連携の概要:

  1. CloudFrontディストリビューションの作成: AWSマネジメントコンソールでCloudFrontサービスを選び、「ディストリビューション」と呼ばれるものを作成します。これは、CloudFrontがウェブサイトをどのように配信するかを設定するものです。

  2. S3バケットをオリジンとして設定: ディストリビューションを作成する際に、先ほど作成したS3バケットを「オリジン」(データの元となる場所)として指定します。これで、CloudFrontはS3からウェブサイトのファイルを持ってくるようになります。

  3. 独自ドメインの設定: ここが重要なポイントです。CloudFrontディストリビューションに、あなたが取得した独自ドメイン(例: your-site.biz)を設定します。これにより、ユーザーがあなたの独自ドメインでアクセスした際に、CloudFrontがウェブサイトのコンテンツを配信するようになります。

このように、S3でファイルを保管し、CloudFrontで高速かつ安全に配信するという組み合わせは、静的サイトホスティングの非常に強力な方法です。

Amazon Route 53 について

CloudFrontがウェブサイトの高速配信を担うことは分かりましたね。では、ユーザーが your-site.biz と入力したときに、どのようにしてCloudFrontを通してあなたのサイトが表示されるようになるのでしょうか?ここで登場するのが、AWSの「Amazon Route 53 (ルートフィフティースリー)」というサービスです。

Amazon Route 53を「インターネットの電話帳管理者」として使う

以前、ドメインのところで「DNSはインターネットの電話帳」という話をしましたね。Route 53は、まさにその電話帳をAWS上で管理するためのサービスです。

あなたが取得した独自ドメイン your-site.biz は、https://www.google.com/search?q=%E6%9C%80%E5%88%9D%E3%81%AF%E3%81%8A%E5%90%8D%E5%89%8D.comやムームードメインといったドメイン登録サービスで管理されています。このドメインの管理を、Route 53に「移管」したり、「ネームサーバー」という設定を変更してRoute 53に任せることで、AWSの他のサービスとスムーズに連携できるようになります。

Route 53とCloudFront、独自ドメインの連携の概要:

  1. ホストゾーンの作成: Route 53で、あなたの独自ドメイン your-site.biz の「ホストゾーン」を作成します。これは、あなたのドメインに関するDNS情報をまとめて管理するための領域です。

  2. ネームサーバーの設定: Route 53でホストゾーンを作成すると、4つの特別なアドレス(ネームサーバーアドレス)が発行されます。これを、あなたがドメインを取得したドメイン登録サービス(お名前.comなど)の管理画面に設定します。これにより、your-site.biz のDNS管理がRoute 53に切り替わります。例えるなら、ドメインの「電話帳」の管理を、AWSのRoute 53に完全に任せるようなものです。

  3. レコードの作成: ホストゾーン内で、your-site.biz というドメインが、先ほど作成したCloudFrontディストリビューションを指すように設定します。これを「Aレコード」や「CNAMEレコード」といった形で設定します。この設定が「your-site.biz にアクセスがあったら、CloudFrontを通してサイトを表示してね」という指示になります。

この一連の作業が完了すると、インターネット上の誰もが https://your-site.biz とブラウザに入力するだけで、あなたのS3に保存され、CloudFrontによって高速に配信されるウェブサイトを見ることができるようになります。


これで、「AWSでの静的サイトホスティングと独自ドメイン設定」は一通り完了です。S3でファイルを保存し、CloudFrontで高速配信し、Route 53で独自ドメインと連携させる、という流れを紹介しました。

 

次につづくことを示すアイコン

次につづく!