[Next.js] 빌드와 배포

DU·2024년 7월 8일

Next.js

목록 보기
3/16
post-thumbnail

개발을 끝냈다 치고 우리가 만든 것을 사용자에게 배포는 어떻게 하는지 알아봅시다.

개발자 도구에서 Network탭을 통해 resources를 확인 할 수 있는데, 이는 서버에서 클라이언트로 전송한 용량을 나타내는 것입니다.

콘솔창을 열면 개발을 위한 여러가지 정보를 출력하는데, 이 또한 비효율적이며 때로는 보안상의 문제가 될 수 있기 때문에 용량을 작게 줄이고 불필요한 메세지를 출력하지 않는 실서버의 최적화된 버전이 필요한 것입니다.

일단 package.json파일을 열어봅시다.

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

이 코드에 프로젝트를 유지보수하기 위한 여러가지 명령들이 있습니다. 그 중에 dev를 봅시다. npm run dev를 사용하면 next dev가 실행되는 것입니다.

그 외에 buildstart가 있습니다. build는 실서버를 위한 배포판을 만들기 위한 명령어이고 start는 그 배포판을 서비스하는 명령입니다.

  1. 이제 개발환경을 일단 꺼봅시다. 터미널에서 Ctrl+c를 누릅니다.
  2. 다음 명령어를 터미널에 입력하여 배포 가능한 버전의 애플리케이션을 생성합니다:
npm run build

이 명령어를 실행하면 .next 폴더에 배포 가능한 애플리케이션이 생성됩니다

  1. 생성된 배포 버전을 실행하기 위해 터미널에 다음 명령어를 입력합니다:
npm run start
  1. 이 명령어는 .next 폴더의 내용을 바탕으로 서비스를 시작합니다.

이렇게 하면 resources에서는 그 전과 굉장히 큰 차이를 보입니다.
각자의 local 이 사용자에게 서비스 할 수 있는 네트워크 환경을 모두 갖추었다면 local로 들어오는 ip adress나 domain을 사용자에게 주면 이 서버가 실제로 next.js로 만든 프로젝트를 서비스하기 시작하기에 배포가 끝났다고 알 수 있습니다.

0개의 댓글