AWS Angular and React Apps

From bibbleWiki
Revision as of 03:33, 9 June 2022 by Iwiseman (talk | contribs) (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...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.