How to automate angular deployment for AWS S3 Angular Website?

[admin]

If you have hosted your angular app to AWS S3 then you can automate your ng build -prod and drag and drop to S3 bucket by simply following below steps -

Step 1 - Add @jefiozie/ngx-aws-deploy to your project and for this run below command (your angular CLI should be up-to-date)

Code: Select all

ng add @jefiozie/ngx-aws-deploy

Step 2 - Provide necessary details to the terminal while step 1 is in progress.
You will be prompted for a couple of questions:
Your AWS Region
The bucket you would like the files to be uploaded.
The Secret Access Key
The Access key Id
The folder where the files should be uploaded (optional)

Step 3 - Verify the details you have provided is correct, open angular.json and search for deploy and should be able to see below code -

Code: Select all

angular.json is update with a new builder:

"deploy": {
    "builder": "@jefiozie/ngx-aws-deploy:deploy",
    "options": {
    "region": "YOUR REGION",
    "bucket": "YOUR BUCKET",
    "secretAccessKey": "YOUR SECRET ACCESSKEY",
    "accessKeyId": "YOUR ACCESS KEY ID"
    }

You can get your access key id and secret access key in your AWS console. Region you can see in your S3 url and bucket name you already know but if you can see it in your url.

Step 4 - Run ng deploy command and it will build and deploy your app to S3.

All Done

Extra Bits-
If after following all above steps you run into trouble and get below error -

Code: Select all

403 Forbidden
Code: AccessDenied
Message: Access Denied

Then the solution is to specify bucket policy, for this go to S3 and then your bucket and then permission, there you will find bucket policy, just paste below code and click save.

Code: Select all

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name-here/*"
            ]
        }
    ]
}

In above code replace the word your-bucket-name-here with your bucket name and click on save.

All done, refresh the page and your app will up and running.