Complete guide to deploy React app to AWS EC2 for global accessibility

Go Global with your React Application! If you start hosting your app on Amazon Web Services (AWS), the number of opportunities with Elastic Compute Cloud (EC2) will rise steeply. The flexible and scalable cloud infrastructure of AWS EC2, combined with the robust JavaScript library of the React app, renders empowered and dynamic user interfaces. This dynamic collaboration perfectly aligns with the needs of a worldwide audience.

In this article, you will learn step-by-step how to deploy React app to AWS EC2 Instance. The details provided in this guide include setting up the EC2 instance, configuring it for React app installation, and hosting your website for users to access. Therefore, by following the instructions provided here, you will have a completely operational React app running on an AWS EC2 instance, ready to be accessed by global users. Let’s get on with this and understand how to deploy your React application to AWS EC2!

Introduction to AWS and EC2

Amazon Web Services is a revolutionary cloud computing platform that has transformed the way developers and businesses alike deploy, manage, and scale their apps. AWS offers a diverse set of services. Amazon Elastic Compute Cloud i.e. EC2, stands out prominently among these as it is recognized as a fundamental building block.

What are AWS?

Amazon’s AWS is a cloud computing platform that offers a wide array of cloud services, including computing power, storage, databases, machine learning, and much more. Its design supports scalability and is extremely flexible. Its cost-effective solutions are found helpful across a range of organizations of almost all sizes, whether it’s a startup, mid-size firm, or an enterprise. AWS’s significant proposition comes in the form of its all-inclusive collection of tools and resources that can meet any kind of computing and infrastructure requirements.

Why choose AWS?

Now comes the question, why should one choose AWS over any other counterpart for hosting their applications, such as React web apps? Here are some reasons that might tell you the perfect why:

Scalability: AWS is quite accommodating when it comes to scalability. It is also able to manage the resources between high scale and low as per the demand. So let's say for an app, if you have to manage a sudden surge in traffic or reduce costs for a sudden drop in demand, AWS will prove to be advantageous. 

Flexibility: AWS offers flexible solutions to design your infrastructure to suit your exact requirements. This becomes possible with its wide range of services and configurations. Choices can be made based on your app requirements of the operating system, instance type, and storage options.

Reliability: AWS supports a global network of data centers and manages the redundancy, thereby, guaranteeing high accessibility and consistency for your apps. With this measure, your React app can be accessible to the global audience with minimal downtime.

Security: The security features and compliance certifications of AWS provide robust safety. You can execute identity and access management, encryption, and security groups as a precautionary measure for your resources' safety.

What is Amazon EC2?

Amazon EC2 is a part of the AWS family. It is a web service that enables you to rent virtual servers, which are known as instances, in the cloud. Each EC2 instance offers sturdy computing capacity, thus allowing you to run applications seamlessly, as well as to host websites and execute several computing tasks without actually investing in any physical hardware.

Why EC2 for hosting React apps?

EC2 is the most appropriate choice for hosting React applications owing to its amazing features, including flexible approach and scalability. You can effortlessly install your React app on an EC2 instance, set configuration as per your specifications, and enable its accessibility to global users. Whether you're creating a small-scale portfolio site or a complex web app, AWS EC2 has all the resources and capabilities you need.

Prerequisites

Before beginning the installation process, keep the below checklist ready: 

• An AWS account
• Basic knowledge of React, npm and AWS EC2
• A React app ready for deployment
• SSH client software (for connecting to the EC2 instance)

Setting up an AWS EC2 Instance

Launch an EC2 instance and ensure it has the necessary security group rules to allow inbound SSH traffic on port 22, as well as inbound HTTP traffic on port 80 and HTTPS traffic on port 443. For example, I have selected the Ubuntu operating system and t2.micro architecture

Preparing your React app for deployment

Before you get down to deploying your React app, it is important to keep a checklist ready and make necessary preparations. Install all the necessary dependencies, thereby generating a production-ready build. Also, conduct thorough local testing beforehand.

Deploying React app to EC2

