How to Host a Static App on AWS S3 and Link a Custom Domain
During this article, we will host a simple React app on AWS S3 and then use AWS Route53 to link our custom domain.
There are many steps included but it’s totally worth it. So let’s get started!
Prerequisites
- Knowing what static hosting is.
- Basic understanding of AWS S3 and Route53.
- AWS account and your app domain name on Route53 if you’re going to follow along.
Creating the React app
Since we’re gonna work on a react app, obviously we need to create one. So let’s quickly do that by running npx create-react-app awsapp and here I am assuming you have node installed.
We won’t actually change the default content of the app, since it’s not a react dev article.
After that we need to generate the static files which will be actually hosted, running npm run build inside the app directory will do the work.
Hosting on S3
Let’s now create an S3 bucket, I’m gonna use www.awsapp.com but you need to include your own domain. Just make sure you include www and leave the rest as it is and click Create bucket.
Now that our bucket is created, we can upload all the content of the build directory into it. To do so, in the Objects tab, we hit Upload , select all directory content and Upload again.
By default, AWS blocks public access to the bucket so we need to disable that by going to Permissions tab and then Block public access section,edit, uncheck Bloc all public access, Save changes and confirm.
Under the Bloc all public access section there is Bucket policy which we need to edit by adding the policy below. Don’t forget to change Bucket-Name with the name of your bucket then save the changes.
Now, we’re going to enable static web hosting on the bucket in the Properties tab, we scroll all the way down to Static website hosting section and click Edit then fill the form like so and leave the rest blank:
Now, if you go back to Static website hosting section you’ll find the app’s public URL. Here you go, your website is live 💪.
Linking your own domain
Until now, if we try to access our website awsapp.com on the browser, we still can’t access it because we need to do extra steps. The first step will be creating a redirection from awsapp.com to www.awsapp.com . To do that, we’ll create another bucket with the name awsapp.com and then go to Properties ,Static website hosting then fill the form like so:
From now on, I’m gonna assume that you have a domain name within AWS Route53, you still can do the same if you registered your domain from elsewhere but I am not gonna cover that.
Let’s go to Route53 Dashboard, Hosted zone and select our domain and now we need to create two new records, one for awsapp.com and the other for www.awsapp.com . Click Create record , choose Simple routing and click Define simple record and we have to fill another form:
Of course, if your bucket exists in another region, choose that one. Now we click onDefine simple record and yes, another form:
Finally, hit Create records .
Keep in mind that these configurations may take some time to work, so let’s wait for at least 60 seconds and then we go on the browser and visit awsapp.com . We can see that we got redirected to www.awsapp.com . That’s awesome, it works as intended.
That’s it for now, If you have any question please leave a comment.
Hope you enjoyed reading and found this useful. See you soon! ✌️
More content at plainenglish.io
