Deploying a FastAPI and React Web Application on AWS EC2: A Comprehensive Guide

 

Deploying a FastAPI and React Web Application on AWS EC2: A Comprehensive Guide

 

In today's fast-paced world, building robust and efficient web applications is essential. Combining the power of FastAPI and React can lead to the creation of dynamic and high-performing web applications. This guide will walk you through setting up this potent combination on an AWS EC2 instance. We'll cover the infrastructural setup, initial steps, launching the instance, instance setup, and running your FastAPI-React application. 

Infrastructural Setup 

Before diving into the development process, let's make sure your infrastructure is properly configured:

 

Initial Steps:

1. IAM Role Setup: Begin by creating an IAM role with DynamoDB full access and CloudFront read-only permissions. Don't forget to grant these permissions to your user account as well.

 

2. Launch Instance: To set the stage, launch a new Amazon Linux instance. Opt for the "Amazon Linux" instance type and generate a new RSA key pair in `.pem` format. Configure network settings to allow SSH, HTTP, and HTTPS access from anywhere.

 

3. Instance Security Groups: Enhance security by editing the instance's IAM role to include the previously created role with DynamoDB and CloudFront access. Adjust the instance's security group settings to allow inbound custom TCP traffic on port 4004 for both IPv4 and IPv6 addresses.

 

4. Elastic IP Allocation: Secure a consistent IP address for your application by creating and allocating an Elastic IP address to your instance.

 

Instance Setup:

With the infrastructure in place, it's time to prepare your EC2 instance:

 

1. SSH into Instance: Open a terminal in the folder containing the downloaded `.pem` key file. Use the following command to establish an SSH connection to your instance:

 

   ```bash

   ssh -i abc.pem username@12.131.241.   # Replace with your public IP

   ```

  

2. Update and Install Dependencies: Once connected, ensure your system is up to date and install vital development tools. Install Python, Node.js, PM2, and Apache HTTP Server (HTTPD) to create a robust environment:

 

   ```bash

   sudo su

   sudo yum update -y

   sudo yum install -y gcc gcc-c++ make openssl-devel git python httpd

   curl --silent --location https://rpm.nodesource.com/setup_18.x | sudo bash -

   sudo yum install -y nodejs

   sudo npm install pm2@latest -g

   pm2 startup

   ```

 

3. Install Python Package Manager (pip): Download and install `pip` to enable the easy installation of Python packages:

 

   ```bash

   curl -O https://bootstrap.pypa.io/get-pip.py

   python3 get-pip.py --user

   export PATH=LOCAL_PATH:$PATH

   pip --version

   ```

 

4. Getting the Project: Clone your project repository onto the instance for further setup:

 

   ```bash

   cd /root

   git clone https://git-codecommit.ap-south-1.amazonaws.com/v1/repos/your_project

   cd your_project

   ```

 

5. Edit Environment Variables: Adjust environment variables for both the frontend and backend components to ensure proper communication:

 

   ```bash

   vi yourproject_Frontend/.env  # Add your EC2 public IP

   vi yourproject_Backend/.env    # Remove sensitive keys

   chmod 700 Run.sh

   ```

 

6. Start HTTPD: Begin the Apache HTTP Server to serve your application to the world:

 

   ```bash

   service httpd start

   sudo service httpd status # Open your public IP in a browser to check

   ```

 

Running the Application:

With the setup complete, it's time to set your FastAPI and React application in motion:

 

1. Running the Code: Execute the `Run.sh` script to launch your application. Think of `Run.sh` as a recipe that guides your computer through the steps needed to bring your app to life:

 

   ```bash

   ./Run.sh

   ```

Eg of Run.sh file :

 

#!/bin/sh

cd /var/www/html/

rm -rf *

cd /root/Demo_Pro/Frontend

npm i

npm run build

cd dist

cp -r . /var/www/html

cd /root/Demo_Pro/Backend

pip3 install -r requirements.txt

pm2 start 'uvicorn main:app --host 0.0.0.0 --port 4004' --name Backend

 

 

Your FastAPI and React application is now up and running on your AWS EC2 instance.

Conclusion

Deploying a FastAPI and React application on an AWS EC2 instance involves careful attention to infrastructure, security, and deployment steps. By following this comprehensive guide, you've laid the foundation for a high-performance web application that can scale and deliver exceptional user experiences. Maintain your application's security and updates to ensure its continued success. The journey you've embarked on showcases the powerful synergy of FastAPI, React, and AWS in building modern web applications. Happy coding! 

Written by, Shubham Raut (Junior Developer@Cloud.in )