“AWS Hands-on for Beginners - AWS 上で静的な Web サイトを公開しよう!” 編では、Amazon S3 の静的ウェブサイトホスティング機能を用いて、簡単な Web サイトをインターネット上に公開するハンズオンを行います。このハンズオンシリーズをご視聴いただくと、HTML や CSS を用いて作成したサイト、例えば新規プロタクトのランディングページや個人のポートフォリオサイトなどを容易にホスティングすることができるようになります。
あわせて、Amazon CloudFront という CDN サービスを用いたコンテンツキャッシュ、Amazon Route 53 という DNS サービスを用いた独自ドメインの取得 & ネームサーバーへのレコード登録、AWS Certificate Manager を用いた証明書の作成 & 配置の手順についても学ぶことができます。

※本ウェビナーは2020年にレコーディングされたものです。

以下のような方へおすすめです。

  • Amazon S3 を活用した静的ウェブサイトホスティングに興味がある方


ハンズオン全体の流れ、ゴールを説明し、今回のハンズオンで構築する最終的な構成について紹介します。続けて、前半のハンズオンで利用する Amazon S3 と AWS Cloud9 の紹介を行います。また、ハンズオンで利用するファイル群は こちら からダウンロードしてください。各ファイルの使用方法については README.txt ファイルをご確認ください。

ハンズオンで利用するファイル群: https://pages.awscloud.com/rs/112-TZM-766/images/Hands-on_Files_AWS_Hands-onf-for_Beginners-Static_Web_Hosting_on_S3.zip



S3 の静的ウェブサイトホスティング機能を用いて、簡単な HTML ファイルを公開するハンズオンを進めます。(動画の中で使用する HTML ファイルについては 1)でダウンロードしたフォルダ > #2 > index.html を、S3 バケットポリシーに入力する JSON の雛形は 1)でダウンロードしたフォルダ > #2 > sample-bucket-policy.json.txt をお使いください。)




クラウドベースの統合開発環境サービスである Cloud9 を使って開発を進めていきます。冒頭で Cloud9 にアップロードする HTML ファイルは 2)で利用した index.html ファイルをそのままお使いください。




引き続き、Cloud9 上で開発を進めていきます。画像の挿入、favicon の設定、スタイルシートでの装飾を行っていきます。動画内で利用している画像は 1)でダウンロードしたフォルダ > #4 > lambda.png、favicon は 1)でダウンロードしたフォルダ > #4 > favicon.ico をお使いください。




後半のハンズオンで利用する Amazon CloudFront、Amazon Route 53、AWS Certificate Manager の紹介を行います。




CloudFront の設定を進め、画像ファイルをオリジンからではなく、CloudFront のキャッシュから取得する設定を進めていきます。




Route 53 のレジストラ機能で独自ドメインを取得していきます。その後、レコードセットに A レコードを追加し、ドメインでアクセスできるように設定します。(独自ドメインを取得する年間費用が発生するため、このハンズオンと次のハンズオンについては Option としています。実際にドメインを取得したい方は手順に従いハンズオンを進めていただき、そうでない方はデモとしてご覧ください。)




AWS Certificate Manager で SSL/TLS 証明書を作成し、CloudFront に配置します。その後、Route 53 に登録している A レコードの向き先を CloudFront 側に変更することで独自ドメインによる HTTPS アクセスを実現します。最後に、CloudFront を経由しない S3 への直アクセスを禁止する設定を追加します。




本ハンズオンで作成したリソースを削除する手順を紹介します。その後、本ハンズオンシリーズのまとめ、および次のステップにオススメなハンズオンを紹介します。






アンケート、資料ダウンロードについて

ウェビナーをご視聴いただきありがとうございます。今後に向けてのフィードバックをいただければ幸いです。
アンケートは こちら


AWS Hands-on for Beginners シリーズ

その他の動画で学べるハンズオンシリーズは こちら よりご覧いただけます



直近の AWS 主催イベント


AWS イベントスケジュール:直近の AWS 主催イベントは、こちらよりアクセスいただけます。