Github, Codecommit, Codepipeline, S3 Hosting and bucket policies

I have been meaning to create a Github repository for my code for a while; I was deciding between hosting my code on Github vs Codecommit. Today after working with Codecommit I realized that I will host my code on Github and clone my repository over to Codecommit when needed.

I have some issues with Codecommit, but the worst one by far is that I cannot easily load multiple files without using the CLI. Github is free and also has a much more familiar interface. My public repository can be seen here:

https://github.com/alkisnar/Wordpress-AlkisnarIO

I created a local folder and used Github’s windows program to sync this folder to my repository online. Then I used the CLI to push this folder’s files to AWS using the following command:

git push https://git-codecommit.us-east-1.amazonaws.com/v1/repos/Wordpress-AlkisnarIO --all

Next I used Codepipline to link to create an automatic deployment target for my Local website files. This allows automatic deployment to S3 rather than uploading each change to S3 online. After releasing my first change I noticed that all my pictures were not showing up. After looking at the error logs on chrome (press f12 and look for the red messages on the bottem right), I noticed the following error for all my pictures:

Failed to load resource: the server responded with a status of 403 (Forbidden)

I looked back at S3 and noticed that the permissions for all my pictures reset to the bucket default which is restricted except for the Origin Access setting for Cloudfront. I opened up the bucket policy and added code in to permanently allow three pictures on my landing page to always load, the json looks like:

{
    "Version": "2012-10-17",
    "Id": "**************",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity **********"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.alkisnar.io/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::www.alkisnar.io/Business.jpg",
                "arn:aws:s3:::www.alkisnar.io/casual.jpg",
                "arn:aws:s3:::www.alkisnar.io/StyleSheetAlkisnarIO.css",
                "arn:aws:s3:::www.alkisnar.io/resume.png"
            ]
        }
    ]
}

After matching case this now shows the proper page with the proper pictures. I will continue to use this CICD foundation to code more projects.