I’ve created a CI/CD implementation of building my Angular 4 applications on AWS S3.  Here’s one of my YAML configuration:

version: 0.2

env:
    variables:
        S3_BUCKET: "s3-bucket-name"
        BUILD_ENV: "prod"
        CLOUDFRONT_ID: "EXX11223344"
            
phases:
    install:
        commands:
        - echo Installing source NPM dependencies...
        # Need https driver.
        - sudo apt-get update -y
        - sudo apt-get install -y apt-transport-https
        # Install Yarn.
        - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
        - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
        - sudo apt-get update -y
        - sudo apt-get install -y yarn
        # Install Angular CLI
        - yarn global add @angular/cli@1.4.2
        # Install node dependancies.
        - yarn
    build:
        commands:
        # Builds Angular application.
        - echo Build started on `date`
        - ng build --${BUILD_ENV}
    post_build:
        commands:
        # Clear S3 bucket.
        - aws s3 rm s3://${S3_BUCKET} --recursive
        - echo S3 bucket is cleared.
        # Copy dist folder to S3 bucket
        - aws s3 cp dist s3://${S3_BUCKET} --recursive
        # STEP: Clear CloudFront cache.
        - aws configure set preview.cloudfront true
        - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_ID} --paths "/*"
        - echo Build completed on `date`
artifacts:
    files:
        - '**/*'
    discard-paths: yes
    base-directory: 'dist*'

Problem

I’m getting build errors at the “post_build” phase: An error occurred (AccessDenied) when calling the PutObject operation: Access Denied

So this appears to be a permission issue which was not taken care of at the AWS policy level.  My old AWS policy for this CodeBuild project:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1506491253000",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Sid": "Stmt1506491270000",
            "Effect": "Allow",
            "Action": [
                "s3:DeleteObject",
                "s3:ListBucket",
                "s3:ListObjects",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::s3-bucket-name"
            ]
        }
    ]
}

After several troubleshooting steps, and a run to Jack in The Box, I believe I was missing adding additional resources.

Solution

Thinking about the error more and more that I realized I also needed to add the additional resource entry for all files/folders (not just the bucket).  Here’s the solution on the AWS Policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1506491253000",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Sid": "Stmt1506491270000",
            "Effect": "Allow",
            "Action": [
                "s3:DeleteObject",
                "s3:ListBucket",
                "s3:ListObjects",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::s3-bucket-name",
                "arn:aws:s3:::s3-bucket-name/*"
            ]
        }
    ]
}

All I did was add the “/*” equivalent to tell AWS that I also want the contents to have those permissions.