인프런 커뮤니티 질문&답변

SJ님의 프로필 이미지
SJ

작성한 질문수

지금 당장 데브옵스 AWS

프런트엔드 실행

s3 배포

작성

·

253

0

안녕하세요 저는 next 로 배포를 하고있는데요.

.next 폴더로 되어있는것을

/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: 'build',
}

module.exports = nextConfig

이용해서 build 폴더가 생기게 했구요 .

이후

 

스크린샷 2024-01-28 오전 11.11.02.png

이후 s3 에 그대로 전부 올렸습니다.

그리고 s3 에 나와있는 정적 주소로 들어가게 되면 ,

스크린샷 2024-01-28 오전 11.12.15.png

이렇게 나오게 되는데 어디가 문제일까요 ?

답변 2

0

지금 당장님의 프로필 이미지
지금 당장
지식공유자

안녕하세요.

Next.js 는 해당 강의에서 다루지 않아서 설명을 드리기 어렵습니다.

아래내용은 gpt4 에게 질문한 내용인데요. 해당 내용을 먼저 테스트 해보시는 것을 추천드립니다.

감사합니다.


Next.js 애플리케이션 빌드:

  • Next.js 프로젝트의 루트 디렉토리에서 next buildnext export 명령어를 사용하여 정적 파일을 생성합니다.

  • next export 명령은 out 폴더에 정적 파일을 생성합니다.

0

안녕하세요, 인프런 AI 인턴입니다.
SJ님, S3에 정적 파일을 업로드한 후 404 Not Found 에러가 발생하는 상황에 대하여 답변 드리겠습니다.

404 에러는 업로드한 파일의 경로가 웹 서버에 맞지 않거나, 파일 자체가 없을 경우 발생합니다. Next.js의 경우 build 폴더 밑에 생성된 정적 파일들을 S3에 올릴 때 올바른 경로 설정이 필요합니다. 본문 내용으로 보았을 때, 몇 가지 가능한 문제를 점검해볼 수 있겠습니다.

  1. S3 버킷 설정: S3 버킷을 정적 웹사이트 호스팅으로 설정하였는지 확인해보세요. 이 설정을 통해 S3 버킷이 웹 사이트처럼 동작할 수 있습니다.

  2. index 문서 및 에러 문서: S3 버킷의 정적 웹사이트 호스팅 설정에서, 메인 페이지를 나타내는 ‘index 문서’를 설정해야 합니다. 일반적으로 Next.js의 경우 index.html 이 그 역할을 합니다.

  3. 파일 경로: 빌드된 파일들을 S3 버킷의 최상위가 아닌, 올바른 경로에 업로드하였는지 확인하십시오. Next.js는 out 폴더 또는 설정한 대로 build 폴더에 정적 파일을 생성합니다. 이 폴더 전체를 S3로 올리셔야 합니다.

  4. 파일 업로드 방법: 파일을 S3에 올릴 때, 필요한 메타데이터와 함께 업로드가 되었는지도 확인해야 합니다. 예를 들어, HTML, CSS, JS 파일은 올바른 Content-Type으로 설정되어야 하며, 디렉토리 구조가 변경되지 않도록 주의해야 합니다.

  5. 캐싱: S3나 CDN에서 캐싱된 오래된 버전의 사이트로 인해 발생할 수도 있으니, 캐시를 지우고 다시 시도해보시는 것도 한 방법입니다.

문제가 해결되지 않는 경우, build 폴더의 구조와 S3에 어떤 식으로 업로드하였는지, 그리고 사용하고 있는 정적 호스팅 설정을 자세히 살펴볼 필요가 있습니다.

SJ님의 프로필 이미지
SJ

작성한 질문수

질문하기