山pの楽しいお勉強生活

勉強の成果を垂れ流していきます

S3で静的ファイルのホスティングしてIP制御

経緯

静的なHTMLをお客さんに見せる事になり、ローカルPCで見せてもいいけど、どうせならどこかにホスティングして置いといた方がいいよね。って事でS3に置いたらIP制御でハマったのでメモ。

※ハマったというか、エンドポイントではなくて直接ファイルにアクセスしてたのでうまくいかなかっただけ。。。

手順

  1. S3にバケット作る
  2. バケットのプロパティ → Static website hosting → 「このバケットを使用してウェブサイトをホストする」 → 保存
    • エンドポイントのURLをメモ
    • http://bucket-name.s3-website-ap-northeast-1.amazonaws.com
  3. 2で設定したインデックスドキュメント(デフォルトはindex.html)を置く
  4. エンドポイントにブラウザでアクセスして、index.htmlが表示されることを確認。
  5. バケット → アクセス権限 → バケットポリシー
    • 以下のように記載(うまくいかない場合は、ポリシージェネレーターで作成)

バケットポリシーエディタ

{
    "Version": "xxxxxxxxxxxxx",
    "Id": "xxxxxxxxxxxx",
    "Statement": [
        {
            "Sid": "xxxxxxxxxxxxx",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::bucket-name/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "198.51.100.0",
                        "192.0.2.0"
                    ]
                }
            }
        }
    ]
}
  • 各「xxxx」的な所と、Resourceの「バケット名」、aws:SourceIpの「IP」は適当な値に変更する。

確認

  • 自分のIPのみを設定して表示されることを確認。
  • 他のIP(スマホからなど)で表示されないことを確認。
  • ↑と同じく、直接ファイルのリンクにアクセスして、表示される、されない事を確認。