CRA로 만든 React 프로젝트 Docker 배포

Create React Application을 이용해서 만든 React 프로젝트를 DockerFile을 생성하고 Docker Repository로 배포하는 방법입니다.

Docker 회원가입과 Docker Desktop 설치가 완료되었다고 가정하고 시작하겠습니다.

Docker Repository 생성

 

먼저 Docker 사이트로 들어가서 Docker Repository를 생성해 줍니다.

Docker Hub Container Image Library | App Containerization

Docker 사이트로 들어가서 로그인해 줍니다.

Create Repository 버튼을 눌러 Docker Repository 생성 화면으로 들어가 줍니다.

Docker Repository 생성 화면

그림과 같이 Docker Repository 명칭과 description을 입력하고 Create 버튼을 눌러 Repository 생성을 완료해 줍니다.

Docker File 생성

다음으로 Docker Image 생성을 위해 Docker File 생성하는 단계입니다.

사실상 가장 중요한 단계라고 보시면 됩니다.

DockerFile 생성 위치

그림과 같이 프로젝트 최상위 폴더 바로 하단(package.json과 같은 레벨)에 Dockerfile을 생성해 줍니다.

(참고로 Dockerfile 대소문자 잘못 입력하면 "failed to solve: failed to read dockerfile no such file or directory" 이런 에러가 뜰 수 있으니 대소문자를 맞게 입력해 주는 게 중요합니다.)

그림에서 보다시피 확장자는 없습니다.

생성했으면 터미널에 "node -v"라고 입력해서 node js 버전을 확인합니다.

저는 20.1.0 버전이네요.

 

Dockerfile을 열어서 "FROM node:20"이라고 작성해 줍니다.

최종적으로 생성된 Dockerfile 은 하단에 추가하겠습니다.

이걸 베이스 이미지 지정하는 단계라고 합니다.

 

다음으로 Dockerfile에 "WORKDIR /app"을 추가해서 작업 폴더를 지정해 줍니다.

이어서 package.json 파일을 작업 폴더에 복사하기 위해 "COPY package.json."을 추가해 줍니다.

복사한 package를 설치하기 위한 명령어 "RUN npm install"을 추가해 주고 "COPY.."을 이용해 남은 소스들을 전부 작업 폴더에 복사해 줍니다.

이어서 "EXPOSE 3000"을 추가해 기본적으로 3000번 포트를 사용한다는 내용을 추가하고 "CMD ["npm", "start"]"를 추가해서 컨테이너가 시작될 때 npm start를 사용해 앱을 실행한다는 것을 정의해 줍니다.

 

이렇게 완성된 Dockerfile은 아래와 같습니다.

FROM node:20

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

완성된 Dockerfile

 

이제 Docker Desktop을 실행하고 터미널에서 프로젝트 폴더로 이동한 뒤 아래 명령어를 입력해 줍니다.

docker build -t jangjerry/sample-cra-project:0.0.1 -f Dockerfile .

Docker Image 생성 명령어

여기서 sample-cra-project는 생성한 repository 명칭에 맞게 넣어주시면 됩니다.

(뒤에 마침표까지 제대로 넣어줘야 합니다.)

Docker Container Local에서 실행 테스트

여기까지 했다면 생성된 Image를 실행시켜 봅시다.

docker run -p 80:3000 jangjerry/sample-cra-project:0.0.1

Docker Image로 Container 실행 명령어 예시입니다.

"80:3000" 이 부분은 기본적으로 CRA로 React 프로젝트를 생성하면 3000번 포트로 생성이 되기 때문에 80 포트로 돌려주는 역할입니다.

이 단계에서 중요한 건 신앙심입니다.

무사히 실행되길 기도합시다.

 

"webpack conpiled successfully"라는 메시지가 나오네요.

이어서 "localhost:80"으로 붙어보면 정상적으로 화면이 나온 것을 확인할 수 있습니다.

CRA Docker 정상 실행 화면

정상적으로 실행되는 것을 확인했다면 이제 끕시다.

Docker Repository에 배포

이제 push 명령을 통해 Image를 Repository에 배포해주기만 하면 됩니다.

docker push jangjerry/sample-cra-project:0.0.1

이 명령어로 배포해 줍니다.

그러고 나서 Docker 사이트로 들어가 Repository를 확인해 줍니다.

Tags에 새로운 0.0.1 태그가 생성되었다면 성공입니다.