How to setup AWS Lightsail server, and build your own website
Setting up AWS and Lightsail instance
Introduction
This is the first article and step in a 4 steps walkthrough to help anyone who would like to learn to build a website from scratch without bundled tools and website templates such as Squarespace, Wix and etc. The 4 parts are broken down as the following:
- Registering a domain name with Google Domains.
- Server hosting with AWS Lightsail.
- Coding your website in ReactJs.
- Installing your ReactJS app on the server and configuring Lightsail.
This is broken down into 4 parts to keep each article short and separate, and so that anyone who may have issue with 1 part, may just read through that particular article.
With the introduction out of the way, let’s get started.
What we’ll cover in this part
We’ll be covering the AWS and Lightsail service setup in this part. We’ll go through the basics of setting up your AWS account to help those who have never done it before, and creating our Lightsail instance, but stop short of any configuration settings that are done directly on the server.
Quick introduction on AWS
Amazon Web Services or more commonly known as AWS is the industry leading cloud computing service. Its competitors include Google’s Google Cloud Platform, Mircrosoft Azure and others. Cloud computing allows people or organizations to do a variety of computing tasks very quickly without buying and setting up their own physical servers and hardware.
By the end of it, you will have an AWS account and a running Lightsail instance with a staticIP that your domain name is pointing to.
AWS Lightsail
I’ve chosen AWS Lightsail because firstly AWS is the most widely used cloud computing service in the industry, and thus most likely to be relevant to potential employers.
And I’ve chosen Lightsail instead of the common EC2 because we’re only building a simple personal website that is purely frontend, and Lightsail is easier to configure for this requirement than EC2. If you’re however building a more complex app or website, you may want to explore the other services within AWS.
Steps to setting up your Lightsail server
Create AWS account
Head to AWS and click on “Create an AWS Account”. You are creating a root user account here. Fill in your email address, and choose an AWS account name and click on “Verify email address”.
Once you’ve verified your email address, you can fill in your Contact Information. You may choose either Business or Personal account. There’s no functional difference and if you want to be safe, you can always choose Personal first and change it to Business in the future.
You’ll need to fill in your billing information as even though we’ll be using AWS free tiers for the first few months, AWS will need payment details so that they can charge for any other chargeable services.
Continue through the rest of the steps, and once completed, sign into aws as root user with the credentials that you’ve entered previously.
Here’s a youtube video that better walks you through the entire sign up flow: https://www.youtube.com/watch?v=P7hVdusJF7I
Setup IAM
Next, we want to setup your IAM to create a separate IAM user to access your AWS account. This is for security reasons as the Root User has special previliges and access such as Closing your AWS account, Changing your account settings and etc, and it is recommended to use an IAM account with admin access on a daily basis instead of potentially exposing the root user credentials.
To do this, once you’ve logged into AWS, click on the search bar at the top of the page and search for “IAM”, and click on IAM.
Once you’re in the IAM service page, click on User groups on the left-hand panel, and create a new user group by clicking on the “Create group” button on the “User groups” page.
Enter a User group name such as “Admin”, and ignore adding users to the group for now. Then you want to attach a couple of admin permissions policies to this groups so that users within it will have access to these attached admin permissions. The 2 key permissions you would want here are Billing and Administrator.
Once you’ve selected these 2 policies, go ahead and create your user group.
Next, let’s create a user and add it to the user group so that we can log in as this user when we need to access AWS, and have access to the above permissions.
Click on the “Users” tab on the left-hand panel, then click on “Add users”. Enter a name for your admin user such as “xxx-admin”, then select the Password option for the credential type. Then click on “Next: Permissions” to go to the next page. The default option should be to “Add user to group”, and you may select your “Admin” group here, before proceeding to the next step. You do not need tags for now, and you may review and create your IAM admin user.
Billing access for your IAM admin user
Before we log out of the root user and start using our IAM admin user, we need to grant IAM Access to Billing and Cost Management console, else, we can’t set our budget in the next step with our Admin user. To do this, click on your root user name at the top right corner, and select “Account” from the drop down menu. This will bring you to the My Account page. Then scroll down till you find the “IAM User and Role Access to Billing Information” section, and activate it. It should look like this after you activate it.
Start using our IAM admin user
And lastly, before we log out, do copy the Account ID of the account. You can find this by clicking clicking on your root user name on the top right corner. It should be a 12 digit number.
I would advise you to copy and paste this ID in your local computer as you’ll need it to log into your IAM user, and it may not be saved in your browser.
Once you’ve copied the Account ID, logout of your root user and log back into AWS, but select Sign in as “IAM user”. Then enter the Account ID, the IAM user name and Password.
Set up our budget
In this exercise, we’ll be using AWS’s free tier resources, and Lightsail has a 3 month free tier. And if you only signed up for Lightsail, there shouldn’t be any cost. But to be safe, and as a best practice, let’s set up a budget so that we’re notified when we’re spending any amount in AWS, and we don’t unexpectedly end up with a huge bill because of a mistake.
To do this, use the AWS search bar and search for “AWS Budget”. Once you’re on the budget page, click on “Create budget” button, and select the “Zero spend budget” Template and click on the “Create budget” button at the bottom.
Done, now we don’t have to worry about unknowingly racking up a huge AWS bill.
AWS Lightsail!
Now we’re ready to setup our AWS Lightsail service.
As usual, use the AWS search to search for “Lightsail”. You should see an empty page, and on the “Instaces” header.
Go ahead and click on “Create instance”
In the next page, you can change the instance location, and you would want to select the region that is closest to your target audience to improve page loading times.
Then select “Linux/Unix” platform, and also “OS Only” blueprint, as we want to setup everything from scratch and build our website with ReactJs instead of WordPress. To follow my example exactly, select Ubuntu 20.04 LTS from the OS option.
There’s no need to add a launch script, and we can use the default SSH key.
Then you would want to select the $5USD option. The reason for this is because it has 1GB of ram, which allows NPM install to work smoothly instead of crashing, and this is critical for building and running our ReactJs website. It is possible to work around the ram limitation, but there are additional steps and complexity to do so, so we’ll just pay $1.5 more to avoid this problem.
You may keep the default instance name given by AWS, then you may click on “Create instance”. Once you do that, you should see a new instance on your Lightsail dashboard.
Create and attach a static IP to your Lightsail instance
A static IP is a fixed, public IP address that you can assign and reassign to your instances.. This is critical as the Lightsail instance may restart on it’s own due to issues, or if AWS has an outage. In such cases, if you did not attach a static IP to the instance, AWS will assign a new IP address to your instance, then you would also have to re-configure your Domain DNS to point to the new IP address whenever this happens.
To do this, click on the “Networking” tab within the Lightsail dashboard, and click on “Create static IP”.
Make sure to select the region that is the same as your Lightsail instance so that you can attach your Static IP to it. A static IP is free if it’s attached to an instance, and AWS only charges if there are unused static IP. So do attach it immediately.
Pointing your domain name to your static IP
This is the last step for this part. We want to point our domain name to our static IP so that when people enters “yourname.com”, google domain’s dns will direct them to your Lightsail IP address and your server can display the webpage that we’ll create in the next article.
To do this, we need to head back to Google Domains. Select your domain name. And on the domain setting page, select “DNS” from the left-hand panel
Then under the Custom records section, you want to click on “Manage custom records”, and input the following
Host name | Type | TTL | Data
<blank> | A | 60 | {static IP}
* | A | 60 | {static IP}The above is representative of 2 records. One with a <blank> value under the “Host name” field, and the other with a “*” value. While under “Data”, we need to input our static IP address there. These settings tells Google Domain to redirect any request to yourname.com and any prefix such as “www”, “http://” or “https://” to the Lightsail instance’s static IP.
Once this is done, you may have to wait a couple of hours for the changes to take effect, then when you type in yourdomainname.com, Google DNS will actually direct you to your Lightsail instance. It will still show an error now, but once we install certain programs on our Lightsail server, that will quickly change.
That’s it for setting up your AWS account and Lightsail instance. We’ll come back to the Lightsail instance in part 4 when we start deploying our react app on it, and making it work and accessible to the internet.
Next steps
We’re now ready to start building our react app in part 3!
Here are the links to the rest of the parts:
Part 1: Register your Google Domain
Part 3: Create your React app
Part 4: Deploy your React app and configure your Lightsail instance
If you have any questions, please feel free to drop a comment in the story, and I’ll do my best to help you answer them. Thank you!
Let’s stay connected. Follow me on Medium if you like this article. You may also view my website at yuhaocooper.com to view my result of building my own website using the above steps.
