In this tutorial, we wil be learning how to deploy a simple web application to the cloud using AWS and Nginx.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Once done, run the ssh command again and now you should be logged into your vm. Yippie! 😊
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
Add the downloaded key
apt-key add nginx_signing.key
This should be the response.
cd into the /etc/apt directory and edit the sources.list file by running
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
Return to home directory
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
If you have issues installing nginx. If this error comes up, demanding you install libssl1.0.0 dependency.
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
Then run again to install nginx,
apt-get install nginx
Start the nginx service. Run the command:
service nginx start
To ensure the nginx service is up and running. Run this command:
systemctl status nginx
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.
Click on the security groups. Click on Edit inbound rules
Click on Add rule. Select HTTP. Set CIDR blocks to 0.0.0.0/0 and click Save rules
Restart the nginx server. Run this command:
service nginx restart
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!
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
Confirm node and npm is intalled
node -v npm -v
If node is installed but npm is not, simply run:
apt-get install npm
Next, clone your react project from github.
git clone <project repository on github>
Then, navigate into the project directory, install the dependencies and build the react project. Run these commands respectively.
npm install npm run build
Next, copy the contents of your build to the html directory in nginx.
cp -r /home/ubuntu/<directory name>/build/. /usr/share/nginx/html
After this, restart your nginx service and run your instance over the browser.
Congratulations! You've successfully deployed a web app to AWS.
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)