NextJs 503 error randomly happening with custom Cache-Control header

[utsavbshah]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

Region

us-west-1

Amplify Hosting feature

Custom headers

Describe the bug

I am getting random 503 errors for the build related files. i.e. while accessing the css and js files I am getting 503 error from the CloudFront.

The response should be cached in the CloudFront but the request goes to the origin and in the error logs it gives OriginError. In my logs file I am getting,

x-edge-result-type: Error x-edge-response-result-type: Error x-edge-detailed-result-type: OriginError

Expected behavior

There should not be any 503 errors.

Reproduction steps

This is fully random behaviour so there is not any reproduction steps for this.

Build Settings

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use $VERSION_NODE_16
        - npm install
    build:
      commands:
        - nvm use $VERSION_NODE_16
        - npm run build:stage
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

Additional information

My customHeaders.yml file: customHeaders:

• pattern: '**/*.html' headers:
  • key: Cache-Control value: 'public, max-age=0, must-revalidate'
• pattern: '**/*[!.html]' headers:
  • key: Cache-Control value: 'public,max-age=31536000,immutable'