배포 - 도커를 이용해 간단한 리액트 앱 만들어보기

리액트를 설치하기 위한 명령어

npx create-react-app react-app // 마지막은 리액트를 설치하고자 하는 디렉토리 이름이다.

 

리액트 개발에 대한 간략 설명

개발 단계

npm run start

리액트 앱을 실행하기 위한 명령어이다.

 

테스트 단계

npm run test

개발이 완료 되었다면 개발한 것에 문제가 있는지 없는지 테스트를 해볼 수 있다. 테스트는 위 명령어로 할 수 있다.

 

배포 단계

npm run build

테스트까지 완성이 된면 이제는 배포를 통해 다른사람도 앱을 이용할 수 있도록 운영 환경에 배포할 수 있다. 그러기 위해서는 그냥 소스를 옮기는 것이 아니라 build를 해서 운영환경에 배포할 수 있는 위한 폴더와 파일들을 생성해야한다. 위 명령어를 통해 폴더와 파일을 생성할 수 있다.

 

배포를 위한 명령어까지 작성하면 배포를 할때 사용할 수 있는 build폴더와 그안에 많은 파일들이 생성이 된다. 이 과정이 끝나면 기본적인 리액트 어플리케이션 설치가 완료되었다고 할 수 있다.

 

Docker를 이용하여 개발단계에서 리액트 실행하기

도커로 어플을 실행하기 위해서는...

지금 까지는 한가지의 Dockerfile을 만들었지만 실제로는 개발단계를 위한 것과 실제배포를 위한 Dockerfile을 따로 만드는 것이 좋다. 그러므로 개발을 위한 Dockerfile이 아닌 Dockerfile.dev라는 파일을 작성한다.

 

Dockerfile.dev

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm","run", "start"]

위 와 같이 Dockerfile.dev를 작성 한 후, 해당 Dockerfile로 이미지를 생성하면 된다. 명령어 docker build ./으로 이미지를 생성한다.

 

이미지가 build되지 않는 Error

error가 발생하는 이유는 원래 이미지를 빌드할 때 해당 하는 디렉토리만 정해주면 dockerfile을 자동으로 찾아서 build하는 데 현재는 dockerfile이 존재하지 않고 dockerfile.dev밖에 존재하지 않는다. 즉 해당하는 디렉토리 안에 dockerfile이 없다고 인식하므로 이런 error가 발생하는 것이다.

 

임의로 build할때 어떤 파일을 참조할지 알려주면 해당 문제를 해결할 수 있다.

docker build -f Dockerfile.dev .

 -f 옵션을 통해 docker 이미지를 빌드할때 쓰일 dockerfile을 임의로 지정해준다.

 

 

📝현재 로컬 환경에 node_module폴더가 존재한다. 해당 폴더에는 리액트 앱이 실행할 때 필요한 모듈들이 들어 있지만 실제로 리액트 앱이 구동되는 환경인 Docker Conatiner속에만 node_module이 제대로 존재하기만 하면 되기 때문에 

굳이 로컬환경에 node_module을 필요로 하지 않는다. 오히려 로컬에 node_module이 존재하면 build시간이 늘어난다. Dockerfile.dev의 두번째 COPY 명령어에서 해당 경로에 모든 파일을  복사하기 때문에 크기가큰 node_module도 같이 복사된다. 따라서 node_module을 지워도 좋다.

 

 

 

[출처 -  https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci/dashboard]