Access Denied after Deploying NuxtJs on AWS Amplify

If you are getting similar error after deploying NuxtJs on AWS Amplify:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>69F14474972D101F</RequestId>
<HostId>
...
</HostId>
</Error>

Here is the solution that might work for you.

Step 1. Update Build Settings

Login to AWS Amplify > Select the App > Build settings > Click on Edit.

• Set the build commands to npm run generate
• Set the baseDirectory location to be dist or dist/ whichever works for you.

Your amplify.yml will look like:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run generate
  artifacts:
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Step 2. Rewrites and redirects

Click on Rewrites and redirects > Edit > Open text editor and enter following:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

Then click on Save.

After completing these steps, redeploy the app, it should work.