next.js에서의 포트 설정 방법

next.js에서의 포트 설정 방법

하나의 응용 프로그램이 포트 3000에서 실행되고 있으며 기본 포트의 다른 포트에서 다른 응용 프로그램을 실행합니다.리액트 넥스트.js에서의 변경 방법package.js 스크립트는

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

start script 명령어는npm run dev

이것은 나에게 효과가 있다.

 "scripts": { 
       "dev": "next dev -p 8080",
       "start": "next start -p 8080",
},

"scripts": {
    "dev": "next dev -p 8080", // for dev 
    "start": "next start -p 8080" // for prod
},

필요한 것은 다음과 같습니다.

yarn dev -p PORT_YOU_LIKE

응용 프로그램은 기본적으로 http://localhost:3000에서 시작됩니다.기본 포트는 다음과 같이 -p로 변경할 수 있습니다.

 npx next dev -p 4000

또는 PORT 환경변수를 사용합니다.

PORT=4000 npx next dev

#npm이 아닌 npx를 사용한 것에 주의해 주세요.

또, 호스트명을 디폴트인 0.0.0.0 와 다르게 설정할 수도 있습니다.이것은, 네트워크상의 다른 디바이스에서 애플리케이션을 사용할 수 있도록 하는 경우에 도움이 됩니다.디폴트 호스트명은 다음과 같이 -H로 변경할 수 있습니다.

 npx next dev -H 192.168.1.2

포토가 이미 사용되고 있는 에러가 발생했을 경우, Windows 로 해결할 수 있는 것은 다음과 같습니다.

Go to the Task Manager.

Scroll and find a task process named. Node.js: Server-side

End this particular task.

여기에는 다음 두 가지 방법이 있습니다.

고객님의 고객명package.json파일, 추가-p 8080dev/start 스크립트로 이동하여 포트 8080에서 서버를 부팅합니다.

  "scripts": {
    "dev": "next -p 8080",
    "build": "next build",
    "profile-build": "next build --profile",
    "start": "next start -p 8080"
  }

또는 이 코드를 하드코드로 변환하지 않을 수도 있습니다.package.jsonENV 변수 PORT를 사용하여 스크립트를 시작할 수 있습니다.

PORT=8080 npm run dev

상세한 것에 대하여는, vercel 메뉴얼을 참조해 주세요.

와 함께yarn모든 인수를 쉽게 전달할 수 있습니다.
yarn dev -p 8080또는yarn dev --port=8080.

와 함께npm사용.--인수를 전달하려면:
npm run dev -- -p 8080

.env 파일을 통한 환경변수를 사용한 회피책

이 gitub 댓글 덕분에

개발용

1. 프로젝트 루트에 개발 환경용 스크립트를 만듭니다. dev-server.js

// dev-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-dev');

cli.nextDev(['-p', process.env.PORT || 3000]);

2. 그런 다음 에 커스텀 포트를 설정할 수 있습니다..env다음과 같습니다.PORT=3002

3. 의 dev 명령어를 갱신합니다.package.json사용하다dev-server.js스크립트는 다음과 같습니다.

  "scripts": {
    "dev": "node dev-server.js"
  }

4. 달려.npm run devNextJS 어플리케이션은 포트 3002에서 기동합니다.

생산용

1. 프로젝트 루트에 Prod 환경용 스크립트를 만듭니다. prod-server.js

// prod-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-start');

cli.nextStart(['-p', process.env.PORT || 3000]);

2. 그런 다음 에 커스텀 포트를 설정할 수 있습니다..env다음과 같습니다.PORT=3002

3. 에서 start 명령어를 갱신합니다.package.json사용하다prod-server.js스크립트는 다음과 같습니다.

  "scripts": {
    "build": "next build",
    "start": "node prod-server.js"
  }

4. 달려.npm run startNextJS 어플리케이션은 포트 3002에서 기동합니다.(프로젝트를 구축하기 전에npm run build)

dotenv는 다음 경유로 설치해야 합니다.npm install dotenv이전 코드 스니펫에서 보듯이 스크립트로 필수 및 설정되어 있습니다.

github 코멘트에서 주의:

호스팅 프로바이더 중에는 server.js/index.js 파일을 강제로 보유하는 것도 있습니다.위의 솔루션의 장점은 추가 의존 관계가 필요하지 않다는 것입니다.

npm 스크립트에서 포트 번호를 설정하는 것은 전혀 좋지 않습니다.

단말기에서 다음 명령을 사용하여 포트 번호를 전달할 수 있습니다.

SET PORT=3001 && npm start

보통 포트는 환경에 따라 다르므로 git 저장소로 이동해서는 안 됩니다. 가장 을 에 입니다..env.local다음 시작 스크립트를 사용하여 읽을 수 있습니다.

// package.json
"scripts": {
  "start": "[ -e .env.local ] && set -a && . ./.env.local; next start",
},

「 」의 set -a다음, 다음.는 JS 시작 합니다.PORT에서는 하지 않는 것에 해 주세요.Windows 를 사용합니다.

다음 예시는 nextjs와 pm2의 조합 pm2 start npx --name "next" -- next -p 3001에 대해 동작합니다.

또 다른 방법은 Next.js에서 커스텀 서버 파일을 사용하는 것입니다.

따라서 포트를 env 파일로 설정하기만 하면 됩니다.다른 곳에서는 변경할 필요가 없습니다.

아래 예시와 같은 예

const express = require('express');
const next = require('next');
const getConfig = require('../next.config');


const { basePath, port } = getConfig.publicRuntimeConfig;

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

app.prepare().then(() => {
  const app = express();

  app.use(express.json());
  app.use(express.urlencoded({ limit: '20kb', extended: false }));


  app.listen(3000, (err) => {
    if (err) throw err;
    console.log('server running on port: ' + 3000);
  });
});

하드코딩을 하는 것 말고도package.json 를 통해서 할수..env 삭제:

PORT=4000

언급URL : https://stackoverflow.com/questions/60147499/how-to-set-port-in-next-js