AWS Angular and React Apps: Difference between revisions
Created page with "=Introduction= This page is about using AWS and Angular and how to provision the apps in AWS =S3= This is a easy approach for simple all in one app. I.E. no database or other communication. Steps to do this are *Create a bucket *Grant Permissions *Upload Bucket ==Create Bucket== Nothing special except the naming of the bucket as it determines the URL of the app. So a bucket named bill-angular-prod-app will have a URL of http://bill-angular-prod-app.s3-website-ap-southeas..." |
|||
| Line 26: | Line 26: | ||
==Upload Bucket== | ==Upload Bucket== | ||
No issues here just point you upload folder. Here is a picture to help.<br> | No issues here just point you upload folder. Here is a picture to help.<br> | ||
[[File:S3 Bucket Angular.png | | [[File:S3 Bucket Angular.png | 800px]] | ||
Revision as of 03:33, 9 June 2022
Introduction
This page is about using AWS and Angular and how to provision the apps in AWS
S3
This is a easy approach for simple all in one app. I.E. no database or other communication. Steps to do this are
- Create a bucket
- Grant Permissions
- Upload Bucket
Create Bucket
Nothing special except the naming of the bucket as it determines the URL of the app. So a bucket named bill-angular-prod-app will have a URL of http://bill-angular-prod-app.s3-website-ap-southeast-2.amazonaws.com where ap-southeast-2 is the region. You will need to enable Static website hosting under properties for this to work.
Grant Permissions
To allow public access you will need to disable Block public access which is on by default. Additionally you will need to add a Bucket policy. I did not have permission for mine but was able to on another account. <syntaxhightlight lang="json"> {
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPermission",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bill-angular-prod-app/*"
}
]
} </syntaxhightlight>
Upload Bucket
No issues here just point you upload folder. Here is a picture to help.
