react를 docker로 로컬에 배포해보자.
[docker에서 프로젝트 동작 시키는 방법]
1. DockerFile 작성
2. docker image 생성
3. docker container 생성 및 실행
프로젝트 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 install
과 COPY . .
를 동시에 수행하면 소스 코드가 조금 달라질때도 항상 npm install을 수행해서 리소스가 낭비되므로 분리하였다.
Dockerfile로 docker image 빌드하기
$ docker build -t <image-name> -f ./DockerFile .
도커 이미지가 생성됐는지 확인
$ docker image ls
만들어진 이미지로 도커 컨테이너를 만들어야 한다.
-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