Steps to deploy the React Application in Amazon S3
Step1 (Login to AWS Console): Go to https://console.aws.amazon.com and Login to your AWS Console.
Step2 (Create Bucket): Search S3 Bucket page and go there. Click upon the “Create Bucket” button.
Step3 (Update the Public Access Permission): By default, the “Block all public access” field will be checked. This should be unchecked, else the bucket will be private and nobody can access our website.
Now, at the end you see the “Create Bucket” button, click upon that and your bucket will be created. It will look like this.
Step4 (Add Bucket Policy): Go to “Permissions” tab and click upon “Edit” button in Bucket Policy section. Now, click upon the “Policy Generator” button.
You can create a policy here. Select Type of Policy as “S3 Bucket Policy”. In Principal, write “*”. In Actions, select “getObject” action. In ARN, copy your bucket ARN and click upon “Add Statement” button. A new button “Generate Policy” will be visible. Clicking upon that button will generate your required policy.
XML
{ "Id": "Policy1694774324793", "Version": "2012-10-17", "Statement": [ { "Sid": "Stmt1694774318358", "Action": [ "s3:GetObject" ], "Effect": "Allow", "Resource": "arn:aws:s3:::gfg-react-app/*", "Principal": "*" } ] } |
Now, add this generated Bucket Policy in Bucket Policy section. This allows everyone to access the S3 objects using the S3 website endpoint.
Step5 (Upload files): Now, come to “Objects” tab and upload all the files present in the “build” directory.
Step6 (Static Site Hosting): Now, go to “Properties” tab and at the end, you can find “Static Website Hosting”. Edit it like the pictures given below and Save changes.
Congrats!!! Your React Application is hosted successfully in Amazon S3 bucket.
Deploy a React Application with AWS
AWS is a subsidiary of Amazon & offers a broad range of cloud computing services, which means services using their infrastructure which is hosted on various data centers all over the world which we can rent to run our own solutions.
Contact Us