A step to step guide: Hosting your frontend application in Amazon S3
In this blog, l am going to be writing on hosting and deploying your frontend application (React JS/ Angular) to Amazon S3 in less than 10mins. In developer terms, Amazon S3 is a scalable cloud storage service provided by AWS. It allows developers to store and retrieve any amount of data. In this case, we are going to use S3 to seamlessly host static websites at insignificant costs.
Step 1: Creating the Amazon S3 Bucket
Sign into your AWS Management Console
Navigate to the Amazon S3 service
Under the S3 console,General purpose buckets tab, click “Create bucket” and follow the prompts to create the bucket.
Your bucket Name should be unique globally
Your bucket should be in a specific AWS Region of your choice
Leave Object Ownership to "ACLs disabled (recommended)"
Under Block Public Access settings for this bucket, untick "Block all public access" to allow public read access to the bucket objects, then tick the acknowledgement box for unblocking public access
Leave the next options to default and click "create bucket"
After the bucket has been successfully created, navigate the bucket and click on Properties
Scroll to the bottom and click "Edit" on Static website hosting
Select "Enable"
Choose "Host a static website" under Hosting type
Type "index.html" in the Index document form
Also Type "index.html" again in the Error document form
Click "Save Changes" and navigate back to Properties
If you navigate down to "Static website hosting", thats where you find the website URL
Configure the Bucket Security
Navigate to Permissions
scroll to Bucket Policy and click Edit
Copy and paste the following policy, then edit the arn, replacing with your bucket name
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
}
]
}
Replace "YOUR-BUCKET-NAME" with your BUCKET NAME
Save changes
Step 2: Configure Your Frontend Application for Deployment
Build your application
Navigate to the application's root folder
Open your code Editor's terminal and type your build command:
Angular
ng build
React
npm run build
Step 3:
Deploying Your Application to S3 Options
Manually Uploading
Programmatic deployment Coming soon
CICD with Code Pipeline Coming soon
Manually Uploading the built code
Open you Amazon s3 bucket and click "upload"
click "Add files"
Browse in your local computer to the root folder of your application
Locate the build folder and open it (Usually "dist")
locate the folder with your index.html file and select all the files in that folder, then click open and upload
Now visit your website URL to access the application , located in your s3 bucket, under properties→Static website hosting