For those whom the first solution does not work, also make sure that the
project-config.json file is configured correctly. That can also cause the AccessDenied error (as I just learned the hard way).
Amplify expects your app entrypoint (index.html) to be at the first level within the directory you have configured. So if you accept the amplify default config (
dist) and are using a project that puts the built files at a deeper level in the hierarchy (
dist/<project name> in the case of angular 8), then it manifests as a 403 AccessDenied error after publishing. This is true of both the amplify and s3 hosting options.
docs: https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html (see the end)
Thanks for the additional information.
S3 Bucket Policy looks Ok.
Origin Domain name or Path, It is always
S3bucket appears in the drop down so no need to update it with
However there is one setting missing in your
you need to select
Restrict Bucket accessto
If you want to require that users always access your Amazon S3 content using CloudFront URLs, not Amazon S3 URLs, click Yes. This is useful when you are using signed URLs or signed cookies to restrict access to your content. In the Help, see “Serving Private Content through CloudFront
select Existing Identity
- Click on Create button to save Origin.
While the answer by @raj-paliwal helped me tremendously solving my original problem, Amplify has since fixed the problem with a new option.
If you type
Amplify add hosting (or
Amplify update hosting for an existing site), Amplify gives you the option of
Hosting with Amplify Console.
Choosing this will also create a hosting environment with S3 and CloudFront, but Amplify will manage everything for you. With this option I had no problems at all. It seems that this first option fixes the bug I encountered.
If you want to upgrade an existing site from manual CloudFront and S3 hosting to a
Hosting with Amplify Console, you have to call
amplify update hosting and select the new option.