There are many platforms available for deploying applications, such as AWS, Azure, and GCP. Each platform comes with its own set of advantages, disadvantages, and learning curve. For this blog post, I'll focus on AWS.

In particular, I'll be demonstrating how to deploy a React application using AWS S3 (Simple Storage Service) and AWS CloudFront.

If you would like to follow along with this blog, ensure that you build your React project and keep it handy. If you are not familiar with creating a build for React, simply use the commands below in your React project.

npm run build
# or
yarn build
# or
pnpm build

If you don't have a React project, don't worry—I've got you covered. You can pull the repository I'm demonstrating in this blog.

#clone the repo
git clone https://github.com/giripatel/deployment-frontend.git
#point your terminal
cd deployment-frontend

Before diving into the process, let's first understand what Object Storage and CDN are.

Object Storage

An Object Storage is a type of data storage architecture designed to manage and store data as objects, rather than as files in a hierarchical file system or as blocks in a block storage system. Object storage is often used in cloud computing environments and is particularly suited for storing large amounts of unstructured data, such as images, videos, documents, backups, and log files.

CDN (Content Delivery Network)

A content delivery network (CDN) is a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.

Deployment Process

1. Object Store Setup

2. CDN Configuration

Object Store Setup

1. Log in to your AWS account.

2. Search for 'S3' in the search box and select it from the results.

3. 

   Click on ‘Create bucket’.

4. 

   Select 'General Purpose' and provide a name for the bucket.

5. 

   Scroll to the bottom and click ‘Create Bucket’.

6. 

   Choose the zone closest to you to ensure low latency.

7. 

   Select the newly created bucket to proceed with further configurations.

8. 

   You will be redirected to the Upload page. Make sure to have your build folder ready.

   

9. Drag and drop the build you created earlier in the blog. Alternatively, you can push the build to S3 programmatically. AWS provides an S3 package that simplifies this process.

10. 

    Scroll to the bottom of the page and click Upload.

11. 

CloudFront Setup

1. Type 'CloudFront' in the search box and select the highlighted option shown in the screenshot.

2. 

   Click on ‘Create a CloudFront distribution’.

3. 

   Select the recently created S3 bucket in the 'Origin Domain' field.

4. 

   Choose 'Origin Access Control Settings,' then click on 'Create New OAC.'

   What is OAC?

   Origin Access Control (OAC) is a feature in CloudFront that allows you to restrict direct access to content stored in your origin, such as an Amazon S3 bucket or a web server. This ensures that users can only access the content through the CDN distribution, preventing direct access via the origin URL.

5. 

   Select the S3 bucket you created earlier, if it is not already selected. Choose 'Sign Requests' and click 'Create'.

6. 

   Scroll down a bit and choose ‘Enable security protections’.

7. 

   Type 'index.html' in the 'Default Root Object' field. This file will be returned to users who visit the website at the '/' path.

8. Click on “Create distribution” to complete the creation of CloudFront.

9. 

   Click on 'Copy Policy' in the third popup. This will copy a policy to be used for S3 bucket permissions. Make sure to keep it safe and easily accessible.

10. 

11. The CloudFront distribution has been successfully created. The 'Distribution Domain Name' is the URL used to access the website you have created.

    

12. If you attempt to access the website, the browser will respond as shown below.

13. 

    To resolve this, open the S3 bucket configuration mentioned in the above “Object Store Setup” (Step 7) and select 'Permissions.'

14. 

    Click on 'Edit.' This will open a text area where you can paste the policy copied in the previous step.

15. 

    Paste the Policy in the text area and click ‘Save’.

16. 

    Try to access the same URL that we tried before, You should now be able to access the webpage.

    Congratulations 🎉 we are almost there.

17. 

    Now, try accessing another page of your application.

    If you are following the same React project used in this blog post, navigate to <Your URL>/info in your browser.

    If you encounter the same error as shown below, we'll need to make some changes to the CloudFront configurations.

18. 

    Open the CloudFront distribution and click on ‘Error pages’.

19. 

    Select the HTTP error code as ‘403: Forbidden’ and choose the ‘Customize error response’ as ‘Yes’.

    In the ‘Response page path’ type ‘/index.html’ and the response code as ‘200 OK’.

    The reason for the error is that CloudFront is attempting to locate the '/info' file in S3, which does not exist.

    To make sure all requests are routed to ‘index.html’ we have to configure it in ‘Error pages’.

20. 

    If you try accessing the route or page (in my case, '/info') in the URL, you'll see the response below. This confirms that we are successfully redirecting all requests to '/index.html'.

What more can you do?

• Add a custom domain.

Have you ever thought about building an application and making it available to everyone on the internet?

First, you pick a programming language whether it’s JavaScript, Java, Rust, or Python, whatever gets the job done. You’ll likely start by building your backend, maybe with Node.js for JavaScript or Spring Boot if you’re into Java.

