도커 환경에서 리액트를 위한 파일을 관리하기 위해, 도커 파일을 생성해보자.
일반적으로 도커 파일을 작성할 때는 두가지로 나누어서 작성을 하게 된다.
1. 개발 환경의 도커 파일 (Dockerfile.dev)
2. 운영 환경의 도커 파일 (Dockerfile)
이렇게 두개를 만들어서 실제 배포 이후의 상황을 가정하기 위해서 따로 작성하는 것이 좋다.
일단 이번에는 개발단계를 위한 Dockerfile.dev를 작성해보고자 한다.
base Img에서 단순히 alpine만을 사용하게 된다면 용량이 5MB이하이므로 node 모듈이 온전히 작동될 수 없다. 그렇기 때문에 노드 18버전으로 base Image를 설정한다.
WORKDIR은 컨테이너 안에 어떠한 위치에 리액트 앱을 넣어줄 것인지 결정하는 것이므로 임의로 설정한다.
COPY를 하여 Package json과 현재 디렉토리에 있는 것들을 복사한다.
이 때 주의해야 할 점은 RUN을 통하여 Npm을 다시 깔기 때문에 기존 노드 모듈을 삭제해주어야 하며, 나머지 파일들을 온전히 복사하기 위해 마지막 COPY 까지 진행한다.
이제 도커 파일을 완성했으니까 이것을 도커 서버에 넘겨, 이미지를 이용하여 React앱을 실행시켜 보도록 하자.
docker build ./를 하였더니 지금 빌드가 아주 잘 되고 있다.
빌드가 완료되었고, 이미지를 이용하여 도커를 실행시켰다. 그랬더니
사이트에 연결할 수 없다는 에러가 발생한다.
이유는 무엇일까?
현재까지는 컨테이너를 실행하기 위해서 아래와 같은 명령어를 입력했다.
docker run 이미지 이름
그런데, 컨테이너를 실행하기 위해 아래와 같이 명령어를 입력해야 한다.
docker run -p 3000 : 3000 이미지 이름
로컬에 있던 파일들을 복사 해줬듯이, 로컬 네트워크에 있는 친구들도 컨테이너 내부에 있는 네트워크에 연결을 해야 하는데 연결을 하지 않았기 때문에 연결이 불가능했던 것이다.
즉 포트 3000번이 되면, 컨테이너 내부의 3000번 포트로 연결해달라는 매핑을 직접 진행한것이다.
