상세 컨텐츠

본문 제목

(기록) Docker, Nginx, React 연동.

Docker + React

by hongkd 2022. 12. 13. 15:22

본문

1. 개념

  • Docker 란?
    리눅스 컨테이너 기반으로하는 오픈소스 가상화 플랫폼이다.
    Docker Hub 계정이 있어야 하며 Git과 비슷하게 repository가 존재한다. 또한 Image , Container 개념이 있다.
  • Docker의 Container 란?
    필요한 라이브러리와 애플리케이션을 모아서 마치 별도의 서버처럼 구성한 것을 말한다.
  • Docker의 Image 란?
    컨테이너를 실행할 수 있는 실행파일, 설정 값 들을 가지고 있는 것이라고 생각 하면 된다.

2. Docker를 사용한 nginx 와 React 배포 및 구동.

현재 프로젝트의 디렉토리

  • npx 커맨드를 이용 (create-react-app) React 프로젝트 생성.
  • Docker 연동을 위한 Dockerfile 파일 생성.
  • nginx 구동을 위한 nginx.conf 파일 생성.

 

Dockerfile 

nginx.conf

nginx.conf 파일은 기본 셋팅만 해놓았다.

추후 Rest api 연동을 위해 proxy 설정 예정.

 

Image 생성

※ 중요! wizpsj/tpms_web 은 Docker Hub 계정의 repository에 생성된 Image 이다.

    즉, Local에서 Image 생성 시 rpository의 Image와 동일해야 push가 된다.

 

push -> docker push wizpsj/tpms_web:tagename

pull -> docker pull wizpsj/tpms_web:tagename