Next comes the frontend. You might create using raw HTML, CSS and JavaScript else dive into React or Angular (I’d personally go with React 😌). Why not Angular? Well, that’s a whole debate for another blog post!

So, now you’ve built a beautiful frontend and a powerful backend. But what's next?

You need to make it accessible to everyone online. That’s where deployment comes in—it’s the process of making your application available on the internet so others can interact with it.

Deployment Process

The deployment process is generally divided into two categories (let's ignore server-side rendering (SSR) for now):

1. Backend Deployment

2. Frontend Deployment

You might wonder, why there isn’t the same process for both.

Let’s explore this with an example: LinkedIn.

When you visit LinkedIn, the website’s frontend looks the same for everyone. But the content like connections and posts varies from user to user. My connections and posts are different from yours, right?

So, while we can cache static frontend pages to serve everyone quickly, the backend needs to handle dynamic content hence it gives unique responses to each user. This means caching the backend isn’t always practical because the data (like posts or connections) changes frequently based on who's logged in.

Frontend

Given these differences, we deploy the frontend and backend in different ways:

• Frontend Deployment: For the frontend, we use object stores and Content Delivery Networks (CDNs) to serve static content efficiently.

  

• Backend Deployment: For the backend, we typically use Virtual Machines (VMs) to handle requests and deliver unique responses for each user.

  

Conclusion

Now that you understand the differences between Frontend and Backend deployment, it's time to dive deeper into deployment specifics. If you are ready to explore a step-by-step guide for backend deployment, check out the below post where we cover everything from setting up your environment to handling real-time requests.

There are many platforms available for deploying applications, such as AWS, Azure, GCP, and Vultr. Each platform comes with its own set of advantages, disadvantages, and learning curve. For this blog post, I'll focus on AWS.

In particular, I'll be demonstrating how to deploy a Node.js project using AWS EC2, which is a type of Virtual Machine (VM) provided by AWS. The project is hosted on GitHub, and if you’d like to follow along with the deployment process, please proceed with the steps below. Otherwise, feel free to explore the blog post for general insights on backend deployment.

Deployment Process

The deployment process is divided into 2 parts

1. Server setup

2. Code Deployment

Server Setup

1. Login to your AWS account.

2. Search for EC2 in the search box and select EC2 (Elastic Cloud Compute).

   

3. Click on “Launch Instance”.

4. 

   Choose a name for your instance. It can be anything, but make sure it's something you can easily identify if you have multiple instances.

5. 

   Select “Ubuntu” as the operating system.

6. 

   Choose the instance size based on your requirements. For this demo, I will use the 't2.micro' instance.

7. 

   Click on “Create new key pair”.

8. 

   Create a key pair with a name of your choice. Clicking 'Create Key Pair' will generate a key value pair and download it to your device. Ensure you store the private key securely, as it will be required to access the instance you're about to create.

9. 

   Allow SHH, HTTPS, and HTTP traffic, from anywhere(0.0.0.0/0). Clicking on Launch instance will create an Instance. Keep the IP address of the server handy.

10. 

    With these steps, we've successfully created the server. Before deploying, we'll need to configure additional settings to access our API after deployment.

11. If you can't find the highlighted launch wizard, simply click on the instance you just created and then select 'Launch Wizard'.

    

12. To allow traffic to access our application on port 3000 from any location, modify the inbound rules by adding the highlighted rule and then click 'Add Rule'.

    Why port 3000?
    In this example, the application is configured to listen for incoming requests on port 3000, which is commonly used for web applications, particularly in development environments.

    

We've successfully completed the server setup! Now, let’s dive into deploying the code.

Code Deployment

1. Open your terminal and navigate to the directory where your <file name>.pem file (key) is stored. Then, use the following commands to SSH into the server we created.

    chmod 700 <file name>.pem # change the permissions
    ssh -i <file name>.pem ubuntu@<ip of the server> # replace with your server IP
   

   The SSH session might look something like this, though it varies depending on your OS.

2. 

   The application we are using as an example is written in Node.js. To run this application, Node.js must be installed on the server. Use the following commands to install Node.js.

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash #install nvm
    source ~/.bashrc #reread bashrc
    nvm install --lts #install lts version of node js
    node --version #check node version
   

3. Clone the example application repository. To run the application, install the necessary packages and start it using the following commands.

    git clone https://github.com/giripatel/deployment-backend.git # clone repo
    cd deployment-backend
    npm install # install packages
    node index.js
   

4. Use the server’s IP address and Port 3000, as the URL in your browser’s search bar or in Postman to access the API.

   

What more can you do?

• Add an SSL certificate to secure the site and remove the "Not secure" warning.

• Configure DNS for the server's IP address to use a custom domain.

• Set up a reverse proxy to eliminate the port number from the URL.