The Ultimate Guide for Quickly Launching Websites Using AWS & Namecheap

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.

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

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:

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):

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

2.3 Run Docker Image

Run the image.

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.

3.3 Access the EC2 Instance

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

  • 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
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).
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs -y
node -v
npm -v
$ node -v
v12.21.0
$ npm -v
6.14.11
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

3.5 Open the EC2 Instance to Public Access (Port)

3.5.1 Go to the EC2 Dashboard

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
orAWS 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.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

NS record example

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.2 Create a Load Balancer with SSL Certificate

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

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

5.3 Redirect traffic to Load Balancer on Route 53

5.3.1 Go to Route 53

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

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.

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!)

6.2 Load Balancer

6.2.1 Request new ACM certificate IN THE RIGHT REGION

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Justin San Juan

Justin San Juan

48 Followers

Award-Winning Software Engineer | Business and Web Consultant