/
Write
Start a team blog
NEW ✨
Start a team blog, invite your team, and start publishing.

How to Create Staging Server for React application on AWS EC2 Service

Aastha Gupta's photo
Aastha Gupta
·Apr 14, 2021·

3 min read

image.png

If you are looking to create a simple and affordable staging server for your React application then Amazon EC2 is the solution.

A walkthrough on setting up a production-similar staging server from scratch on Amazon EC2.

Create and Launch EC2 Instance

image.png

  • Choose an Amazon Machine Image (AMI): Here you need to choose on what operating system you want the instance you are launching. We will be using Ubuntu Server 20.04 LTS (HVM), SSD Volume Type - ami-0ca5c3bd5a268e7db (64-bit x86) / ami-0ae8c80279572fa66 (64-bit Arm).

image.png

  • Choose an Instance Type: Here you need to choose the Instance Type that will add the resources for the instance. We will be using t2.micro, which is available for free-tier. After choosing the instance type click on Next: Configure Instance Details

image.png

  • Configure Instance Details: Lets keep the default settings and move to next screen, click on Next: Add Storage

  • Add Storage: Again, lets keep the default settings and move to next screen, click on Next: Add Tags

  • Add Tags: Move to next screen, without adding any tag, click on Next: Configure Security Group

  • Configure Security Group: Here you need to add Rule for the application. So add HTTP and for source select Anywhere from the dropdown instead of Custom. Once done click on Review and Launch, review the instance details and click on Launch. You can also add Rules afterwards, if required, by heading to Change Security Settings.

image.png

  • Select an existing key pair or create a new key pair: Key pair is used to access the instance. Create and download a new key pair, if you don't have one, and keep it in a secure location. Once done, click on Launch Instances.

Beyond this point you will not have the option to download the key pair again, and without the key pair you cannot access your instance.

image.png

  • Launch Status: After successful launch status, click on View Instances. Your new instance will be present in the instance table. Click on the instance ID and save Public IPv4 address, this will be used to connect with the instance.

image.png

Connecting to the Instance Through SSH

  • Launch terminal, where you have saved your key pair.

  • Type the below command to open .ssh folder. Here, aws.pem is key pair name ( created at the time of instance creation ) with .pem extension and 52.12.157.251 is Public IPv4 address.

image.png

  • If you have written the correct command then you will be connected to the ubuntu server.

Cloning GitHub repo on ubuntu server

You can clone your own repo or use the repo this: github.com/aastha-14/react-typing-app.git

image.png

Installing Required Software

image.png

  • Run the below commands.

image.png

image.png

image.png

image.png

  • Edit the nginx configuration

image.png

  • You will see the below file, here you have to change the root path and location.

image.png

  • Path and location should be

image.png

  • Save the changes and exit the editor.

  • Restart the nginx.

image.png

  • You can now check the app running on Public IPv4 address.

image.png