dcurt.is
How to host a static website with HTTPS on AWS, using S3 and CloudFront
#HTE
Amazon’s AWS is an inexpensive and limitlessly scalable platform that can be ideal for hosting fast, secure, and reliable static websites. I host several sites using the method described below, and it costs me pennies per month. The only problem is that getting things set up–especially with HTTPS support–isn’t exactly straightforward.
Summary #
- We’ll create and configure two S3 buckets. One will serve static content via S3. The other will be used simply to redirect
www.yourdomain.com
to yourdomain.com
. - We’ll create an SSL certificate using AWS Certificate Manager.
- We’ll set up two CloudFront distributions which will use the S3 buckets as origins. (The website itself will be served through CloudFront’s edge locations, but the files will be stored on S3.)
- We’ll set up DNS alias records which point to CloudFront, using Route 53.
- Create two buckets in S3. It doesn’t matter what they’re named, but one will be used to hold your content and the other will remain empty – I suggest
yourdomain-static
and yourdomain-www
. (Note: Amazon suggests naming the buckets yourdomain.com
and www.yourdomain.com
, but there are downsides to this naming approach.1 ) Be sure to uncheck the boxes for “Block new public ACLs…”, “Remove public access granted…”, “Block new public bucket policies”, and “Block public and cross-account access…”. - In the S3 console, select the
-static
bucket, click properties, and then turn on “Static website hosting”. Select “Use this bucket to host a website”. Make the “Index document” index.html and the “Error document” error.html. Then click Save. - Select the ‘-www’ bucket, click properties, and turn on “Static website hosting”. Select “Redirect requests”. Enter
yourdomain.com
as the “Target bucket or domain”. Set “Protocol” to https
. Then click Save. - Make note of the
endpoint
URLs displayed for each bucket in the “Static website hosting” properties panel. (Endpoint URLs look like http://yourbucketname.s3-website-us-east-1.amazonaws.com
.)
If you don’t already have a certificate issued for your domain with ACM, go to the AWS Certificate Manager in the AWS Console.
- Click “Request a certificate” (don’t worry–it’s free).
- Create two entries under “Add domain names”:
yourdomain.com
and *.yourdomain.com
. - Choose the validation method that works for you (but you should almost certainly use DNS validation), then request the certificate. It may take an hour or more for your certificate to be issued and available.
You’ll have to wait until your certificate is issued before continuing.
- Create two CloudFront distributions. Click “Create Distribution” in the CloudFront console. Then click “Get Started” under “Web”.
- For the first distribution, use the following settings:
- Origin Domain Name: The S3 website endpoint url for your
-static
bucket. (Note: Amazon will try to help you autocomplete, but ignore its suggestion. Use the S3 website endpoint URL instead). - Viewer Protocol Policy:
Redirect HTTP to HTTPS
. - Compress Objects Automatically:
yes
. - Alternate Domain Names:
yourdomain.com
- SSL Certificate: Choose “Custom SSL Certificate” and then select your ACM certificate from the dropdown.
- Default Root Object: blank
- Click “Create Distribution”.
- For the second distribution, use the following settings:
- Origin Domain Name: The S3 website endpoint url for your
-www
bucket. (Note: Amazon will try to help you autocomplete, but ignore its suggestion. Use the S3 website endpoint URL instead). - Viewer Protocol Policy:
Redirect HTTP to HTTPS
. - Compress Objects Automatically:
yes
. - Alternate Domain Names:
www.yourdomain.com
- SSL Certificate: Choose “Custom SSL Certificate” and then select your ACM certificate from the dropdown.
- Default Root Object: blank
- Click “Create Distribution”.
- Make note of the CloudFront
Domain Name
for each distribution. It may take a few minutes for the domain names to become visible in the CloudFront console. (CloudFront Domain Names look like d1tj8z7yt99sdx.cloudfront.net
.) It may take up to an hour for the CloudFront distribution to actually start working.
- Go to the Route 53 section of the AWS console. Click “Hosted Zones”. Click on your domain.
- Delete any A-records listed for
yourdomain.com.
and www.yourdomain.com.
. - Create a new A-record by clicking “Create Record Set”. Use the following settings:
- Name: blank
- Type:
A - IPv4 address
- Alias:
yes
- Alias Target: The CloudFront
Domain Name
of the distribution that points to your -static
bucket. (In the dropdown, make sure you select from the list of “CloudFront distributions” and not from “S3 website endpoints”.) - Click “Create”
- Create a new A-record by clicking “Create Record Set”. Use the following settings:
- Name:
www
- Type:
A - IPv4 address
- Alias:
yes
- Alias Target: The CloudFront
Domain Name
of the distribution that points to your -www
bucket. (In the dropdown, make sure you select from the list of “CloudFront distributions” and not from “S3 website endpoints”.) - Click “Create”
Done #
It may take a while for the CloudFront distributions to activate and the DNS settings to propagate. Assuming everything is set up properly, you’ll be able to store arbitrary files in the bucket yourdomain-static
and they will be available at https://yourdomain.com
. Visitors to http(s)://www.yourdomain.com
will be redirected to https://yourdomain.com
.
If you make edits or changes to the files in yourdomain-static
, you will need to invalidate the cached objects on CloudFront. To do this, go to the CloudFront console, click on your distribution, then click the “Invalidations” tab. Click “Create Invalidation” and either enter the paths to the files you changed or just “*”, which will invalidate everything. Click “Invalidate”.
https://dcurt.is/how-to-host-a-static-website-on-aws-with-https
5 years ago