AmazonS3とHTTPSを使用したシンプルなサイトホスティング

ひやみんな!

このチュートリアルでは、カスタムドメインを使用してAWSでHTTPSを使用して静的ウェブサイトをホストする方法を示します。これはすべて、AWS無料利用枠を使用して可能です。

ただし、これから使用するサービスには少額の料金がかかります。一般的に言って、これらは月額1ドルを超えてはなりません。

次のAWSサービスを組み合わせて使用​​します。

-S3

— route53

—証明書マネージャー

— CloudFront

入りましょう!

S3バケットをセットアップします

まず、2つのS3バケットが必要です。どちらも、カスタムドメイン名とwwwサブドメインを含む2番目のバケットと一致する必要があります。

バケット1:mywebsite.com

バケット2:www.mywebsite.com

最初のバケット(mywebsite.com)は、サイトのメインバケットです。これには、静的Webサイトのすべてのファイルとアセットが含まれます。

次に、静的サイトホスティング用にこのバケットを設定します。これはバケットの[プロパティ]タブにあります。ここで提供されているデフォルトを維持し、サイトのインデックスをindex.htmlに設定します。

また、ユーザーのブラウザがWebサイトをレンダリングするためにバケットのファイルにアクセスする必要があるため、このバケットをパブリックにアクセス可能にする必要があります。これを行うには、[権限]タブでバケットポリシーを設定します。

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "MY_BUCKET_ARN" } ]}

これは、バケット内のオブジェクトのパブリック読み取りアクセスのみを許可する単純なポリシーです。これで、バケットの静的ホスティング構成で定義されたエンドポイントに移動すると、Webサイトが表示されます。

進捗!しかし、それよりもうまくいくことができます。

2番目のバケット(www.mywebsite.com)は空のままにしますが、プロトコルとしてHTTPを使用して最初のバケットにリダイレクトするように構成します(後でHTTPSにします)。

これでバケットの準備が整いました。

Route53でドメインを設定する

したがって、Webサイトは稼働していますが、カスタムドメインではなく、バケットエンドポイントを介してのみアクセスできます。それを変えましょう。

ヘッドRoute53。ドメインをAmazonRegistrarに登録した場合は、ホストゾーンが2つのレコードセットで設定されていることがわかります。1つはネームサーバー(NS)用で、もう1つはSOA用です。

私たちがする必要があるのは、S3バケットエンドポイントを指すためにさらに2つのレコードセットを作成することです。

各レコードセットについて:

—タイプ:A —IPv4アドレス

—エイリアス:はい

—エイリアスターゲット:名前に設定したものと一致するS3ウェブサイトエンドポイント。

これで、カスタムURLに進むことができます…そしてvoilà!

もうすぐですが、最後に欠けていることが1つあります…

Note: If your domain is registered with another domain registrar (not Amazon) you’ll need to follow some different steps to set this up. Usually you’ll need to add a CNAME record with a value of the main S3 buckets endpoint.

Troubleshooting:

If you deleted the hosted zone Amazon created when you first registered the domain (I’ve done this because hosted zones do incur some charges), you’ll need to create a new hosted zone from scratch.

  1. Select “Create Hosted Zone” and set the domain name, for example “mywebsite.com”
  2. This will generate some new record sets for types NS and SOA.
  3. Go into your registered domain and update the Name Servers values to those generated in the new NS record set.

Requesting a Certificate

Awesome, the site is now hosted using the custom url! However we can only access it via HTTP protocol.

We should always ensure our sites are secured using HTTPS protocol. This protects our site and users from malicious injection attacks and guarantees authenticity.

Head to Certificate Manager in AWS Console and request a new public certificate (this is free). You’ll be prompted to enter the domain names you wish to secure.

Before the certificate can be issued, Amazon needs to be able to verify that you own the specified domains.

You can choose from two verification methods: Email or DNS.

Email is generally simpler, but you’ll need to ensure you can access the email used to register the domain. Alternatively, if you used Amazon Registrar and Route53, you can select the DNS method. This requires you to add some specific record sets to the hosted zone, but this is mostly automated for you so it’s quite simple.

It can take a few minutes for the certificate to be issued after validation.

When its all done we can continue to the final step!

Configuring CloudFront

For the final step we are going to use CloudFront which allows us to use the new SSL certificate to serve the website with HTTPS. CloudFront also speeds up the distribution of web content by storing it at multiple edge locations and delivering from the closest edge location to a user.

We need two new web distributions, one for each S3 bucket. Head to CloudFront in the AWS Console and create the first web distribution.

There are lots of settings available to create a web distribution, but for the basics we only need to change five:

  1. Origin Domain Name: Set this to the S3 website endpoint for one of the buckets. Important: This field will give you some auto-complete options with your S3 bucket names. However, using these can cause issues with redirecting to the bucket endpoint. So instead use the bucket endpoint directly.
  2. Origin Id: This populated for you when you enter Origin Domain Name.
  3. Viewer Protocol Policy: Set to “Redirect HTTP to HTTPS”.
  4. Alternate Domain Names: This should match the name of the S3 bucket you’re pointing to. For example “mywebsite.com”.
  5. SSL Certificate: Select “Custom SSL Certificate” and select your new certificate from the dropdown.

Do this again for the second S3 bucket.

The distributions can take a while to spin up, so while we wait, let’s do the finishing steps.

Back in S3, go to your secondary bucket (www.mywebsite.com), in the Properties tab and under Static Website Hosting set the redirect protocol to HTTPS.

Finally, head back to Route53. We need to update the custom A records we created to now target the CloudFront distributions rather than the S3 buckets. For each record, change the Alias Target and select the CloudFront distribution available in the dropdown.

Note: Again, if you are using another DNS service you’ll need to go update the CNAME record from there to point to the CloudFront domain name.

And there you have it! Your beautiful website is now available at the custom domain and served with HTTPS!

Thanks for reading! I hope this guide was useful and enjoyable, I’d love to know if you found it helpful.