The Ultimate Guide for Quickly Launching Websites Using AWS & Namecheap

In this article, I will show you a step-by-step guide on how you can quickly and cheaply launch your website using AWS & Namecheap. In the examples, I will be using a ReactJS project, but the website could be built using any framework.

Abstract vector created by vectorjuice — www.freepik.com

Static Web Page

If you are building a static web page, and have no intention of extending its functionality, you will be better off using a simpler hosting solution such as GitHub Pages. In there, you can drop your static build into the repository and it would be accessible.

Complex Websites

If you are building anything more complex than a static web page, this guide is for you.

I have used this guide for countless times to launch prototype websites, so I hope it will be helpful for you.

1. Build your application

If you want to get started with ReactJS, you can use the following sub-steps

1.1 Install Requirements

1.1.1 Install Node & NPM

1.1.2 Install create-react-native-app

npm i -g create-react-native-app

1.2 Create the Application

create-react-native-app {{project name}}

2. Dockerization (Optional)

If you are at that stage that you want to optimize your build process, you can use the following sub-steps to build a docker image for your app.

2.1 Create Dockerfile

Create a DOCKERFILE in your project folder with the following contents:

Make sure to install dependencies first for caching benefits.

FROM node:12.18

# Install requirements
RUN npm install -g expo-cli

# Install dependencies
ADD package.json .
CMD [“npm”,”install”]

# Copy contents
COPY . /

# Run application
CMD [“sudo”,”expo”,”start”,” — web”]

2.2 Build Docker Image

Build the image with the following command ( — network=host prevents slow dependency downloads):

Note: test:v0 is the image name and tag separated by ‘:’

docker build — network=host -t test:v0 .

2.3 Run Docker Image

Run the image.

The command parameters -p 3000:3000 opens the port for localhost access.

You will need to replace 3000 with the port number of your application. ReactJS apps use port 3000 by default.

docker run -i -t -d -p 3000:3000test:v0

2.4 Test the image

You can now view the app via your web browser at:

http://localhost:3000

3. Set Up the Server

The following section uses the “free for the first year” AWS cloud offerings. I am not sponsored by AWS in any way. It is just easy to use their services!

3.1 Acquire AWS Account

Go to this link to create an AWS account.

3.2 Create EC2 Instance (CHECK YOUR REGION)

When you open the EC2 panel, double check that your region is where you want to host your server.

EC2 is essentially a server-hosting service where you can configure your whole VM.

For this guide, I will use a Ubuntu 16.04 LTS image, which is Free-tier eligible.

Make sure to create a key-pair and store the private key for accessing the server later on! It should be a .pem file

3.3 Access the EC2 Instance

3.3.1 Use the key pair you have stored to access the server using SSH.

If you do not know how to do this, you can do the following:

Windows (using PuTTY)

• Open PuTTYgen (right-click the PuTTY application on the taskbar)
• Click Load (an existing private key file)
• Select the .pem private key from AWS
• Click Save private key and store the .ppk file
• Get the address of your EC2 instance on the AWS dashboard

Example EC2_IP_ADDRESS:

ec2–11–222–333–444.ap-east-1.compute.amazonaws.com

• Open PuTTY
• Create a new profile on PuTTY and set the following:

Hostname: ubuntu@ec2-11–222–333–444.ap-east-1.compute.amazonaws.com
Port: 22

• Go to SSH / Auth then in the Private key file for authentication, select the .ppk file you have generated
• Press Open to connect to the server
• On your first time connecting, PuTTY will ask you if you want to add the key of the server to your list of trusted public keys. Select Yes.
• If you did not put ubuntu@ in the hostname, the default username is ubuntu with no password (since you have connected by a private key file).

3.3.2 Install Node 12 or above on the machine

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs -y
node -v
npm -v

You should then see an output like:

$ node -v
v12.21.0
$ npm -v
6.14.11

If you are using npm run build, you will also want to install serve in the server

sudo npm i -g serve

3.4 Install your Application in the Server

You can do this by pushing your application to GitHub and running the following command in the server:

git clone YourGitRepoUrl
cd YourGitRepoName
npm install
npm run build
serve -s build

The application should now be running in the server (default port 5000)

3.5 Open the EC2 Instance to Public Access (Port)

3.5.1 Go to the EC2 Dashboard

3.5.2 Select your EC2 Instance (Check your region if you cannot find it)

3.5.3 Go to Security / Security Details / Security Groups

3.5.4 Select the security group

3.5.5 Click Edit inbound rules

3.5.6 Add the following rule: (For testing only, you should remove this later)

Type:       Custom
Protocol:   TCP
Port range: 5000
Source:     YOUR_IP

3.6 Test Public Access (Port)

Go to `<EC2_IP_ADDRESS>:5000` on a web browser to see if the page is accessible and running

4. Get Your Domain Name

4.1 Acquire Domain Name from an ICANN Provider

www.namecheap.com
www.name.com
www.godaddy.com
or
AWS Route 53

4.2 Create AWS Elastic IP Address

4.2.1 Create the AWS Elastic IP Address in the EC2 dashboard. Let’s call that the EC2_IP_ADDRESS .

4.2.2 Associate the EC2 instance to that IP Address

4.3 Create AWS Hosted Zone in Route 53

4.3.1 Add the following A Records

Record Name: www.YOUR.DOMAIN
Type: A
Value: EC2_IP_ADDRESS
Record Name: YOUR.DOMAIN
Type: A
Value: www.YOUR.DOMAIN.