We will transfer your React app to the EC2 instance, build its infrastructure, and complete its configuration over a web server (such as Nginx) to serve the app. Here are the necessary steps to ensure a successful deployment:

Transferring your app to the EC2 Instance
- SSH into your EC2 instance using the public IP or DNS, for example, ssh -i PrivateKey.pem ubuntu@ec2–xx–xx–xxx–xxx.eu-west-2.compute.amazonaws.com
- Install Git, Node.js, and npm on the instance.
- Change to the desired directory: cd /project_repo
- Copy your Git repository to a local directory: git clone <repository_url>

Deploy all the dependencies and create the React app
- Navigate to the project directory: cd <repository_directory>
- Install dependencies: npm install
- Compile the React app: npm run build

Setting up a web server (e.g., Nginx)
Install Nginx on your EC2 instance: sudo apt-get install nginx. Refer to this link for the full installation and activation process.

Steps to configure Nginx for deployment

To verify if Nginx is enabled and running on an Amazon Linux instance, you can use the following commands:

1. Start the Nginx
   - sudo service nginx start
   This command will start the Nginx service, if it’s not already running.

2. Check the status of Nginx
   - sudo service nginx status
   Running this command will display the current status of the Nginx service. If Nginx is active and running, the output will indicate that.

If Nginx is running successfully, the status command will display something similar to:
* nginx is running

On the other hand, if Nginx is not running, the output will indicate that it is not active or running.

- You can test Nginx by running the following command in the terminal: curl localhost

The above command will display the HTML file with the “Welcome to Nginx” text. Additionally, you can open your web browser and enter the public IP address of your EC2 instance (you can find this IP in the EC2 instance details). By doing so, you should be able to see the same 'Welcome to Nginx' page, which is the HTML file we accessed earlier using the curl command.

To change the root path of the server in the Nginx configuration file, follow these steps:

- Remove the default Nginx configuration: sudo rm /etc/nginx/sites-enabled/default

- Create a new Nginx configuration file: sudo nano /etc/nginx/sites-available/react-app

- You can check out this tutorial to generate an SSL certificate for HTTPS using certbot:

- Once you get the certificate key and crt file, you can put that under the server block of HTTPS (443).

1server {
2  listen 80;
3  server_name your_domain.com;
4
5  location / {
6      root /var/www/html;
7      index index.html;
8      try_files $uri $uri/ /index.html;
9  }
10}
11
12server {
13  listen 443 ssl;
14  server_name your_domain.com;
15
16  ssl_certificate /path/to/your/ssl_certificate.crt;
17  ssl_certificate_key /path/to/your/private_key.key;
18
19  location / {
20      root /var/www/html;
21      index index.html;
22      try_files $uri $uri/ /index.html;
23  }
24}

Finally, save the configuration file and complete the work of the text editor. Exit once done. Remember to use sudo before the text editor command to have the necessary permissions to modify the file.

Create a symbolic link from the sites-available directory to the sites-enabled directory: sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

After making these changes, you can restart the Nginx service for the new configuration to take effect: sudo service nginx restart

Now, Nginx will use the updated root path to serve web content. Ensure that the specified path exists and contains the necessary files for your website or application.

To deploy your project’s build folder to the Nginx web server, follow these steps:

1. Change the directory to your project’s root directory using the command:
   cd <project_dir>
   

Replace <project_dir> with the actual path to your project's root directory.

