[React] react + docker

Gyuhan Park·2023년 1월 29일
0

react

목록 보기
6/11

docker

react를 docker로 로컬에 배포해보자.

[docker에서 프로젝트 동작 시키는 방법]
1. DockerFile 작성
2. docker image 생성
3. docker container 생성 및 실행

DockerFile 생성

프로젝트 root 디렉토리에 DockerFile을 만든다.

FROM : docker hub 에서 가져올 베이스 이미지 정의
WORKDIR : 경로 설정
COPY : package.json을 워킹 디렉토리로 복사
RUN : 명령어 실행
COPY : 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에 복사
EXPOSE : docker container의 3000번 포트 개방
CMD : npm start 스크립트 실행

# DockerFile
FROM node:14.17

WORKDIR /shopping

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

각각의 명령어들은 한줄 한줄씩 캐싱되어 실행된다. 그래서 처음 빌드할 때 오래걸리고 그 다음부터는 바로 이미지가 생성된다.
따라서 npm installCOPY . . 를 동시에 수행하면 소스 코드가 조금 달라질때도 항상 npm install을 수행해서 리소스가 낭비되므로 분리하였다.

docker image 생성

Dockerfile로 docker image 빌드하기

$ docker build -t <image-name> -f ./DockerFile .

도커 이미지가 생성됐는지 확인

$ docker image ls

docker container 생성 및 실행

만들어진 이미지로 도커 컨테이너를 만들어야 한다.
-d : 컨테이너를 백그라운드에서 실행하고, 실행 결과로 컨테이너 ID를 출력
-p : 포트 번호 설정 옵션

$ docker run -d -p <포트번호>:3000 --name <container-name> <image-name>

컨테이너 확인

$ docker ps

프로젝트 적용 결과

짜잔! 설정한 포트번호 3307로 접속된 것을 확인할 수 있다.
근데 폰트는 적용이 안된 거 같은데 기분 탓인지 확인해 봐야겠다 ㅎㅎ
다음엔 aws에 배포해볼 예정!

도커 명령어


# 도커 이미지 생성
$ docker build -t <image-name> -f ./DockerFile .

# 도커 이미지 확인
$ docker image ls

# 도커 실행 with 포트번호 설정
$ docker run -d -p <포트번호>:3000 --name <container-name> <image-name>

# 도커 컨테이너 확인
$ docker ps

# 동작 중인 컨테이너 중단
$ docker stop <container-name>

# 컨테이너 삭제
$ docker rm <container-name> -f

docker로 react 배포하기

profile
단단한 프론트엔드 개발자가 되고 싶은

0개의 댓글