# 프로젝트 구성 예제
$ 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 버전보다는 더 크며, 필요한 패키지가 없을 경우 별도로 설치해야 할 수도 있습니다.
# 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으로 접근하여 구성이 잘 됨을 확인합니다.
