AWS Hands-on for Beginners AWS上で静的なWebサイトを公開しよう！ を試してみた
AWS Hands-on for Beginners
AWS勉強中のhisacomです。
今回はAWSの中でもAmazon S3とAWS Cloud9を利用し静的なWebサイトを公開するハンズオンを試してみました。
以前試したハンズオンの内容については過去の記事でもまとめています。
「ハンズオンはじめの一歩: AWS アカウントの作り方 & IAM 基本のキ」を試してみた - お寿司エンジニアリング
AWS Hands-on for Beginners Security「アカウント作成後すぐやるセキュリティ対策」を試してみた - お寿司エンジニアリング
以前 S3 を用いて静的サイトのホスティングを試すところまでは個人で行っていたのですが、独自ドメイン取得やHTTPS化まではできていなかったので、このハンズオンを通して仕組みを学ぼうと思います。
本ハンズオンからいよいよ、サービスを提供できる内容になってきたので楽しみです。
---
以下の10ステップでハンズオンが行われます。
1. 今回のハンズオンので構築する構成の紹介 + S3 と Cloud9 の紹介
2. S3 の静的ホスティング機能を使ってみる✋
3. Cloud9 環境を立ち上げて静的コンテンツを開発する + AWS CLI で S3 にファイルアップロードする✋
4. 続・静的コンテンツの開発 + AWS CLI で S3 に複数のファイルを一括アップロードする✋
5. このあとのハンズオンの流れ + CloudFront, Route 53, ACM の紹介
6. CloudFront を使って、画像をキャッシュさせる✋
7. [Option / Demo] Route 53 で独自ドメインを取得し、S3 に HTTP アクセスする✋
8. [Option / Demo] ACM を使い、Route 53 - CloudFront - S3 で HTTPS アクセスする✋
9. 削除手順の紹介、本シリーズのまとめ、Next Step のご案内
出てくる用語の補足
S3：Amazonが提供するオブジェクトストレージサービス。単なるストレージとしてではなく設定により静的Webサーバーとして公開できたり、クエリ機能を使ってバケット内のデータ分析を行うことができます。
Cloud9：ブラウザ上でコードを実行、実行、デバッグ可能な統合開発環境。
CloudFront：CDNサービス、Webサーバーの中身をキャッシュするエッジサーバーと呼ばれるサーバーを利用して高速にコンテンツを配信します。
Route 53：DNS（ドメインネームサービス）。「https:/www.xxxxx.com/」のようなURLをIPアドレスに変換する仕組みです。Route 53 はアクセスしてもらいたいアドレスを、実際に使用している EC2 や S3 などのAWSサービスのエンドポイントに結びつけます。
S3 の静的ホスティング機能を使ってみる✋
S3 バケットを作成しindex.htmlをアップロードして、公開されたことをブラウザから確認するハンズオンです。
S3 上でバケットを作成しパブリックアクセスが可能になる設定を行います。バケットは今後独自ドメインと結びつける場合、ドメイン名と合わせる必要があるようです（ハンズオンの表示と下図の表示に差異がありますが、私が試したものは新デザインになっていました）
作成時の設定でパブリックアクセスのチェックボックスを外しただけではWeb上に公開されないので、JSON形式のバケットポリシーを設定してあげる必要があります。
バケットのエンドポイントURLをスマホで確認し全世界に公開されていることを確認できます。
Cloud9 環境を立ち上げて静的コンテンツを開発する + AWS CLI で S3 にファイルアップロードする✋
Cloud9はブラウザ上で使える統合開発環境IDEです。操作性は一般的な統合開発環境に近いので学習コストは低そうです。
ブラウザ上で開発を行えWin・Macの差異をなくしてくれることと、ライブコーディング機能があるとのことなので複数人での開発で使う機会があるかもと思いました。
下部にターミナルがあり、下記のコマンドでS3のindex.html更新が行えます。AWS CLIが最初から使えるのは便利です。
続・静的コンテンツの開発 + AWS CLI で S3 に複数のファイルを一括アップロードする✋
静的コンテンツにcss・faviconを設定しコンテンツを少しリッチにします。
下記のコマンドでカレントディレクトリにある複数ファイルを一括アップロードできます。オプションの--recursiveは再起的という意味ですね。
CloudFront を使って、画像をキャッシュさせる✋
Chrome DevToolsを使って、CloudFrontによるキャッシュが行われていることを確認します。NetworkタブのHeadersのx-cacheの項をみるとHit from cloudfrontと表示されており、コレで確認がとれるとのこと。
[Option / Demo] Route 53 で独自ドメインを取得し、S3 に HTTP アクセスする
Route 53 による独自ドメインの取得と、ネームサーバーへのレコード登録を行います。
Route 53 はAWSのDNSサービスです。
Route 53はドメインの取得も行えるため、ハンズオンではドメインの取得を行っています。私はすでに別サイトで取得したドメインを持っているので今回は視聴のみにしましたが、年間¥1000~¥2000で簡単に取得が可能のようです。
[Option / Demo] ACM を使い、Route 53 - CloudFront - S3 で HTTPS アクセスする
ACMでSSL証明書を取得して、CloudFront 上に配置するハンズオンです。リージョンをバージニア北部に変更するというのがミソだと思います。
リージョンごとの提供サービスは以下のページから確認できるようです。
ハンズオンまとめとネクストステップ
本ハンズオンを通して、独自ドメインでHTTPSアクセスができる静的ページを配置することができるようになりました。
AWSはサービスを組み合わせる関係上、かかるコストやサービス間の連携を不安に感じてしまうのですが、予想より安価で簡単な構成で静的ページを作成できることがわかりました。一度、今回の構成（CloudFront、Route 53、ACM）で自分のサイトを作成しそれも記事にしてみたいです。
