Docker/환경 구성

[Docker] Dockerfile을 이용한 React App 배포 환경 구성 및 실행방법

adjh54 2024. 2. 3. 22:25
728x170
해당 글에서는 Dockerfile을 구성하여 React App을 컨테이너 환경에 띄우는 방법에 대해 알아봅니다.




💡 [참고] Docker에 대해 더 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.
분류 설명 링크
이해하기 Docker 환경 설치 및 실행 방법 https://adjh54.tistory.com/350
이해하기 Docker 기초 이론(아키텍처, 흐름, 주요 용어) https://adjh54.tistory.com/352
이해하기 Docker 컨테이너 라이프 사이클 & CLI https://adjh54.tistory.com/359
이해하기 DockerFile 이론 + Nginx 환경 구성 및 배포 방법 https://adjh54.tistory.com/414
환경구성 DockerFile + Vault 환경 구성 및 배포 방법 https://adjh54.tistory.com/415
환경구성 DockerFile + React 환경 구성 및 배포 방법 https://adjh54.tistory.com/417
환경구성 DockerFile + Spring Boot 환경 구성 및 배포 방법 https://adjh54.tistory.com/420

 

 

 

 

1) React App 구성


💡 React App 구성

- 이전에 작성한 글을 기반으로 간단한 React App을 구성하였습니다.
 

[React] 간단한 CRA + Typescript 기반 React 프로젝트 구성 : 프로젝트 생성, Router 구성

해당 글에서는 빠르게 구성할 수 있는 CRA를 이용하고 Typescript 템플릿을 이용하여 React 프로젝트를 간단하게 구현하는 방법에 대해 알아봅니다. 1) 프로젝트 환경 💡 프로젝트 개발환경 - 프로젝

adjh54.tistory.com

 

 

 

1. 개발환경 확인


💡 프로젝트 개발환경 확인

- 프로젝트에서 사용된 환경과 버전입니다.
환경 버전
Node 18.17.1
yarn 1.22.19
IDE Visual Studio Code
react 18.2.0
typescript 4.9.5

 

 

 

2. CRA + Typescript 프로젝트 구성


💡 CRA + Typescript 프로젝트 구성

- 간단하게 CRA를 기반으로 프로젝트를 구성합니다.
# 프로젝트 구성 예제
$ npx create-react-app test-react-app --template typescript

 

 

 

3. 패키지 매니저 yarn을 통해 초기 패키지를 설치합니다.


$ yarn 

 

 

 

 

2) Dockerfile + React App 사용예시 : 구성하기


1. 패키지 구조


💡 패키지 구조

- 이전 단계에서 생성된 프로젝트 경로의 루트 경로에 Dockerfile을 추가합니다.

 

 

 

2. Dockerfile 구성


💡 Dockerfile 구성

- 해당 Dockerfile은 Node.js 기반의 애플리케이션을 실행하기 위한 설정으로 구성되어 있습니다.
FROM node:18-alpine

WORKDIR /src

COPY package.json .

RUN yarn
# or
# RUN npm install 

COPY . .

EXPOSE 3000

CMD [ "yarn", "start" ]
# or
# CMD [ "npm", "start" ]
Dockerfile 명령어 설명
FROM node:18-alpine Node.js 버전 18이 설치된 alpine Linux를 기반 이미지로 사용
WORKDIR /src Docker 컨테이너 내에서 작업할 디렉토리를 src/로 설정
COPY package.json yarn.lock . 호스트 컴퓨터의 package.json와 yarn.lock 파일을 작업 디렉토리에 복사
RUN yarn yarn 명령을 실행하여 필요한 패키지들을 설치 (npm을 사용할 경우 RUN npm install)
COPY . . 호스트 컴퓨터의 모든 파일을 작업 디렉토리에 복사
EXPOSE 3000 컨테이너의 3000번 포트를 외부에 노출. 애플리케이션이 해당 포트에서 실행될 것임을 나타냄
CMD [ "yarn", "start" ] 컨테이너가 실행되면 yarn start 명령을 실행 (npm을 사용할 경우 CMD [ "npm", "start" ])

 

 

[ 더 알아보기 ]

💡 node:<version>-alpine과 node:<version>-slim 버전은 뭘까?


1. node:<version>-alpine
- Alpine Linux라는 경량화된 리눅스 배포판을 기반으로 만들어진 Node.js 이미지입니다.
- 이 이미지는 크기가 매우 작아서, 컨테이너를 빠르게 실행하거나 네트워크를 통해 효율적으로 전송할 수 있습니다.

2. node:<version>-slim
- Debian linux의 'slim' 버전을 기반으로 한 Node.js 이미지입니다.
- 이 이미지는 필요한 최소한의 패키지만을 포함하기 때문에, 이미지 크기가 상대적으로 작습니다. 그러나 alpine 버전보다는 더 크며, 필요한 패키지가 없을 경우 별도로 설치해야 할 수도 있습니다.
 

node - Official Image | Docker Hub

Docker Official Images are a curated set of Docker open source and drop-in solution repositories. Why Official Images? These images have clear documentation, promote best practices, and are designed for the most common use cases.

hub.docker.com

 

 

3) Dockerfile + React App 사용예시 : 실행하기


 

1. 컨테이너 이미지 생성


# format
$ docker build -t <컨테이너 이미지 이름> .

# 컨테이너 이미지 생성
$ docker build . -t simple-react-app

 

 

💡 [참고] Docker Desktop에서 생성된 컨테이너 이미지를 확인합니다.

 

 

 

 

2. 컨테이너 실행


💡 컨테이너 실행

- 생성된 이미지를 기반으로 컨테이너를 실행합니다.

# format
$ docker run -d --name <컨테이너 이름> -p 3000:3000 <실행할 이미지 이름>

# 컨테이너 생성 및 실행
$ docker run -d --name simple-react-app -p 3000:3000 simple-react-app

 

명령어 설명
docker run Docker 이미지를 실행하는 명령어
-d 컨테이너를 백그라운드에서 실행하도록 설정
--name simple-react-app 실행하는 컨테이너의 이름을 'simple-react-app'으로 지정
-p 3000:3000 호스트 기기의 3000번 포트와 컨테이너의 3000번 포트를 연결
simple-react-app 실행할 Docker 이미지의 이름

 

 

 

💡 [참고] Docker Desktop에서 생성된 컨테이너 상태를 확인합니다.

 

 

3. React App 페이지를 접근합니다.


💡 React App 페이지를 접근합니다.

- 구성한 http://localhost:3000으로 접근하여 구성이 잘 됨을 확인합니다.

 

 

 

 

4. 컨테이너를 멈추고 React App을 다시 접근 해 봅니다.


 

 

 

💡 컨테이너를 올리고 내림에 따라 수행이 잘됨을 확인하였습니다.

 

 

 

💡 [참고] 해당 예시는 아래의 Github에서 확인이 가능합니다.
 

GitHub - adjh54ir/multiflex-docker: Docker 실습을 위한 패키지입니다.

Docker 실습을 위한 패키지입니다. Contribute to adjh54ir/multiflex-docker development by creating an account on GitHub.

github.com

 

 

 

 

 

오늘도 감사합니다. 😀

 

 

 

그리드형