React code를 실행시 npm start 명령어를 통해 작동시킨다. 이때, 기본 포트는 3000번으로 정해져있다.
docker-compose에서 React를 적용시 포트 변경에 대해 알아본다.
React 포트 변경 방법
React 포트를 사용자 기준에 맞게 변경을 하려면 네 가지 정도의 방법이 있다.
첫번째, 명령어로 바로 변경하는 방법
PORT=8000 npm start터미널에서 npm start로 리엑트를 실행시 앞에 PORT=8000을 붙여 변경할 수 있다.
두번째, package.json을 변경하는 방법
맥
...
"scripts": {
"start": "PORT=8000 && react-scripts start",
}
...(리눅스도 같다고 하는데 확인 안해봄)
기존에 있던 코드 react-scripts start 앞에 `PORT=8000 && `을 추가하여 변경이 가능하다. PORT는 반드시 대문자.
윈도우
...
"scripts": {
"start": "set PORT=8000 && react-scripts start",
}
...윈도우에서는 react-scripts start 앞에 `set PORT=8000 && ` 형식으로 설정한다.
세번째, node_modules 내 start.js 파일을 수정하는 방법
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000;
const HOST = process.env.HOST || '0.0.0.0';이 방법은 node_modules이 생성되어 있어야 하기 때문에 docker 사용시 문제가 있을수 있다.
node_modules에 모든 파일들이 받아져 있다면
node_modules / react-scripts / scripts / start.js 파일에 접근하여 55번째 줄 정도에 DEFAULT_PORT를 변경한다.
네번째, .env 파일에 포트 정보를 입력하는 방법
PORT=8000위의 세번째 방법에서 DEFAULT_PORT를 environment 파일을 통해 접근하는 방법이라고 할 수 있다.
package.json 파일이 있는 같은 위치에 .env 파일을 생성한 후 PORT=8000을 적어 넣으면 설정이 완료된다.
이렇게 네 종류의 방법이 있다.
변경시 문제점
하지만 아쉽게도 docker-compose에서는 모든 방법이 적용되지 않음을 발견하였다.
결론부터 이야기 하자면 세번째 node_modules 수정 그리고 .env 파일 설정만이 docker-compose에서 정상 작동함을 확인하고 기록한다.
첫번째 방법으로 시도
Dockerfile 내에 명령어 실행 형식으로 적용을 해보았으나 기본 포트 3000번이 유지되었다.
두번째 방법으로 시도
`docker-compose up`으로 React가 실행되고 터미널에 set PORT=8000 && react-script start가 출력되었음에도 최종적으로 기본 포트 3000번이 유지되었다. 백엔드인 node가 3000번으로 설정되어있어서 localhost:3000으로 접근시 api 데이터가 호출된다. (`이미 포트가 사용중다`라는 경고가 나오지 않는 이유에 대해서는 아직 잘 몰르겠다.)
세번째 방법으로 시도
해당 파일을 찾아가 3000 -> 8000으로 바꾸나 바로 적용되었다. 이 부분에서 docker-compose를 사용시 포트변경에 대한 희망이 보였다.
네번째 방법으로 시도
`.env` 파일을 생성하고 PORT=8000 적용하니 React가 8000번 포트로 바뀌었다.
위 세번째 방법에서 `process.env.PORT`에 의해 포트 설정을 인식하고 8000번으로 바꿔준 결과이다.
docker-compose에서 React port 변경 결론
세번째 node_modules 안에 start.js 파일을 수정하거나 package.json과 동일한 위치에 .env 파일을 생성하고 PORT를 넣어주는 설정만이 docker-compose에서 정상 작동됨을 확인한다.