docker로 react를 돌리는데, 컨테이너를 올리려는 시도를 할 때 아래와 같은 에러가 났다.
간단히 말해, 이미 3000번 포트를 다른 프로세스가 쓰고 있어서 사용할 수 없다는 뜻이다.
(로컬에서 npm start 할 때 종종 port already in use하는 에러가 있는데 비슷하다)
참고로 에러가 난 환경은 Windows11, wsl로 도커 사용 중이다.
에러 나는 이유
기본적으로 포트는 컴퓨터가 작업을 구분하는 기준이다. 즉, 한 포트를 이미 다른 프로세스가 쓰고 있으면 해당 포트는 이미 점유되어 다른 프로세스가 사용할 수 없다.
근본적인 해결
따라서 근본적인 해결은 기존 3000을 쓰는 프로세스를 찾아서 죽여야 한다. wsl 터미널 말고 windows 명령 프롬프트 혹은 powershell을 열어서
netstat -ano | findstr :3000만약 여기서 프로세스가 나온다면, 해당 프로세스가 3000번을 사용 중인 것이다. 확인해보고 죽여도 괜찮다면
tskill <PID>이후 다시 한번 시도해보자. 웬만하면 이걸로 해결이 될 것이다.
그러나…
아무것도 안나오는데 계속 3000번을 쓸 수 없다고 나오고, 원인을 알 수 없는 상황이라면?
우선 다음 글에 나오는 방법을 하나씩 시도해보자.
그래도 안된다면... 문제상황을 제거할 수는 없어도 피해갈 수는 있습니다. 그냥 3000번을 안 쓰면 됩니다.
로컬에서 npm start를 돌리는 경우
npm start를 하면 기본적으로 포트는 3000으로 열린다. 포트를 변경하고 싶다면, 환경 변수(PORT)를 바꿔주면 된다. react 폴더 최상단에 .env 파일을 작성한다.
PORT=<사용할 포트번호>여기서 포트 번호는, 적당히 안쓰는 번호를 써주면 된다. 뭘 써야 할지 모르겠다면 그냥 3001, 3002, 3003...을 돌려가면서 쓰면 된다.
이후 npm start를 하고, localhost:<작성한 포트번호>로 접속하면 된다.
도커를 사용할 경우
도커를 사용한다면, npm 서버의 포트를 바꿔줄 필요는 없다. 이는 컨테이너의 내부 포트이기 때문이다. 사용할 수 없다고 나오는 3000번은 로컬 (도커 컨테이너 말고 내 컴퓨터)이므로, 도커 컨테이너의 3000번을 다른 포트에 매핑해주기만 하면 된다.
따라서 기존 docker-compose.yml의 포트 매핑을
ports:
- 3000:3000에서,
ports:
- <사용할 포트 번호>:3000으로 변경해주면 된다.
이렇게 하면, 도커 컨테이너 내부에서는 여전히 3000번 포트가 돌아간다. 다만, 이것을 내가 바꿔준 포트에 매핑하므로 나는 localhost:<작성한 포트번호>로 접근할 수 있는 것이다.
이러면 한가지 불편한 점이 있다. 혼자서 하는 프로젝트에서는 의미가 없지만, 팀원이 있다면 팀원 전부가 포트를 변경해야 한다. 혹은, 문제가 있는 한 사람이 계속 도커 파일을 수정한 후, 변경사항을 날려야 하는데 이게 또 은근히 불편하다. 따라서 저 "사용할 포트 번호"를 환경변수로 세팅하여 문제가 있는 팀원만 세팅하도록 해주었다.
docker-compose.yml
ports:
- ${LOCALHOST_PORT}:3000.env (docker-compose.yml과 동일 폴더 위치)
LOCALHOST_PORT:<사용할 포트 번호>.env 파일은 .gitignore에 등록해서 깃이 추적하지 않도록 하면 이제 각자 원하는 포트를 사용할 수 있다!!
마지막으로 한가지 덧붙이면, 저 환경변수에 default 값을 줄 수 있다.
ports:
- ${LOCALHOST_PORT:-3000}:3000이렇게 하면 저 환경 변수를 찾을 수 없으면 기본으로 3000으로 세팅이 된다. 따라서 문제가 없는 팀원은 굳이 .env를 작성하지 않고 이전처럼 3000번 포트로 접근하면 된다.
참고로 env로 포트 번호를 바꾸는 경우 매번 build를 하지 않아도 된다. 그냥 중단(Ctrl+C) 후 다시 docker compose up으로 다시 올려주기만 하면 된다.
reference
