以下の9ステップで
知識を習得しましょう




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

Note: 必要な方は本ページをブックマークしてください。



01

今回のハンズオンので構築する構成の紹介 + S3 と Cloud9 の紹介

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

02

S3 の静的ホスティング機能を使ってみる

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

03

Cloud9 環境を立ち上げて静的コンテンツを開発する + AWS CLI で S3 にファイルアップロードする

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

04

続・静的コンテンツの開発 + AWS CLI で S3 に複数のファイルを一括アップロードする

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

05

このあとのハンズオンの流れ + CloudFront, Route 53, ACM の紹介

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

06

CloudFront を使って、画像をキャッシュさせる

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

07

[Option / Demo] Route 53 で独自ドメインを取得し、S3 に HTTP アクセスする

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

08

[Option / Demo] ACM を使い、Route 53 - CloudFront - S3 で HTTPS アクセスする

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

09

削除手順の紹介、本シリーズのまとめ、Next Step のご案内

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

10

作成したリソースの削除

最後に、今回のハンズオンで作成したリソースを削除します。

アンケートおよび資料ダウンロードについて

ウェビナーをご視聴いただきありがとうございます。動画内で使用した資料については、左記リンクよりアンケートにご回答いただくことでダウンロード可能です。また、今後のブラッシュアップのためにご意見・ご要望いただけますと幸いです。

Your next move

Contact us to talk to the AWS team about cloud security.

Subscribe to our security email series and get more information on cloud security straight to your inbox.

To find out how AWS provides customers with robust controls to maintain security and data protection in the cloud, check out our Cloud Security page.