리액트 서버 중지 트리거
docker run --rm -p 3000:3000 --name goal-frontend goal-react
컨테이너를 시작하는 명령어로 별 문제가 없어 보인다.
하지만 실행해보면 서버가 시작하자마자 중지된다.
그 이유는 리액트는 입력을 수신하지 않으면 서버가 즉시 중지된다.
그렇기에 -it를 붙이면 정상 잗동된다.
docker run --rm -p 3000:3000 --name goal-frontend -it goal-react
리액트 서버가 잘 돌아간다.
리액트 동작 방식과 도커 드라이버의 url 자동변환
이번엔 리액트(front) 와 노드(back)이 같은 도커 네트워크로 묶여 있다고 가정하자
docker run --rm -p 3000:3000 --network goal-net --name goal-frontend -it goal-react
같은 도커 네트워크의 컨테이너들은 도커 드라이버 bridge에 의해 http://goal-backend/goals 와 같이 컨테이너 이름만으로 IP를 찾을 수 있다.
하지만 리액트에선 이게 동작하지 않는다. 왜 그럴까?
도커 드라이버는 컨테이너 내부의 애플리케이션이 요청을 할 때 하드코딩된 http://goal-backend/goals url이 실제 대상 컨테이너의 ip로 변경된다.
반면에 리액트는 도커 컨테이너에서 실행되지 않고 소스코드 그대로 브라우저에게 보내져 브라우저에서 실행된다.
즉, 변환을 받지 않은 하드코딩된 소스코드의 url을 브라우저가 알지못해 에러가 발생한다.
리액트는 도커 내부에서 실행되는 자바스크립트가 아닌 브라우저에서 실행되는 자바스크립트이기 때문이다.
http://goal-backend/goals를 http://localhost/goals로 변경하자
docker run --rm -d -p 80:80 --name docker-backend --network goal-net docker-node
그러므로 백엔드서버는 리액트를 위해 포트를 열어야 하고 db와 백엔드서버만 같은 네트워크로 묶는다.
docker run --rm -it -p 3000:3000 --name goal-frontend goal-react
리액트 서버는 network를 사용할 필요가 없으며 외부 요청을 받아야 하므로 포트를 열어야한다.
추가로 리액트는 라이브 리로드를 위한 nodemon과 같은 부가적인 종속성이 필요없다.리액트에서 이미 제공하는 기능이다.