2. Copy the contents of the build folder to the Nginx default root directory using the scp command: sudo scp -r build/* /var/www/html

This command recursively copies the contents of the build folder to the /var/www/html directory. Before proceeding, make sure that you have the necessary permissions to implement this operation.

3. After copying the build files, you can open a web browser and enter the public IP address of your server. The IP address can be found in the EC2 instance details.

4. By doing so, you should be able to see your built application running in the browser. Nginx will serve the files located in the /var/www/html directory.

Make sure that your project’s build folder contains the necessary files for your application to run properly. Adjust the paths and commands according to your specific project structure and requirements.

Also read: Comparing Amazon RDS and Amazon EC2 for PostgreSQL Databases

Accessing your deployed React app

• Check your EC2 instance security group settings to ensure that inbound HTTP (port 80) and HTTPS (port 443) traffic is allowed.

• Access your React application by navigating to the domain name or public IP address associated with your EC2 instance in a web browser. The application should be accessible and functioning correctly.

Running React App on EC2 Instance

Also Read: Learn Everything About Code Smells: Types, Refactoring & Best Practices

Automating Deployment with AWS CI/CD Tools

In the modern world of web development, it is all the more important to stay agile and responsive. That’s where Continuous Integration and Continuous Deployment (CI/CD) come into play, particularly when they are paired with the sturdy services provided by AWS. By utilizing AWS CodeBuild, CodeDeploy, and CodePipeline, you can automate your deployment process whilst making sure that your React app remains updated and maintains the maximum code quality.

AWS CodeBuild leads to a seamless automation of the process of code compilation, running tests, and producing software packages that are ready to deploy. AWS CodeDeploy also automates application deployments to various AWS services, including EC2 instances. AWS CodePipeline manages the workflow from code update to deployment. This step ensures a smooth transition at every stage.

Below are the methods as to how you can integrate CI/CD into your React app deployment:

CodeBuild: Begin by creating a build project in CodeBuild and then link it to your source code repository.

CodeDeploy: Set up a deployment group in CodeDeploy, then select your EC2 instances and make a choice about the deployment strategy that best suits your application’s requirements, like in-place deployment or blue/green deployment.

CodePipeline: Create a pipeline in CodePipeline that connects your source code repository, the build output from CodeBuild, and the deployment process which is handled by CodeDeploy. This pipeline makes sure that every commit triggers an automated process that builds, tests, and deploys your application.

By proper integration of these AWS CI/CD services, you can automate the complete process from code commit to production deployment, thus keeping your React app in an optimal state for your users worldwide.

Monitoring and Logging

In order to keep the functionality of your React app smooth on AWS EC2, it’s critical to have a sturdy monitoring and logging system in place. AWS CloudWatch provides an extensive solution, allowing you to collect and track metrics, collect and monitor log files, set alarms, and also automate reactions to changes in your AWS resources.

Implementing CloudWatch involves a few key steps:

1. Logs: Create and define log groups in CloudWatch to combine logs from your EC2 instances. This will help you in monitoring the application activity closely along with system health.‍
2. Metrics: Leverage CloudWatch to monitor and track necessary metrics such as CPU utilization, network input/output, and disk operations. These analytics are vital signs of your app’s performance and can provide you with proper guidance in scaling resources or diagnosing issues.‍
3. Alarms: Set up CloudWatch alarms to alert and remind you when specific thresholds are crossed. For example, if CPU utilization exceeds 80% for a certain period, an alarm can trigger a notification or even an automated response to scale up your resources.‍
4. Dashboards: Create customized dashboards to visualize your metrics and logs in real time. This can be a highly powerful and remarkable way to understand metrics trends and also delve deep into the insights of your app’s performance and user experience.‍
5. Events: Utilize CloudWatch Events to respond to changes in your AWS resources. For instance, you can automate the deployment of additional EC2 instances when a certain traffic milestone is reached.

By integrating CloudWatch into your deployment strategy, you enable your capacity to proactively manage your application’s performance and promptly address any issues that arise, thereby ensuring a seamless experience for your users worldwide.

Security Best Practices

In the current times, it is pertinent to ensure that your applications are secure. While installing your React app on AWS EC2, you should follow all the security best practices to safeguard your data, infrastructure, and user information. 

Identity and Access Management: Identity and Access Management is one of the key priorities whilst managing security layers. To achieve this successfully incorporate IAM roles and policies to regulate control and access to your EC2 instances and AWS resources. Also, allocate permissions according to the principle of least privilege to enhance safety. This way, the users and applications will only have access to the essential resources for their tasks.

Network security: A full-fledged configuration of security groups and network access control lists will regulate inbound and outbound traffic as well as make it work in coherence with your EC2 instances. It is important to use the Virtual Private Cloud feature to quarantine your instances whenever you are not in a secure network setting, especially in any public network or internet-based environments.

Data encryption: Encryption is necessary for data whether it is in static state or dynamic. AWS comes in handy for this as it has many useful tools like AWS Key Management Service for managing encryption keys and keeping data confidential to maintain security levels.

Backup and disaster recovery: It is critical that you include automation for backups and also induce disaster recovery plans to safeguard data availability. This ensures safety in instances of unexpected failures. For this, you can utilize services like Amazon S3 that become valuable for data storage and backup.

Security audits and penetration testing: Regular monitoring of AWS environment is important to keep security threats under check. Conduct thorough and detailed audits at a consistent frequency for security compliance. Also, for detecting vulnerabilities, administer penetration testing. This will give you a heads up before any security threat occurs.

By complying with the above-mentioned security best practices, you can accentuate the protection of your React app to a remarkable level. Security should always be one of your primary objectives when deploying applications in the cloud.

Also Read: A Guide to Integrating Augmented Reality into Flutter

Strategic Cost Management on AWS EC2

Deploying your React application on AWS EC2 is a strategic move that is not only suitable for its strong performance and scalability but also beneficial for the cost-efficiency that it offers. AWS’s pricing structure is designed to provide adaptability and control over your costs. This ensures that you are paying only for the services that you are utilizing and this way you can scale your resources in line with your application’s needs. Here are some refined strategies to optimize your costs:

1. Right-Sizing: Start by assessing the exact demands of your application. AWS offers various EC2 instance types designed to cater to distinctive use cases. If you select an instance type that is in close alignment with your app’s resource needs, then you avoid paying for unutilized capacity. Tools like AWS Trusted Advisor can help you evaluate your usage patterns and also provide recommendations for instance types that fit your specific requirements.‍
2. Spot Instances: For workloads that are flexible in their timing, spot instances can prove to be extremely significant. They permit you to bid for unused EC2 capacity at an undoubtedly lower price than On-Demand instances. This is perfect for background processing, batch jobs, or any other task that can tolerate obstructions.‍
3. Reserved Instances: If you have predictable usage patterns, then you should decide to purchase Reserved Instances because it can lead to significant cost savings. By committing to a one-year or three-year term, you can see a huge cost reduction compared to On-Demand pricing. Additionally, AWS offers Convertible Reserved Instances, which enables you to alter the instance type if your needs evolve.‍
4. Auto Scaling: Implementation of Auto Scaling to adjust the number of EC2 instances automatically is based on the considerable demand. This ensures that you’re not over-supplying resources during low-traffic periods, which in turn helps in reducing costs.‍
5. Budgets and Cost Explorer: Use AWS Budgets to set customized budgets that put out an alert for you when your costs or usage exceed your projected or earlier thought-of budgeted amount. AWS Cost Explorer allows you to visualize and handle your AWS spending, thus helping you to recognize trends and uncover opportunities for further cost optimization.

By strategic and optimum implementation of these strategies, you can refine your AWS EC2 usage to ensure that you’re getting the best possible outcome from your cloud investment without any unnecessary expenditure. This approach not only helps in managing your budget by keeping your costs in check but also creates an alignment between your spending and your application’s growth and success.

Conclusion

We have included all the steps with great detail in this guide to help you complete the deployment process for your React app to AWS EC2 instance. The instructions shared here will not only assist you in the setup of the EC2 instance but will also help you access your deployed app in great detail. While you are conducting the setup, do not forget to monitor your EC2 instance. It is also pertinent that you stay updated with security patches and automate your back up process to safeguard data. If you follow this guide, it will help you with coherent functionality.

If you have queries, require any further assistance, or want to know how we can help you take advantage of the full potential of AWS for your projects, feel free to reach out. We specialize in cloud solutions like AWS and offer expert React development services to help you in your journey.