DEV Community 👩‍💻👨‍💻

Cover image for How to deploy a web app using AWS and Nginx
Chiamaka Mbah
Chiamaka Mbah

Posted on

How to deploy a web app using AWS and Nginx

In this tutorial, we wil be learning how to deploy a simple web application to the cloud using AWS and Nginx.

Prerequisites

  • A web application you want to deploy
  • An AWS account

Step 1: Select a region

Regions are very important in deploying your application to the cloud. Why? The closest the region is to the user, the faster they can access resources from the server.

Alt Text

In the image above, I selected North Virginia as my server region, and you are free to choose a different one.

Step 2: Create an instance

First step, we need to set up the instance where we would be deploying our application.

An instance in layman term is a remote computer or as written in the AWS docs - a virtual computing environment. Instance is the term given to a remote machine by AWS, other cloud service providers like Digitalocean and Microsoft's Azure simply call theirs Droplets and Virtual Machines respectively.

Log into your AWS console as a root user. Navigate to the AWS services card and select EC2 (Elastic Compute Cloud) service.

Alt Text

You should be presented with this page. Click on Launch instances. You will be required to choose an Amazon Machine Image. A machine image represents the type of OS your virtual computer would run on, because, what's a computer without an OS?

I selected the Ubuntu Server 20.04 LTS (HVM), SSD Volume Type, you are free to choose a different image.

Next up, select an instance type needed to run your application. Instance types are more like CPU capacity and processor type for your machine.

Here, I picked the t2.micro instance type. It's on the free tier plan. You can choose a different instance type, depending on what your application demands.

Alt Text

Next up, we configure the details for our instance.

Here, we are going to edit two things. Our subnet information and user data. The idea behind user data is to preinstall softwares you will be needing in your virtual machine.

Select any subnet for your machine, after this is done, an IP address is assigned to your VM. IP addresses are ways to identify a computer, communicate and share resources with them.

Alt Text

There is an option to create your own subnet and if you decide to make your newly created subnet private, you cannot be able to access resources provided to public subnets in that region. Simply, AWS provides every instance internet to pull resources. If you make your subnet private, you will have to find a way to pull resources.

Alt Text

In the userdata, I specified that I want git preinstalled into my vm.

Next, set up storage for your vm. This is more like your SSD. Remember my machine image is of SSD volume type.

Alt Text

Next, tags. Leave your tags empty. Tags are more like labels you give to your AWS resources. It is presented as a key-value pair data structure.

Next, security groups. There is a default security group set for your instance. Security groups are more like firewalls.

Firewalls are protective walls for what type of requests come into our server. For example: you can block HTTP requests from accessing your web application

You can choose to use an existing security group or create a new one. I will be creating a new one.

Alt Text

Finally, review everything and launch.

After launch, you will be required to create a key pair either RSA or ED25519 format. This is required to securely log into your ec2 instance shell. Select a pair type and give it a name. Download the key pair. Once done, launch your instance.

After this, your instance should be up and running.

Alt Text

Step 3: Log into your virtual machine

Our remote machine is ready for deployment but we need to login and perform the deployment operation. The way you have a physical machine and log into with a username and password. We are dealing with a remote machine and so we need a way to connect to it, the key pair you created and downloaded is the way to connect.

Click on your instance ID and click connect. Copy the highlighted command (I highlightd it, not AWS) using the copy icon situated left of the command.

Alt Text

Open your terminal. If you are using a Windows machine, download git bash or WSL (Windows subsystem for Linux). If you are using a Linux machine, don't bother. Now, cd into the directory where you downloaded that ssh key pair, paste the command you copied and press enter to run it.

Follow the prompt. If you get the error in the image below, don't worry, simply run:

chmod 400 <name of RSA file>.pem
Enter fullscreen mode Exit fullscreen mode

Alt Text

Once done, run the ssh command again and now you should be logged into your vm. Yippie! 😊

Alt Text

Also, git was successfully installed. Remember what we specified in our user data.

Step 4: Set up Nginx server

Before we set up the Nginx server, we have to install Nginx.

NGINX is an open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more - www.nginx.com

Generally in Linux, there are operations that require administrator rights so you would need the sudo command. We can choose to eliminate that and carry out those operations without admin rights by running the sudo su command.

Download the nginx signing key

wget http://nginx.org/keys/nginx_signing.key
Enter fullscreen mode Exit fullscreen mode

Add the downloaded key

apt-key add nginx_signing.key
Enter fullscreen mode Exit fullscreen mode

Alt Text

This should be the response.

cd into the /etc/apt directory and edit the sources.list file by running

nano sources.list
Enter fullscreen mode Exit fullscreen mode

Once your nano editor is open, add this to the end of the file.

deb http://nginx.org/packages/ubuntu xenial nginx
deb-src http://nginx.org/packages/ubuntu xenial nginx
Enter fullscreen mode Exit fullscreen mode

Return to home directory

cd /home/ubuntu
Enter fullscreen mode Exit fullscreen mode

Run the apt-get update command to update the Nginx software.

Once the update is complete, install Nginx. Run this command:

apt-get install nginx
Enter fullscreen mode Exit fullscreen mode

If you have issues installing nginx. If this error comes up, demanding you install libssl1.0.0 dependency.

Alt Text

Run this command sequentially.

echo "deb http://security.ubuntu.com/ubuntu bionic-security main" | sudo tee -a /etc/apt/sources.list.d/bionic.list

sudo apt update

apt-cache policy libssl1.0-dev

sudo apt-get install libssl1.0-dev
Enter fullscreen mode Exit fullscreen mode

Then run again to install nginx,

apt-get install nginx
Enter fullscreen mode Exit fullscreen mode

Start the nginx service. Run the command:

service nginx start
Enter fullscreen mode Exit fullscreen mode

To ensure the nginx service is up and running. Run this command:

systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

Let's run our instance over the browser, if the default nginx page is served, then it works perfectly.

Right now, our web page will not be served, you will notice the browser loading without an information. We missed one vital step. The protocol for web browsers to fetch web pages is HTTP. When we set up our security groups, we had only one rule which is the SSH rule. We need to edit our security group to add in the HTTP rule.

Alt Text

Click on the security groups. Click on Edit inbound rules

Alt Text

Click on Add rule. Select HTTP. Set CIDR blocks to 0.0.0.0/0 and click Save rules

Alt Text

Restart the nginx server. Run this command:

service nginx restart
Enter fullscreen mode Exit fullscreen mode

Run the instance over the browser again. Edit the protocol in the url from https to http.

This is what we should have now. Yippie!

Alt Text

Step 5: Deploying our web app

I will be deploying a react app.

First, we need to install nodejs. A react application cannot function without nodejs.

apt update
apt install nodejs
Enter fullscreen mode Exit fullscreen mode

Confirm node and npm is intalled

node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

If node is installed but npm is not, simply run:

apt-get install npm
Enter fullscreen mode Exit fullscreen mode

Next, clone your react project from github.

git clone <project repository on github>
Enter fullscreen mode Exit fullscreen mode

Then, navigate into the project directory, install the dependencies and build the react project. Run these commands respectively.

npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

Next, copy the contents of your build to the html directory in nginx.

cp -r /home/ubuntu/<directory name>/build/. /usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

After this, restart your nginx service and run your instance over the browser.

Alt Text

Congratulations! You've successfully deployed a web app to AWS.

Conclusion

This article taught us how seamless it is to deploy a web application using AWS and Nginx. Head over to the AWS docs for more tutorials on using AWS services.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.