Docker 간단한 어플을 실제로 배포해보기 (개발 환경)

ㄷ

 

 

 

리액트 앱 설치하기

 

 

npx create-react-app ./ 으로 설치

이렇게 나옴

 

 

 

npm run start : 리액트 앱 실행

npm run test : 리액트 앱 테스트

npm run build : 배포를 위한 빌드

 

 

 

 

2개의 Dockerfile을 이용할 것임 (개발, 배포) (dev, Prod)

 

 

 

 

 

 

Dockerfile.dev(개발을 위한 도커파일)  생성

 

수정 전

 

 

 

컴포즈 하면서 오류나서 이렇게 수정

 

어차피 바꿔야하지만 (디렉토리가 없어서) 혹시 모르니 이전 코드도 냅두겠음

 

 

 

docker build ./ 를 하면 오류!!!!

 

dockerfile이 아니라 docerfile.dev 이기에  못 찾는 것임!!

 

 

 

 

그럴땐 docker build -f Dockerfile.dev ./

이렇게 이름을 명시해주면 됨.

 

 

 

 

 

 

 

 

 

 

-------------------------------------------------------------------------------------------------------------------------------------

오류!

 

Get https://registry-1.docker.io/v2/: dial tcp: lookup registry-1.docker.io on 10.0.2.3:53: read udp 10.0.2.15:60326->10.0.2.3:53: i/o timeout 오류가 뜸~~~

 

 

 

찾아보니 도커 머신을 재가동 하면 해결됨.

 

 

 

1. docker-machine restart default 로 재시작

 

 

 

2. eval $(docker-machine env default)

 

 

 

 

하고 다시 docker build -f Dockerfile.dev -t t900341/docker-react-app ./ 로 빌드!!

 

 

 

-------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

 

실습 돌아와서

 

 

 

npm install 하면서_node_module 이 컨테이너에 복사되는데

로컬에 node_module이 있으면 COPY ./ ./ 하면서 한번 더 중복으로 복사하므로 시간이 오래 걸림

 

TIP : 빌드 후 로컬에 있는 node_module을 지워주면 시간이 더 단축됨.

 

 

 

 

 

 

 

docker run -it -p 3000:3000 <이미지 이름>

으로 포트매핑하며 실행 확인

 

 

 

 

 

 

 

 

 

 

 

도커 볼륨을 이용한 소스 코드 변경

 

 

 

 

 

 

 

 

 

Volume을 이용한 어플리케이션 실행하는 법

 

docker run -p 3000:3000 -<v /usr/src/app/node_modules> <-v $(pwd):/usr/src/app> <이미지 아이디>

         포트 매핑                                node_modules 참조x                  pwd경로에 있는것은 /usr~ 에서 참조

 

 

 

이렇게 볼륨으로 하면 수정 사항이 바로바로 refresh 됨

 

 

 

 

 

 

안되면

 

window 는 -v %cd%:/usr/src/app

맥   은           -v (pwd):/usr/src/app

powershell  -v ${PWD}:/usr/src/app

 

으로 하면 됨.

 

 

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

 

 

 

도커 컴포즈로 좀 더 간단하게 앱 실행해보기

 

 

 

docker-compose.yml 생성

 

 

context : 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치

volumes : 로컬 머신에 있는 파일들 맵핑

stdin_open : 리액트 앱을 끌때 필요(버그 수정)

 

 

 

docker-compose up으로 실행!!

 

 

 

리엑트 앱 테스트 하기

 

- docker run -it <이미지 이름> npm run test

 

 

실시간으로 소스를 바꾸는 것도 적용하고 싶다!!! (볼륨을 이용)

 

 

 

 

 

 

 

docker-compose up --build 로 배포

 

 

 

 

 

 

 

 

 

운영환경 도커 이미지를 위한 Dockerfile 작성하기

 

 

- 개발환경과 운영환경의 도커파일 차이점은

개발 환경에서는 build를 할 필요없이 실행이 가능 하지만 운영환경에서는 build를 해줘야 함

CMD에 npm run build로 빌드 파일들을 생성해주며 그 이후에 Nginx를 시작해줘야 함

 

 

 

 

 

 

CMD ["npm", "run", build"]

 

nginx 도커 이미지를 이용한 nginx 시작

 

 

 

 

 

 

 

요약하자면 두가지 과정으로 이루어짐.

 

1. 빌드 파일들을 생성 (Build Stage)

2. Nginx를 가동하고 생성된 빌드폴더의 파일들을 웹 브라우저의 요청에따라 제공 (Run Stage)

 

 

 

 

 

 

Dockerfile

 

 

 

Builder stage  (생성된 파일과 폴더들은 /usr/src/app/build로 들어간다.)

 

FROM node:alpine as builder

 

WORKDIR /usr/src/app

 

COPY package.json ./

 

RUN npm install

 

COPY ./ ./

 

CMD "npm", "run", "build"

 

 

 

Run stage 

 

From nginx    #nging를 위한 베이스 이미지

 

COPY <--from=builder> </usr/src/app/build> </usr/share/nginx/html>             #<>는 쓸때 생략

 

          <위의 builder을 암시>