サーバレスな静的ウェブサイトをイチから作ってみた。その①

ごあいさつ

こんばんは。
最近サーバレスにハマっているもに倉です。

今回は、AWSでサーバレスなWebサイトを作ってみようと思います。

構成図

使うもの

S3
Lambda
API Gateway（Lambda呼び出し用）
↑こないだ作った感想フォームを使うサイトにします
CloudFront
Route53
AWS Certificate Manager

やりたいこと

①S3をオリジンとしたCloudFrontに独自ドメインをつける
②SSL証明書もつける
③とどめにbasic認証もつける

確認したいこと

S3で静的Webサイトをホスティングする際の動作
CloudFrontを介しても問題なくWebサイトが動作するか
basic認証は正しく機能しているか

その①では

S3
Lambda
API Gateway（Lambda呼び出し用）
CloudFront　←ここまでやっていきます！

コンテンツ(S3)の準備

ローカルにて

それではまず、サイトを作っていきましょう！

というわけで、こんなかんじで作ってみました。

前述の通り、感想フォームが置いてある(だけの)サイトです。

これで、念のためS3の静的Webサイトホスティングで

別フォルダにあるCSSが効くのか
別フォルダにある画像を持ってこれるのか
別フォルダにあるJSが使えるのか
別ページに飛べるのか

も確認していきましょう！（できないと困る！）

S3にて

バケットにコンテンツ設置

まず、先ほど作ったブログ用の諸々をS3のバケットに設置します。

公開範囲設定

続いて、公開範囲を設定します。
今回は自分しか見ないので、バケットポリシーにて
自分のIPからだけを許可しました。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1551163442413",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "S3のARN",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": "IPアドレス"
                }
            }
        },
        {
            "Sid": "Stmt1551164678580",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "S3のARN",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "IPアドレス"
                }
            }
        }
    ]
}