Deploying a Full Stack Application Into Cloud:

Deploying a Full Stack Application Into Cloud:

Tech Stack: S3 Bucket(For React Deployment) + Elastic Beanstalk(For Spring Boot Deployment)

Here we are having a Full Stack Application - the Front end being React and the Backend is a Spring Boot API interface which is doing all the CRUD operations.

In this documentation we will be learning how we can deploy a Full stack application on the AWS Cloud.

There are basically 2 parts to this:

  1. The Backend Spring Boot Application will be deployed to the cloud using the ELASTIC BEANSTALK offering of AWS.

  2. The Frontend will be deployed as a Part of the S3 bucket.

Let's move to 1st Section:

Deploying Spring Boot App into the AWS Cloud :

As we have discussed in my previous Blog: We need to Run a Maven Build of your application.

Then create an application -> then create an environment -> then Upload and Deploy the .jar File that was generated as a part of the Build as follows:

After you are done - check that the health Status in OK or Not.

If Okay then you are good to go for the next Step:

Deploying the Front End React App into S3 Bucket:

Now after you are done with the above step.

Now Go to your React application:

Update the API_URL in your configuration file with the Spring Boot deployed URL - on which the application was deployed in step 1.

Now go to the command prompt-and run the following commands:

$ npm start (This is used to launch our Frontend application)

$ npm run build (There will be a Build Folder created - after the script run , and that is being used to Upload to the S3)

Once the above command is run - after Sucess!You will be able to see the build folder with all the required files as follows:

Now , lets move our attention to creating an S3 Bucket in the AWS:

Go to AWS Console -> Select S3:

Then Select: Create Bucket

Now Give a name to the bucket and set the other configurations as provided in the snapshots below:

Then Select Create Bucket !And you can then see the Bucket being created and will be visible in the dashboard.

Now select the bucket as follows:

Now lets upload the -> Build File that we created in our React code:

Now click on Upload:

Now go to Properties and Navigate to Static Website Hosting->

Now Edit> Enable Static Website Hosting

Fill The information as above.

NB: The static website hosting is done - to let the S3 bucket be deployed as a website.

After the above step is done:

Now let us set the permissions so that it is publicly accessible:

So now lets move to - Permissions Tab

Now Go to Bucket Policy> Edit:

Also Uncheck the Block Access Policy beforehand as follows:

It can be found in Permissions> Block Accces Policy:

Now lets come back again to Bucket Policy:

Add the following policy->

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::fullstack-app-qa/*"
        }
    ]
}

Note: The Bucket ARN is the "Resource" Field in the JSON Policy

Paste and Save the changes!

Yeah! Now finally your application has a Public Access and Hurrah! You are done with deploying the frontend in S3.

Now we can check and access the s3 Bucket Link and do your operations.The Front-end will call the Backend which is hosted on AWS by the elastic beanstalk.