next를 Amplify로 배포할때 이슈

react와 마찬가지로 next js 를 Amplify로 배포할때 이슈가 여러가지 있었다.

처음에 배포할때는 이상이 없었지만 여러번 배포를 진행하면 pc는 문제가 없는데 스마트폰에서 확인을 하면 이미지를 못 가져오고 작동이 안되는 이슈가 생겼다.

그래서 구글링을...해보았다.
하지만 구글링을 해도 내가 원하던 답을 찾기 어려웠다.

그래서 생각을 하다가 캐시에 뭔가 문제가 생기는거 같아서 amplify에 들어가서 빌드 설정을 보니

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

이런식으로 되어 있었다.

저 아래에 cache영역과 연관이 있어 보여서 직접 모바일 폰으로 들어가서 console을 보았는데
next/ ... 이런 게 오류가 나오고 있는 상황이었다.

그래서 이 부분이 확실해 져서 구글에 검색 하여 보니 빌드 설정에 paths 에 - .next/cache/*/ 을 추가하라 해서 추가 후 여러번 배포 해도 그런 일이 발생 하지 않았다.

npm run build 후에 push를 진행하는게 좋다.