How To Get Started With AWS
Deploying a React.js application using Amazon Web Services.
Hi there, welcome back! Thank you for stopping by. In this article, we’ll try to answer the questions “What is AWS?” and “Where do I start?”. To do that, we’ll go through the steps to deploy an existing React.js single page application (SPA). If you plan to follow along, here is the repo to the app we are deploying.
Who better to answer the “What is AWS?” question than Amazon themselves.
If you are a budding developer looking to get that first opportunity, it is important to get familiar with some of the different cloud infrastructure providers out there. There are quite a few so you don’t have to learn how to use all of them. They all provide the same basic thing, virtual private servers (VPS) for you to deploy whatever it is you are building.
The idea behind all of them is to remove the logistical lift of purchasing and maintaining the hardware necessary for large-scale applications. This has provided the modern-day startup and large companies alike an unparalleled level of flexibility, allowing them to adjust their resources as the demand for their product increases or decreases. Think of any online store on“Black Friday”. It’s no wonder why the “Cloud” became so popular so quickly.
To name a few of the top providers:
- Microsoft Azure (Azure)
- Amazon Web Services (AWS)
- Google Cloud Platform (GCP)
There are also smaller providers that are privately owned.
For this example, we are going to use AWS as we are very likely to come across it in our career. There are a couple of things to note if you plan to follow along, you will need a credit card in order to create the AWS account as you likely will with most of the major providers.
We will be using only free services but note that on AWS, each service has a different “free tier”. Some are always free others have a trial period. One of the services we will be using gives us 12 months of free service which is broken down in hours as a total of 750 hours per month. If we go over the 750 hrs/mo, there is an hourly rate per instance you have running, and the rate changes depending on the specs of the VPS you spun up.
With that said, if you are not doing anything with an instance that you have spun up, be sure to take it down so you are not draining your hours per month. Most providers will start the counter the moment you spin up a VPS even if you have not deployed anything to it. Ok, enough caveats let’s get to it.
For brevity, we will not go over the account creation process.
If you are following along create your account below.
https://aws.amazon.com/Once you have logged in to your account you should see something like this.
If we click on the Services dropdown in our navbar you will see the large gamut of services offered by Amazon.
This can be a bit overwhelming at first but as with all good providers, there are walkthrough videos and documentation to help you navigate all the services offered. You can see them on the “Learn to build” section of the Management Console.
First, we are going to go through the flow of deploying a VPS with EC2. This is a more “manual” approach as this is just the virtual machine. Then we will take a much easier route to deploy our web application. But…What is EC2?
EC2 stands for Elastic Compute Cloud. EC2 is a web service that provides secure, resizable compute capacity for your cloud. Basically it is the service that gives us the virtual CPUs and memory we will use in our VPS.
Launching a Virtual Machine
Select the appropriate service
From the Management Console screen click the Services dropdown on the navbar, then under the Compute category click on EC2
You should see something like this.
In the image above, you can see Ohio listed on the right-hand side of our navbar. This is where you choose where you want your instance deployed. We will leave it as is for this example.
Start the launch process
Click the Launch Instance dropdown and select Launch Instance. From here, we will need to choose the AMI or Amazon Machine Image for our instance. Notice that the steps to complete the launch process are outlined and described at the top of the page.
Since we are just going through the flow of deploying a VPS we’ll just pick the first one by clicking the Select button and move along.
Choose an Instance Type
Now we get to pick the virtual hardware we will be using. For this example, we are selecting the t2.micro Instance since it is free and it’s all we need for our simple application.
We always have the option to review and launch with the default settings or move to the next step at the bottom of the screen but we will click next just so we can see all the configuration options available.
Configure Instance
Here we can do many things like set the number of instances to launch, add other services like Monitoring, or even create a virtual private network. Once we go over the settings, we can move to adding storage and setting up security.
Add Storage
Each instance comes with a local file storage system but this is not persistent. If you shut down the Instance all local files will be lost. Depending on our needs we can either add a new storage volume or we can use S3 (Simple Storage Service) to avoid any data loss.
Add Tags
Tags are very simple, they can help you group things and also clarify what you may see in your bill. This can be very helpful when you have hundreds of instances running simultaneously.
Configure Security Group
If you are not absolutely sure how to set up your security I do not recommend this “manual” approach. Your server will be hacked in seconds if you don’t set up security correctly.
Notice the warning that these default settings are not safe. We are not diving into this today so we are launching this Instance like this just to show the flow. This will be shut down immediately to avoid any issues.
With that said, on the next step, we should see a big warning.
Review and Launch
Once we click the Launch button we get a popup asking us to download key pairs to be able to access this Instance from our local machine. Here we select Create a new key pair from the dropdown and give it a name. We named this one Test-key-pair. Then you want to click the Download Key Pair button and save them in a safe location in your local machine.
Once you download your key pair the Launch Instance button will become clickable. Once we click it the system will start building the instance and installing all the necessary software in it.
You should see something like this.
Now, we can navigate back to our EC2 screen and click on Instances on the left pane to see the newly deployed Instance.
To stop the instance right-click on it, hover over Instance State, and click Stop.
If you no longer need it you can click Terminate to stop and remove it. Ok, that was the more “manual” approach. That was simple enough but I don’t really want to do all that each time I want to deploy one of my apps. Not to mention there are many more services that would be part of the process i.e adding a database or adding analytics. Luckily there is a much easier way to get our app deployed.
Queue Elastic Beanstalk.
Deploying a web application with Elastic Beanstalk
AWS Elastic Beanstalk is an orchestration service for deploying applications. It handles various AWS services including EC2, S3, Simple Notification Service, CloudWatch, and others.
To get started, navigate back to the Management Console by clicking on the AWS logo at the top-left of the screen. Once there, locate the “Build A Solution” section and click on Build a web app.
This will take you to the Elastic Beanstalk getting started page.
1 - Name the app
2 - Select the platform
Since our application is a react app we will select node.js as our platform. For the source code origin, we want to select theLocal file radio button.
3 - Upload source code files
For this step, we will need to download a zip file of our repository from GitHub.
4 - Unzip and re-zip the source code files
There a couple of steps to this one.
A - Unzip the file. I am using The Uarchiver to do this but you can use your favorite.
Once that is done you should see something like this.
B - Open the folder, select all the files inside, and compress them.
You will end up with a file named Archive.zip or something similar — you can rename it as you like.
5 - Click the Choose File button
Once clicked, navigate to the newly zipped file — usually on the Downloads folder select it and click open.
6 - Click the Create application button
This will start the process of adding all the necessary services and creating our instance etc. This will take a few minutes to complete. You should see something like this on the screen.
Once this process is completed we should be directed to the Elastic Beanstalk page for our app.
Aww yeah!! Congrats, we’ve just deployed a React.js app on AWS! Now, if we click the URL for our application at the top-left of the screen we should be able to see it in action.
Here is a short video of the working application.
If this was in any way helpful, informational, or entertaining I’d love to hear from you in the comments. If you have any suggestions on topics you’d like me to cover please don’t hesitate to reach out. As always stay healthy, stay curious!
