Deploy a Basic React Project to Amazon AWS EC2

So you want to deploy your React application to AWS...

This guide provides a basic overview of configuring and deploying an Amazon Web Service (AWS) Elastic Compute Cloud (EC2) instance and deploying an existing React application on a github repo using git.

Instructions to Provision an EC2 Instance:

Step 1:
Create an AWS account: https://aws.amazon.com/

Step 2:
Navigate to your "Console Home" dashboard, which should look like this:

(you can also customize the appearance of your "Console Home"

Step 3:

From your "Console Home" dashboard, select "Launch a Virtual Machine"

This will take you to the EC2 Launch an Instance page from where you will configure your virtual machine.

Let's pause for a moment here and give an overview of what the "Launch an instance" dashboard provides.

From this page, AWS provides you with the ability to customize what you need (or want) your cloud machine's specifications to be. Here, you'll be able to select an operating system (OS), the size of hardware (both storage size and compute size).

Put more analogously, it's akin to going to Apple.com to spec out a mac (Model, Color, Processor, SSD, etc.) - but at a far more granular level.

Let's keep going...

Step 4:
Name your web server. In this example, I've named my instance "Blog React App".

Step 5:
Select an Amazon Machine Image (AMI) - what OS (and other software) you want the machine to have from the jump. There are several "standard" options: Amazon Linux, Ubuntu, Windows, Red Hat. For this example, I selected Ubuntu. You can also search for other AMIs that have been created to support AWS users, with various pre-configured software out of the box.

Additionally, as you become a regular user of AWS and find yourself developing regularly with js or python on ubuntu or linux machines, you can create custom AMIs to your specifications so that you can create (or "spin-up") new EC2 instances for new development work.

Step 6:
Select and Instance Type. This is your processor. With a new account, AWS provides their t2.micro instance for free (there is a limit on this so make sure to check your usage!). Depending on what you're doing on the instance, you may need a larger instance type.

Since we're just deploying a basic React app, I've selected the base t2.micro option.

Step 7:
You are advised to create a Key pair. This is a security step for authenticating the user and AWS instance.

I've created a key, and titled it "blog-key"
Since I'm using a mac, I've chosen the "RSA" Key pair type and .pem format since I plan to SSH into the instance from a terminal on my laptop.

When you click "Create new Key pair", the .pem file will automatically download onto your laptop.

You can save this file anywhere on your laptop, but you'll need to reference the path to the file in just a bit.

Step 8:

Next is configuring the security group. This is a challenge for many AWS users, seasoned and new alike. AWS gives you the ability to permit the traffic you want to allow to your EC2 instance.

If this is your first time setting up EC2, you'll be prompted to create a security group. A security group is AWS's name for the network settings you want to configure together that will be applied to a specific instance.

For this instance, I'll go ahead an select "create a new security group". I want to be able to SSH into the instance, so I've selected "Allow SSH traffic from" and set the IP range to anywhere.

I also want the instance accessible after I've deployed my React app, so I'm also going to allow HTTP and HTTPS access from the internet.

NB: I'm not an expert on network settings, and setting IP ranges and opening ports for access is itself another area of learning. Since this blog post is about getting a bare bones EC2 instances set up and running with an app, I don't dive deeply into network and security settings. However, if you plan on deploying an app for production or with sensitive data, you should be advised to take care in setting your network settings and security.

**We will not be configuring Storage or adding any Advanced Details

Step 9:

Click the orange "Launch Instance" button

It may take a few seconds to a few minutes for the instance to successfully launch and be available (keep in mind, your request for an EC2 instance has to be sent over your internet network to AWS, which then has to "provision" that machine with the specifications. This can take some time).

If the provisioning is successful, you should see this:

Step 10:

Click on "Instances" - this will take you to another dashboard that shows you all the current instances running under your account.

(we only see one instance running - the one we just set up - which is accurate for my account)

Step 11:

Click on the "instance id" - that will take you to a new page that will show you information about just that specific instance.

This page shows you the IP addresses and various other details about the instance.

Step 12:

Click "Connect". This will take you to the "Connect to instance" page where you'll find information on how to connect to the instance from your laptop.

We're going to going to use SSH to connect, so we'll click on that tab:

You can follow the instructions on the page, or do the following;

1. Open a command terminal on your computer
2. Find your private key file (the .pem file we created earlier)
3. Run this command: chmod 400 blog-key.pem (you would change "blog-key.pem" to the name of your pem file)

If the command is successful, you should see a new command line returned

Now we're ready to connect to our EC2 instance!

Get the Public DNS address from the Connect page.

Then, in your command terminal, use this ssh command:

ssh -i "blog-key.pem" ubuntu@ec2-13-57-255-249.us-west-1.compute.amazonaws.com

If the SSH connection is successful, you should expect to see something like this:

Configuring the Provisioned Instance

Ok. Now we're in the instance, but we're not done yet.

The instance you've been provisioned has ubuntu installed on it, but it won't have all the software you need on it to run a React application. This is going to be true for any other software you might want to run on this or any other instance. Remember how you had to install Node, Ruby, Python to be able to run it on your laptops? The same is true on EC2.

btw: you can navigate the EC2 instance just as you would your local machine on the command line (e.g. cd, ls, mkdir, etc.)

To end an SSH session from the client side, you can type these keys in sequence: ,  + , then :

Here's a short checklist of the packages we'll need:

• apt
• git
• Node (and npm)
• nginx

Let's start by checking a few things.

Run command: sudo apt update

Let's break this down:

The prefix "sudo" tells the instance that you're executing a command as "root" and we're updating "apt" which is ubuntu's package management tool.

Here are the official description and reference links:

• sudo: Sudo (su “do”) allows a system administrator to delegate authority to give certain users (or groups of users) the ability to run some (or all) commands as root or another user while providing an audit trail of the commands and their arguments.
• apt: apt (Advanced Package Tool) is the command-line tool for handling packages. It provides a command line interface for the package management of the system.

git should come out of the box on the ubuntu, but we can check if it's there with this command: git --version

If git is installed, you'll see the version number; otherwise you'll get a message to install git.

Run sudo apt install git

Install the webserver nginx:

sudo apt-get install nginx -y
nginx -v
sudo systemctl restart nginx

Finally, let's install node and npm. I had some trouble running the standard install command, and found this recommendation on stakoverflow:

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

If you'd like, go ahead and check that the packages are installed and that the versions are correct:

node -v 
npm -v 

Ok! Now to get our project onto the server (our EC2)

Navigate to this directory:
cd /var/www/html/

We're going to add our project here.

Run a git clone command to clone your React repo into this directory:

git clone <github http address>

Now, cd into the project directory.

Run npm install

Once the installation is complete, you can start the React application!

npm start

If the build is successful, you should see something like this:

Of course, we now want to see the site from a web browser!

Let's go back to our instance summary dashboard.

Find the Public IPv4 address at the top of the page:

Copy and paste that address into a browser and see if we get our React app:

We're hitting the nginx welcome page, and not our React app! However, seeing this page means that the web server is running correctly AND we're able to access the instance from the world wide web!

To get to the React app, we need to specify the port that the app is running on in the web address. In our case, it's port 3000.

http://13.57.255.249:3000/

However, this address will error out.

This is because we have not allowed that port to be publicly accessible in our network settings.

We have to go back to our instance summary page, and select the "Security tab"

Click on the "Security group" - this will take you to the config page for the security group.

Click "Edit Inbound Rules", then on the edit page, Click "Add rule"

Type Select "Custom TCP"
Port Range Type "3000"
Source Select "Anywhere-IPv4"

Then the orange "Save Rules".

Now, try navigating again to http://13.57.255.249:3000/in your browser (note: it could take a brief moment for the rules to update)

You should see your app, which in this example, is the out of box new React application welcome page: