This will save your hours of headache
This tutorial was inspired by my hair-pulling, frustrating, expensive and confusing experience with Namecheap and AWS Integration. I won’t bash Namecheap because their customer service is actually really good, but their product is quite buggy. Anyways, I’m hoping this will save you lots of time and money, so enjoy!
P.S. This was copied from my private github repo’s README.md file. This method was used in the deployment of renthero.ca.
The #1 Best Way To Deploy a Website
Fulfilling the following requirements:
1. No EC2 server cost. Deployed for cents, not dollars.
2. Distributed across a global CDN. Very fast loading times.
3. Free and verified SSL certificate for HTTPS
4. Free and unlimited subdomains on HTTPS
Recommended Process
There are 2 methods this tutorial will cover. Full AWS and AWS + Namecheap. It is highly recommended that you use the Full AWS method as it has the following:
- Benefit: Integration into the AWS ecosystem
- Benefit: The AWS SSL certificate is free and easy to set-up (versus Namecheap which may cost >$100 and require a letter from your lawyer or certified public accountant to verify that you run a legitimate business, taking 5–10 business days)
- Benefit: The AWS CloudFront method allows you to create infinite subdomains (eg. mobile.mywebsite.com, settings.mywebsite.com). However, they must be manually added and are not dynamically generated (eg. usernameA.mywebsite.com). With Namecheap you will have to buy a multi-domain SSL certificate, which costs upwards of $250
- Downside: The AWS domain costs ~$12 versus the Namecheap name which could be as cheap at $0.99
- Downside: The AWS SSL certificate only works on a CloudFront distribution whereas the Namecheap SSL can be used on a EC2 container (allowing your servers to use HTTPS. However, this can be substituted with a free SSL certificate from LetsEncrypt and uploaded to AWS Certificate Manager)
Steps A — Initial Domain Setup (Full AWS)
1. Go to AWS Route 53 and buy a domain name (eg. mywebsite.com)
2. Go back AWS Route 53 and create a new hosted zone for your domain. That’s it for now.
Steps A — Initial Domain Setup (AWS + Namecheap)
1. Go to Namecheap and buy a domain name (not recommended, use Full AWS) (eg. mywebsite.com)
2. Go to the management console for that domain name and change the nameserver from “Namecheap Basic DNS” to “Custom DNS”
3. Go to AWS Route 53 and create a new hosted zone for your domain
4. Click the automatically created NS record and copy the 4 addresses in the value field
5. Go back to the Namecheap management console and add each of the 4 addresses from AWS. Save and refresh page (might take a few hours to reflect changes)
Steps B — S3 Hosting (Same for both methods)
1. Go to S3 and create a new S3 bucket with the name exactly as your domain (eg. mywebsite.com). If you want a subdomain, then it the S3 bucket name should be exactly the subdomain route `www.mywebsite.com`
2. In the Permission Tab, click “Bucket Policy” and paste in the following (with your S3 bucket name):
`
{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::mywebsite.com/*”
}
]
}
`
3. Now go to the “Properties” tab and click “Static website hosting” and check “Use this bucket to host a website”. Set the index document as “index.html”. Copy the endpoint url (eg. http://www.mywebsite.com.s3-website-us-east-1.amazonaws.com)
4. Now upload your index.html and bundle.js files from your websites /dist folder (after $ npm run build)
5. Go to the endpoint url from Step B3 (eg. http://www.mywebsite.com.s3-website-us-east-1.amazonaws.com)
6. It should load your website on http
Steps C — SSL (Full AWS)
1. This process is much easier on AWS. Go to AWS Certificate Manager and create a new SSL certificate (its free!)
2. Register the SSL cerficate for your domain (eg. mywebsite.com) and set the domains to be `mywebsite.com` AND `*.mywebsite.com`, which will give you infinite subdomains
3. Verify that you own the domain using email. Check the email that the verification link was sent to (most likely your AWS account email)
4. Open the email link and click “Verify Domain”. Your domain has been verified
5. Check that the domain SSL was verified on AWS Certificate Manager
Steps C — SSL (AWS + Namecheap)
1. Purchase a new SSL certificate from Namecheap. You may have already gotten one for free from purchasing the domain.
2. Activate the SSL certificate by running the command `$ npm install -g openssl` and then `$ openssl req -nodes -newkey rsa:2048 -keyout mywebsite.key -out mywebsite.csr`. Be sure to enter your domain address when it asks for it, as Namecheap will throw a vague error if you don’t.
3. Once the files have been created, enter `$ cat mywebsite.csr` and copy the text
4. Go to Namecheap “Product List” and select your SSL certificate. Paste the text from the previous Step C3 and click next
5. You will have to verify that you own the domain. It is recommended that you use email as the DNS method takes time to propagate.
6. Once you verify from email, you will be sent another email with the actual SSL certificates. Open it up and download them.
7. Go to AWS Certificate Manager and upload your own SSL certificate.
Steps D — CloudFront Distribution (Same for both methods)
1. Go to AWS Cloudfront and create a new CloudFront distribution
2. Set the “Origin Domain Name” as your S3 bucket endpoint (copy the endpoint from S3, do not use the dropdown. Be sure to omit the http://)
3. Set the “Viewer Protocol Policy” to “Redirect HTTP to HTTPS”
4. Set the “Object Caching” as “Customize”, with “Default TTL” to 10 seconds. Leave the min and max time as is.
5. Be sure to check “Compress Objects Automatically”
6. Set “Alternate Domain Names (CNAMEs)” to your domain name mywebsite.ca.
7. Set “SSL Certificate” to “Custom SSL Certificate” and select your SSL from the dropdown menu (ie. Those created in AWS Certificate Manager)
8. Set the “Default Root Object” to “index.html”
9. Now click “Create Distribution”
10. While the CloudFront Distribution is being made, click the “ID” (link in blue) and go to the “Error Pages” tab. Click “Create Custom Error Response” and set the “HTTP Error Code” to “404 Not Found”. Set the “Error Caching Minimum TTL” to 10 seconds. Finally select “Yes” on “Customize Error Response” and the “Response Page Path” to “/index.html” and the “HTTP Response Code” to “202: OK”. Then click “Create”. This will allow single page apps to load on any page (eg. mywebsite.com/about). Normally it would result in a 404 Error when hosted on S3, but this allows us to get expected functionality.
11. Go back the list of AWS Cloudfront distributions and copy the domain url of your distribution under “Domain Name”
Steps E — Final DNS Setup
1. We’re almost done, go to AWS Route 53 and select your domain. Add a new record set with name blank, type “A-IPv4 address”, Alias to “Yes”. Set the Alias Target to the url of your CloudFront distribution from Step D11. Then click create.
2. At this point if you want to add subdomains, you will need to repeat Steps B, D and E for each subdomain
3. After a few minutes, you should be able to go to mywebsite.com and see your website live at your domain, with HTTPS, and loaded very very fast. Congratulations! You now have a website set up in the best possible way :)
