はじめに
AWS公式のハンズオンシリーズの中から、Amazon S3 の静的ウェブサイトホスティング機能を用いて、静的な Web サイトをインターネット上に公開するハンズオンを実施しました。
本記事は自身のハンズオン学習メモとして投稿します。
目次
ハンズオンの目的
Amazon S3 の静的ウェブサイトホスティング機能を用いて、簡単な Web サイトをインターネット上に公開するハンズオンを実施。
- S3の静的Webホスティング機能を利用して、簡単なwebサイトを作成し、公開できるようになる
- CloudFrontを用いて、コンテンツキャッシュの仕組みを学ぶ
- Route53を用いて、独自ドメインの設定方法を学ぶ
- ACMを使い、SSL/TLS証明書のプロビジョニング、管理、デプロイの方法を学ぶ
Amazon S3 の静的ウェブサイトホスティング機能を用いて、簡単な Web サイトをインターネット上に公開するハンズオンを行います。HTML や CSS を用いて作成したサイト、例えば新規プロタクトのランディングページや個人のポートフォリオサイトなどを容易にホスティングすることができるようになります。
あわせて、Amazon CloudFront という CDN サービスを用いたコンテンツキャッシュ、Amazon Route 53 という DNS サービスを用いた独自ドメインの取得 & ネームサーバーへのレコード登録、AWS Certificate Manager を用いた証明書の作成 & 配置の手順についても学ぶことができます。
(https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/?trk=aws_blog より引用)
本編
S3 の静的ホスティング機能を使ってみる
- S3作成。パブリックアクセスを許可
- バケットポリシー記述(json形式)
- プロパティの"Static website hosting"から、インデックスドキュメントにindex.htmlを設定
- index.htmlをアップロード
- エンドポイントにアクセス
Cloud9 環境を立ち上げて静的コンテンツを開発する + AWS CLI で S3 にファイルアップロードする
- Cloud9を起動
- index.htmlを編集
- CLIでindex.htmlをs3にアップロード
- 再度エンドポイントにアクセス。index.htmlが更新されている事を確認
続・静的コンテンツの開発 + AWS CLI で S3 に複数のファイルを一括アップロードする
- index.htmlを編集し、画像を表示させる
- faviconを表示させる
- CSSを使い、画像位置を調整する
- 編集したファイルを一括でS3アップロード(オプション--recursiveを使用)
- 再度エンドポイントにアクセス。index.htmlが更新されている事を確認
CloudFront を使って、画像をキャッシュさせる
- CloudFrontのDistributionを作成
- CloudFront経由でS3のindex.htmlを表示出来る事を確認
- CloudFrontにアクセスした際、デベロッパーツールのネットワークの項目に、X-Cacheの項目が追加されている事を確認
Route 53 で独自ドメインを取得し、S3 に HTTP アクセスする
- Route53でドメインを取得
- エイリアスレコードとして、S3のバケット名を登録
- エイリアスでS3にアクセス出来る事を確認
ACM を使い、Route 53 - CloudFront - S3 で HTTPS アクセスする
通信のHTTPS化
- ACMで証明書作成。(バージニア北部で作成する必要がある。)DNSで検証。(CNAMEを追加することで検証を行う)
- CloudfrontのViewer Protocol PolicyをRedirect HTTP to HTTPSに変更
- Alternate Domain Names(CNAMEs)にドメイン名を入力
- SSL Certificateの項目でCustom SSL Certificateを選択
- Route53のエイリアスレコードをCloudFrontに変更
- ブラウザでアクセス。HTTPSでの通信になっている事を確認
S3の直接アクセスを無効化
- S3への直接アクセスを無効にする(バケットポリシー削除＆ウェブサイトのホスティングを無効にする)
- CloudFrontの設定を変更
- CloudFrontのDistributionからOrigin Domain NameをS3のドメインに変更
- Restrict Bucket AccessをYesに変更
- Origin Access IdentityをCreate a New Identityに設定
- Grant Read Permissions on BucketをYesに設定
作成した AWS リソースの削除
粛々と削除。特筆すべきことはなし。
#おわりに
CloudFront、Route53、ACMを触った事がなかったので、いい経験になった。
静的なwebサイトであればS3で手軽に公開できるし、Sorryページも工数かけずに作れる事が分かった。
- CloudFrontのキャッシュの設計
- ACMの証明書の種類と細かな認証の仕組み
あたりの理解が不十分なので、今後学習していきたい。