4.4 Add Hosted Zone Nameservers to ICANN Provider

4.4.1 Get the name server addresses

The name servers are listed in the Hosted Zone’s NS record

NS record example

4.4.2 Add the name servers to the ICANN Provider’s redirection of name servers*. Below, I use Namecheap.

*The changes on the name server may take 24 to 48 hours depending on the provider, it normally takes an hour or so to update.

4.5 Open Port 80 (HTTP) on the EC2 Instance Security Group

Do this by adding the following inbound rules:

Type:       HTTP
Protocol:   TCP
Port range: 80
Source:     0.0.0.0/0
Type:       HTTP
Protocol:   TCP
Port range: 80
Source:     ::/0

4.6 Redirect Port 80 (default web port) traffic to Application Port (5000)

4.7.1 Run the following commands anywhere in your server

sudo iptables -t nat -I PREROUTING -p tcp — dport 80 -j REDIRECT — to-port 5000
sudo iptables -I INPUT -p tcp — dport 5000-j ACCEPT

4.7 Test Public Access (Port 80)

Go to http://YOUR.DOMAINon a web browser to see if the page is accessible and running. You do not need to include the port number (80) since you are using http://.

5. Set SSL Certificate (Get HTTPS on your website)

5.1 Acquire AWS ACM SSL Certificate

This may take time (up to 24 hours) when Route 53 CNAME records are created, but it usually only takes less than an hour.

5.1.1 Go to the AWS ACM dashboard

5.1.2 Request a certificate for your YOUR.DOMAIN and www.YOUR.DOMAIN addresses

5.1.3 Confirm the Request and validate your domain by adding the required CNAME records requested by ACM

5.2 Create a Load Balancer with SSL Certificate

5.2.1 Go to the AWS EC2 dashboard. Make sure the region is correct!

5.2.2 Under Load Balancing go to Load Balancers

5.2.3 Select Create Load Balancer

5.2.4 Select Application Load Balancer (HTTP/HTTPS)

5.2.5 Fill in the necessary details:

• Name
• Add HTTPS Listener
• Availability Zones (you can select all)

5.2.6 Click Next

5.2.7 On Configure Security Settings, select the SSL certificate you have generated using AWS ACM, or another SSL certificate you have.

5.2.8 Click Next

5.2.9 On Configure Security Group, select the security group of your EC2 instance

5.2.10 Click Next

5.2.11 On Configure Routing, create a target group. You may use HTTPS for added security.

5.2.12 Make sure to give the target group a name

5.2.13 Click Next

5.2.14 Select the EC2 instances you want to add to the target group

5.2.15 Click Review, then Create

5.3 Redirect traffic to Load Balancer on Route 53

5.3.1 Go to Route 53

5.3.2 Select the A record that fits the following parameters:

Record Name: www.YOUR.DOMAIN
Type: A
Value: EC2_IP_ADDRESS

5.3.3 Edit the record and select the load balancer you have created as the value (it may be called “dualstack….”)

5.4 Open Port 443 (HTTPS) on the EC2 Instance Security Group

Do this by adding the following inbound rules:

Type:       HTTPS
Protocol:   TCP
Port range: 443
Source:     0.0.0.0/0
Type:       HTTPS
Protocol:   TCP
Port range: 443
Source:     ::/0

5.5 Redirect Port 443 traffic to Application Port (5000)

5.5.1 Run the following commands anywhere in your server

sudo iptables -t nat -I PREROUTING -p tcp — dport 443 -j REDIRECT — to-port 5000
sudo iptables -I INPUT -p tcp — dport 5000 -j ACCEPT

5.6 Test HTTPS Access to Application

Go to https://YOUR.DOMAIN on a web browser to see if the page is accessible and running.

Congratulations! You now have an HTTPS Web Service hosted on AWS!

6. Transfer Region (Optional)

This is in case you wish to transfer the EC2 instance to a different region. The guide uses the Amazon Machine Image (AMI) to copy the instance and transport it across regions.

6.1 AWS EC2 Instance Transfer

6.1.1 Create AMI using EC2 (this reboots the instance!)

To keep system running, rerun the npm run start or serve -s build command in the instance

6.1.2 Copy AMI to new region

6.1.3 Create the instance using the AMI in the new region

6.1.4 Open the ports in the new instance

6.1.5 Create static IP for instance

6.1.6 Associate Instance to new static IP

6.2 Load Balancer

6.2.1 Request new ACM certificate IN THE RIGHT REGION

6.2.2 Create new Application Load Balancer with HTTP & HTTPS listeners using new ACM certificate

6.3 Route 53

6.3.1 Redirect www. A Record to new LB

6.4 Run the Instance

6.4.1 Connect to the instance via PuTTY

6.4.2 Run the necessary npm run start or serve -s build

For serve -s build running on port 5000, run the following commands after to open the ports (80, 443) on the server. The security group inbound rules should already be set on the EC2 instance configuration.

sudo iptables -t nat -I PREROUTING -p tcp — dport 80 -j REDIRECT — to-port 5000
sudo iptables -I INPUT -p tcp — dport 5000 -j ACCEPT
sudo iptables -t nat -I PREROUTING -p tcp — dport 443 -j REDIRECT — to-port 5000
sudo iptables -I INPUT -p tcp — dport 5000 -j ACCEPT

6.5 Cleanup

You can now delete the AMI (not the EC2 instances!) on both regions to avoid additional costs.