経緯
静的なHTMLをお客さんに見せる事になり、ローカルPCで見せてもいいけど、どうせならどこかにホスティングして置いといた方がいいよね。って事でS3に置いたらIP制御でハマったのでメモ。
※ハマったというか、エンドポイントではなくて直接ファイルにアクセスしてたのでうまくいかなかっただけ。。。
手順
- S3にバケット作る
- バケットのプロパティ → Static website hosting → 「このバケットを使用してウェブサイトをホストする」 → 保存
- エンドポイントのURLをメモ
http://bucket-name.s3-website-ap-northeast-1.amazonaws.com
- 2で設定したインデックスドキュメント(デフォルトはindex.html)を置く
- エンドポイントにブラウザでアクセスして、index.htmlが表示されることを確認。
- バケット → アクセス権限 → バケットポリシー
- 以下のように記載(うまくいかない場合は、ポリシージェネレーターで作成)
バケットポリシーエディタ
{ "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" ] } } } ] }
確認
- 自分のIPのみを設定して表示されることを確認。
- 他のIP(スマホからなど)で表示されないことを確認。
- ↑と同じく、直接ファイルのリンクにアクセスして、表示される、されない事を確認。