리액트를 위한 도커 파일 작성하기

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

현재까지는 Dockerfile 한 가지만 만들었지만, 실제로는 Dockerfile을 개발단계를 위한 것과 실제 배포 후를 위한 것을 따로 작성하는 게 좋다. 그러므로 개발단계를 위해서 Dockefile이 아닌 Dockerfile.dev 라는 파일을 작성해보자.

alpine 베이스 이미지가 아닌 node 이미지를 쓰는 이유

• 먼저 한번 베이스 이미지를 alpine으로 해서 build를 해보면 npm not found 에러가 발생한다. 왜냐하면, alpine 이미지는 가장 최소한의 경량화된 파일들이 들어있기에 npm을 위한 파일이 들어있지 않아서 RUN 부분에 npm install을 할수가 없다. alpine 이미지의 사이즈는 5MB정도 밖에 되지 않는다.

npm install은 무엇인가?

• npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램.
• npm install은 package.json에 적혀있는 종속성들을 웹에서 자동으로 다운 받아서 설치해주는 명령어이다.
• 결론적으로는 현재 리액트 JS앱을 만들때 필요한 모듈들을 다운받아 설치하는 역할을 한다.
  

react-todo-app에 dockerfile을 추가해보자

react-dockerfile이라는 react-app을 생성하고, 이를 vscode에서 dockerfile을 추가해주고 다음 코드를 작성해준다.

FROM node:16-alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install 

COPY ./ ./

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

그리고 node_modules 폴더를 delete 하자. 왜냐하면, 컨테이너 안에서 react를 실행하는데, 이미 package.json을 컨테이너에 넣어줬고, npm install로 종속성들을 받아줬기 때문에 다시 한번 node_modules 내의 파일들을 또 다시 copy를 해 줄 필요가 없다.

docker를 build 해보자.

터미널에 다음 명령을 실행해준다.

docker build ./

조금 기다려주면 다음과 같이 빌드가 완료되었고, 이미지가 생성되었음을 확인할 수 있다.

이제 이미지를 이용해서 컨테이너를 실행해보자.

react가 실행이 되었고, 들어가서 확인해보자.

현재 접근이 안된다. 그 이유에 대해서 자세히 알아보자.

생성한 이미지로 어플리케이션 실행 시 접근이 안 되는 이유 (포트 맵핑)

현재까지 컨테이너를 실행하기 위해 사용한 명령어

앞으로 컨테이너를 실행하기 위해 사용 할 명령어

새롭게 추가된 부분은 무엇을 위한 부분인가?

우리가 이미지를 만들 때 로컬에 있던 파일(package.json)등을 컨테이너에 복사해줘야 했었다.
그것과 비슷하게 네트워크도 로컬 네트워크에 있던 것을 컨테이너 내부에 있는 네트워크에 연결을 시켜주어야 한다.

즉, 접근이 안됐었던 이유는 브라우저에서 컨테이너 안의 현재 네트워크 3000에 들어가려고 할 때 맵핑이 되어있지 않기 때문이다. 그래서 이들을 연결해주려면 포트 맵핑을 해주어야 한다.

이 명령어를 이용해서 다시 실행

docker run -p 3000:3000 sha256:47ec46016d4e61f9d35ab760854e3dc7acbc // image

이제 제대로 연결된 것을 확인할 수 있다.

이로써 React 강의를 완강하였다. 9주간 기나긴 여정이었던 것 같은데, React를 이용한 웹 제작을 위해 핵심적인 부분을 콕콕 집어서 배울 수 있었던 것 같다. 앞으로 배운 React를 활용해 웹서비스를 제작하는 프로젝트를 진행할 예정이다. 좋은 아이디어를 바탕으로 한 사람들에게 편리함을 제공해 줄 수 있는 프로젝트 결과물이 나오길 바라며...