도커 입문 29강 - 도커컴포즈 로컬에서 react build해서 도커nginx로 실행해보기

※ React는 윈도우에서 코딩하고 Docker는 H2서버(우분투)에 있기 때문에 강의와 좀 다르게 실습했다.

[학습목표]

React를 Nginx에서 서비스 되도록 하기

 

 

실습 디렉토리 : ex09 / my-react-app

 

1. React 앱 Build 하기 (Window)

25강에서 실습했던React앱에서 npm run build를 통해  build파일들을 만들어야한다.

#25강에서 실습한 윈도우에 있는 react 실습 폴더(my-app)로 이동한다.
#윈도우 터미널에 실습 폴더로 이동한 후 build 실행.
npm run build

 

build란? 간단히 말하면 배포할 코드들을 만드는 것.

빌드 폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.

빌드가 축소되고 파일 이름에 해시가 포함됩니다.

 

npm run build를 실행하면 프로젝트 폴더에 build파일이 생긴다.

해당 폴더의 내용들을 docker가 설치되어있는 H2 서버로 옮겨주도록 하자.

SFTP를 통해서 ex09 / my-react-app 으로 옮겨주었다.

 

2. Dockerfile 생성 (Ubuntu)

이전 13강, 28강 내용과 별반 다를것이 없다. Nginx를 실행하기 위한 Dockerfile을 만들어주면 된다.

FROM nginx

COPY build /usr/share/nginx/html

ENTRYPOINT ["nginx", "-g", "daemon off;"]

다만, copy하는 대상이 방금 window에서 옮겨준 build 폴더를 통째로 /uar/share/nginx/html로 옮겨주면 된다.

 

3. Docker build 및 실행하기

이전 강의 와 같이 docker build하고 실행해주자.

$docker build -t react-app ./
$docker run -d -p 9011:80 --name=react-app react-app

 

실행된 컨테이너에 접속해보면 전에 실습한 React앱이 잘 뜨는것을 볼 수 있다.