Search code examples
angularjsamazon-web-servicesamazon-elastic-beanstalkhttp-status-code-403

AWS Elastic Beakstalk - Giving 403 Forbidden Error after uploading Angular project into S3 Bucket (Hosting as static website)

A complete newbie to AWS but I have a client project I am trying to host on Elastic Beanstalk (Angular App)

Currently, I have a spring boot app that I managed to deploy successfully to AWS EB yesterday which serves the front end the data it needs based on API Calls. I am now trying to upload the front end side of the project into its own S3 Bucket and host it as a static website. As far as I am aware, I have made all access to the bucket public, but still get the 403 Forbidden - Access Denied.

This is what I get in the browser after following the link generated by AWS which apparently serves my static site:

403 Forbidden

The steps I have taken are as follows:

I have created a new Bucket called three-counties-medical and added the project folder containing the built files from ng build --prod. These get uploaded successfully.

The bucket contents are as follows:

Created Bucket

Bucket Contents

Once the bucket was created correctly with all of files added successfully, I then went to the Bucket Properties, scrolled down to the very bottom to Static Website Hosting and clicked Edit. I then enabled static website hosting and configured my index.html as the index page of the static website. The config looks as follows for the Static Website Hosting:

Static Website Hosting config

However, when I click the link created by S3, I get the 403 forbidden displayed in the browser.

In the Permissions Tab, I have turned Block all public access to OFF:

Config

Something else I have noticed is that the Bucket Policy is completely blank with no Json.

Whether this is correct I am unsure, but from reading various sources online, it became apparent that the site needs to be public so it can be seen from anyone (Im guessing?)

I have also tried to make every file accessible/public by clicking on the file going to the Actions dropdown and selecting - Make Public. However, the error still remains.

I have tried looking at this post also:

Similar Error

If anyone has any answers please let me know. There is obviously some problem with the deployment of the app or some sort of config.

Cheers!

*** Edit ***

I have now added the following Bucket Policy from this answer Answer

  {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": "arn:aws:s3:::three-counties-medical/*"
    }
  ]
}

But now I get a 404 - KeyNotFound index.html:

404 Error

But index.html definitely exists in the bucket!!

Solution

  • Ok so it turns out the issue was that I didnt have a Bucket Policy created. I then solved the 404 by deleting the contents of the bucket and then re-uploading the files in to the bucket rather than a folder containing the files. Guess this is why it could not find the index.html file!!

    If anyone has any issues like this then please ensure you have a Bucket Policy. You can use the one in this answer!