5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

S3とCloudFrontで静的ウェブサイトホスティングをしてみた

Last updated at Posted at 2020-04-17

コロナの影響で絶賛在宅勤務中のrisakoです:woman_tone1:
ずっと家にいると気持ちが落ち込んだり、運動不足気味になったりしてしまいます...
最近は、朝起きてすぐに犬の散歩に行ったり、部屋の陽のあたる場所で仕事をしてみたり試行錯誤しています笑

今日のテーマは「S3とCloudFrontで静的ウェブサイトホスティングをしてみた」です。
つまづいたところも多々あるので、自分の備忘録としても書いておこうと思います:writing_hand:

#ゴール
Cloudfront経由でS3に保存した静的ウェブサイトを独自DNSで閲覧する。

##事前に用意するもの

  • 使用したい独自のドメイン名を取得しておく。(今回は仮にhoge.gaとします)
  • S3バケットに静的ウェブサイトなど、閲覧したいものを入れておきます。(今回はtest.html閲覧することにします)

#まず初めにS3バケットの設定から

  1. 作成したS3バケットのプロパティ→Static website hostingを開く
  2. **「このバケットを使用してウェブサイトをホストする」**を選択し、インデックスドキュメント・エラードキュメントを入力する。(今回はindex.htmlとerror.htmlとしておきます。)
    スクリーンショット 2020-04-14 17.37.32.png

*ブロックパブリックアクセスが全てオフになっていないと設定できないので注意
3. バケットポリシーで、静的ウェブサイトの公開設定をする。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your-s3-bucket>/test.html/*"
        }
    ]
}

一旦S3の設定は終わりです。

#次にCloudFront設定
Cloudfrontを作成する際は、Webを選択して作成する。
最低限、変更しなくてはいけない項目を記載します。

Settings Value
Origin Domain Name 作成したS3バケットを選択
Viewer Protocol Policy Redirect HTTP to HTTPS
CNAMES 設定したいDNS(test.hoge.ga)
SSL Certificate Custom SSL Certificate(取得したhoge.gaの証明書を選択)

#Route53

  1. 事前に作成しているドメイン(hoge.ga)にサブドメインを追加します。
Settings Value
タイプ CNAME
作成したcloudfrontのDomain Name
スクリーンショット 2020-04-15 15.30.56.png

#アクセスしてみる
正常に表示されました。

スクリーンショット 2020-04-15 18.38.56.png

#最後に
一見難しそうでしたが、理解すれば「なるほど」となるものでした!
今回でウェブサイトホスティングについてはもちろんのこと、改めてS3やCloudFrontの勉強になりました。
最後までご覧いただきありがとうございました:laughing::sparkles:

#参考

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?