nextjs s3에 올리기

프로젝트가 이미 있다고 가정하겠습니다.

순서는 간단합닌다.

 

방법

npm install

 

npm run build

 

하고 out 폴더에 있는 내용을 s3에 올리기만 하면됩니다.

 

 npm run dev는 현재 경로에서 실행

 

 

 

build 이후 에러

그런데.. 

 

이파일 전체를 올리면 안될것같음

 

npm run build를 한후 out 폴더만 올리면 된다고한다.

 

그래서 npm run bulid를 해봤지.

 

Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element

이건 아닌듯....

 

eslintrc.json 수정

420:49  Error: `>` can be escaped with `>`.  react/no-unescaped-entities
421:18  Error: `>` can be escaped with `>`.  react/no-unescaped-entities

에러 발생하며 빌드가 실패.

두가지 에런데 첫번째걸로 검색해서 성공하긴했는데 예상으로는 두번째인 escape 같다.

왜냐면 또 warning 떴기 때문.

 

 

.eslintrc.json 파일에서 다음을 추가

 

  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }

 

 

추가후 저장하고 다시 build를 해보았다.

 

https://nextjs.org/docs/basic-features/eslint#disabling-rules

Basic Features: ESLint | Next.js

빌드는 성공했으나 out 폴더가 생성이 되지 않았다.

 

 

 

package.json 수정

package.json 에서

다음(next export)을 추가합니다.

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }

 

next.config.js 수정

그다음 npm run build를 실행하였다.

 

 

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api

빌드는 됐는데 out폴더에 파일이 제대로 안들어왔다. 

이미지가 최적화가 안됐다고 하면서

실행해서 최적화하라고하거나 해당기능을 끄라고한다.

프로젝트에 이미지가 완전히 올라온게 아니기 때문에 끄기로 했다.

 

next.config.js 파일에 들어가서

modules.exports를 수정을한다.

처음에 module.exports = next.js 였나 로 되어있는데

짜증이나서 그냥 바꿔줬다. 기본값이라고 생각했다.

 

module.exports = {
  images: {
    unoptimized: true,
  },
}

 

 

 

위 로그 뜨면서 out폴더에 파일이 제대로 들어왔다.

그리고 s3에 올리면 됩니다.