create-react-app 기반 프로젝트를 실행하기 위해 포트를 지정하는 방법은 무엇입니까?

create-react-app 기반 프로젝트를 실행하기 위해 포트를 지정하는 방법은 무엇입니까?

---

내 프로젝트는 create-react-app 기반입니다 . npm start또는 yarn start기본적으로 포트 3000 에서 응용 프로그램을 실행 하며 package.json에 포트를 지정하는 옵션이 없습니다.

이 경우 원하는 포트를 어떻게 지정합니까? 이 프로젝트 중 두 개를 동시에 테스트하기 위해 포트 하나 3005와 다른 하나는3006

---

환경 변수 를 설정하지 않으려는 경우 또 다른 옵션은 다음에서 scriptspackage.json 부분 을 수정하는 것 입니다.

"start": "react-scripts start"

에

Linux (우분투 14.04 / 16.04에서 테스트 ) 및 MacOS (MacOS Sierra 10.12.4에서 @ aswin-s에서 테스트) :

"start": "PORT=3006 react-scripts start"

또는 @IsaacPak의 더 일반적인 솔루션

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor 솔루션

"start": "set PORT=3006 && react-scripts start"

내 대답의 인기로 인해 업데이트 : 현재 .env파일에 저장된 환경 변수를 사용하는 것을 선호 합니다 ( deploy편의하고 읽을 수있는 형태 로 다른 구성에 대한 변수 세트를 저장하는 데 유용합니다 ). 추가하는 것을 잊지 마십시오 *.env으로 .gitignore당신은 여전히 당신의 비밀을 저장하는 경우 .env파일. 다음 은 환경 변수를 사용하는 것이 가장 좋은 이유에 대한 설명입니다. 다음 은 환경에 비밀을 저장하는 것이 좋지 않은 이유에 대한 설명입니다.

---

이 작업을 수행하는 다른 방법이 있습니다.

프로젝트 루트에 .env 파일을 만들고 여기에 포트 번호를 지정하십시오. 처럼:

포트 = 3005

---

PORT서버가 실행될 포트를 지정하도록 명명 된 환경 변수를 지정할 수 있습니다 .

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

---

당신이 사용할 수있는 크로스 ENV를 포트를 설정하고, 윈도우, 리눅스 및 Mac에서 작동합니다.

yarn add -D cross-env

그런 다음 package.json에서 시작 링크는 다음과 같습니다.

"start": "cross-env PORT=3006 react-scripts start",

---

조금만 업데이트하십시오 webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

그런 다음 npm start다시 실행 하십시오.

---

내 Windows 사람들은 ReactJS 포트를 원하는 포트에서 실행하도록 변경하는 방법을 발견했습니다. 서버를 실행하기 전에

 node_modules/react-scripts/scripts/start.js

여기에서 아래 줄을 검색하고 포트 번호를 원하는 포트로 변경하십시오.

 var DEFAULT_PORT = process.env.PORT || *4000*;

그리고 당신은 갈 수 있습니다.

---

내 package.json 파일을 변경하면 "start": "export PORT=3001 && react-scripts start"나에게도 효과가 있었고 macOS 10.13.4에 있습니다.

---

요약하면 다음과 같은 세 가지 접근 방식이 있습니다.

1. "PORT"라는 환경 변수를 설정하십시오.
2. package.json의 "scripts"부분에서 "start"키를 수정하십시오.
3. .env 파일을 작성하고 PORT 구성을 파일에 넣으십시오.

가장 휴대하기 쉬운 방법이 마지막 방법입니다. 그러나 다른 포스터에서 언급했듯이 구성을 공개 소스 저장소에 업로드하지 않으려면 .env를 .gitignore에 추가하십시오.

자세한 내용 : 이 기사

---

이것은 Windows와 Linux 모두에서 작동합니다

package.json

"scripts": {
    "start": "set PORT=3006 && PORT=3006 react-scripts start || react-scripts start"
    ...
}

그러나 PORT = 3006으로 작성된 .env를 작성하는 것이 좋습니다.

---

앱을 시작할 때 기본 포트 구성을 찾을 수 있습니다

yourapp / scripts / start.js

아래로 스크롤하여 원하는 포트로 변경하십시오

const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 4000;

이것이 당신을 도울 수 있기를 바랍니다.)

---

3000명령 줄 매개 변수 또는 환경 변수로 이외의 포트를 지정할 수 있으면 좋을 것 입니다.

현재 프로세스는 매우 복잡합니다.

1. 운영 npm run eject
2. 끝날 때까지 기다리세요
3. Edit scripts/start.js and find/replace 3000 with whatever port you want to use
4. Edit config/webpack.config.dev.js and do the same
5. npm start

---

In Windows it can be done in 2 ways.

1. Under " \node_modules\react-scripts\scripts\start.js" , search for "DEFAULT_PORT" and add the desire port number.

   E.g : const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9999;

2. In package.json , appent the below line. "start": "set PORT=9999 && react-scripts start" Then start the application using NPM start. It will start the application in 9999 port.

---

How about giving the port number while invoking the command without need to change anything in your application code or environment files? That way it is possible running and serving same code base from several different ports.

like:

$ export PORT=4000 && npm start

You can put the port number you like in place of the example value 4000 above.

참고URL : https://stackoverflow.com/questions/40714583/how-to-specify-a-port-to-run-a-create-react-app-based-project