Creating a secure Website is essential for any business. If you happen to be a software business or are tech savvy, you are probably looking for a cost-effective way of creating a static Website and maintaining it yourself. This blog post shows you how to achieve this using three Amazon services: S3 (Cloud storage), CloudFront (CDN), and AWS Certificate Manager (ACM).
This article assumes that you have already created an account on Amazon AWS. If not, please visit https://aws.amazon.com and create an account for yourself.
Log into your account on AWS and go to S3 service. Click on the "Create Bucket" button to start creation of a bucket for your Website files. Enter the domain of your website as the bucket name on the first screen. For example, the name of the bucket for Nabh's Website is www.nabh.com. Enter next and accept defaults on the next screen. Choose to make your bucket public on the Set Permissions screen as shown in the figure below.
After creating folders and uploading files, come back to the S3 home screen and click on the bucket. On the bucket page, click on Properties tab and click on Static website hosting card. Choose the Use this bucket to host a website> option. Enter index.html in the Index document field, optionally enter the HTML file name for showing page not found errors in Error document field.
You can now test your Website by typing the Endpoint URL shown on the top of the dialog box. Note that the URL in the picture below is for Nabh's Website, the URL will be something different in your case.
You will need a SSL certificate for your domain in order to serve the Website securely, i.e. over https protocol. You can create one using Amazon Certificate Manager. Go the Certificate Manager service from the AWS console. Make sure to choose US East (N. Virginia) region. You can select the region using the region dropdown on the top right. Don't ask us why but you must select this region in order for you to use the certificate for your Website.
Click on Request a certificate button to start the certificate generation process. Choose Request a public certificate option. Enter your domain name on the next screen. If you want to use the same certificate on multiple subdomains on your Website, click on Add another name to this certificate button and provide additional domains (e.g. yourdomain.com, dev.yourdomain.com, etc.)
Choose DNS validation option on the Select validation method. We prefer this option since the certificate does not require manual renewal. Choosing this option will require you to create a CNAME record for your domain as shown on the screen below. As long as the CNAME records exist, your certificate will be automatically renewed.
Method of creating a CNAME record will vary depending on your domain registrar. Please check their documentation for the relevant details. Also you may have to be a little patient to see your certificate in action. It will take some time to see the process completed status on the Certificate Manager page. We also had to wait a couple of hours to be able to select the certificate when we set up the CloudFront distribution.
In this step you will be creating a CDN distribution that points to the files uploaded on S3. You can start creating a distribution by clicking on the "Create Distribution" button. You want to create a Web distribution, so click on the Get Started button in that section. You will see a form that has a lot of input fields but you can accept the defaults except the following fields:
The reason for selecting a custom origin, as opposed to S3 origin from the dropdown, is that it will return index.html file in a sub-folder when the user requests a folder. For example, you may have an index.html file that lists your products in products folder. When a user types in https://www.yourdomain.com/products, the user will see an error message if you point your distribution to S3 origin. If you use the Web origin, it will return the index.html file as expected.
At this point you are done with all your setup on AWS. You should see your distribution listed on CloudFront home screen as shown in the snapshot below. If the status is Completed, you can type the URL shown in the Domain name column in your browser and should be able to see your Website.
In the last step you could access your Website via CloudFront URL but off course that is not the final result you want. You want to view your Website on your custom domain. This requires creating a CNAME record that points the custom domain to the CloudFront domain. This step will vary depending on your domain registrar. The snapshot below shows how we set it up for our Website. It requires providing the CloudFront domain name as the value of the CNAME field. Note that your registrant may require you to append a . to the domain name.
By now you should be all set to serve your secure Website on your custom domain. We want to bring a few points in this final section. The first one is making your Website accessible via the root domain, e.g. yourdomain.com, as well as www.yourdomain.com. There are a few different ways of doing this. Our preference is to set up a redirection with your DNS provider from the root domain to www subdomain. You can also do this using CloudFront and S3, we will leave that as an exercise for the reader.
When you create a certificate, you can optionally include other subdomains. This will allow you to use the same certificate on a different Website that corresponds to those subdomains.
When you update files on S3, you will have to invalidate those paths on CloudFront if you want to immediately see the new pages in your browser. Here we are assuming the caching period in CloudFront is reasonably long. CloudFront allows you invalidate selected paths using the console. It is also important to make sure you keep all files and folders publicly accessible when you update the content.