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:
The Backend Spring Boot Application will be deployed to the cloud using the ELASTIC BEANSTALK offering of AWS.
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.