Kwon's Study Blog !
[Docker] 간단한 어플을 실제로 배포해보기(개발 환경 부분) 본문
현재 글은
https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci/dashboard
을 수강하며 정리한 내용입니다.
문제시 비공개로 처리 하도록 하겠습니다.
따라하며 배우는 도커와 CI환경 - 인프런 | 강의
이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
먼저 처음부터 배포까지 어떠한 흐름인지 그림으로 보겠습니다.
리액트 앱 설치하기
일단 docker-react-app 폴더를 만들고 VSCode로 열어줍니다.
그리고 터미널을 키고 아래의 명령어를 입력해서 react를 설치합니다.
npx create-react-app ./
./ (현재 디렉토리에)
그러면 아래와 같은 폴더와 파일들이 나오게됩니다.
실행을 위해선
npm run start
테스트를 위해선
npm run test
빌드를 위해선 (운영환경에선 build한 파일을 올리는 것임.)
npm run build
이렇게 react app을 설치해 보았습니다.
도커를 이용하여 리앱트 앱 실행하기
도커 애플리케이션을 실행하기 위해선 도커파일을 생성해야 합니다.
도커파일은 개발 환경과 운영 환경을 위한 것을 분리시켜 놓는것이 좋습니다. (세세히 컨트롤 하기 위해)
일단 개발 환경에서의 도커파일을 작성해 보겠습니다.
FROM node:alpine
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","start"]
그 다음 빌드를 해보겠습니다.
docker build -f Dockerfile.dev .
* -f Dockerfile.dev : Dockerfile.dev 을 참고하여 build하라
* 베이스 이미지가 노드 이므로 build를 할 때 도커 환경엔 npm install 할 때 node_modules가 생기기 때문에 로컬 환경에선 삭제해도 무관 (node_module은 사이즈도 크고 이번 프로젝트는 react만 사용할 거기 때문...)
그리고 포트매핑을 시켜서 리엑트 앱을 실행시켜 보겠습니다.
docker run -it -p 3000:3000 ksoon1985/docker-react-app
* it : i(상호 입출력) t(tty를 활성화 시켜 bash쉘을 사용) react 버전이 올라가면서 꼭 붙여줘야합니다.
실행을 하면 실행이 잘되는것을 볼 수 있습니다.
도커 볼륨을 이용한 소스 코드 변경
소스 코드를 변경해도 이미지를 다시 빌드하지 않기 위해서 COPY 대신 VOLUME을 이용했었습니다.
볼륨을 사용해서 어플리케이션 실행하는 법
App.js 에서 learn react ==> 안녕하세요 ~ 로 바꿔줘봅니다.
docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v "%cd%":/usr/src/app ksoon1985/docker-react-app
브라우저에 실행이 잘 됩니다. ~
근데 너무 저 위의 명령어가 깁니다. ;;
Docker-Compose를 이용해 봅시다.
version: '3'
services:
react:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- /usr/src/app/node_modules
- ./:/usr/src/app
stdin_open: true
docker compose를 이용해서 실행을 시켜 봅시다.
docker-compose up
실행이 잘되며 소스 코드에 변경이 생긴다면
docker-compose up --build 를 합니다.
리액트 앱 테스트 하기
npm run test
하면 에러가 발생합니다.
그 이유는 로컬환경에선 node_modules가 없기 때문입니다.
그렇기 때문에 테스트도 도커 환경에서 해야 합니다.
docker run -it ksoon1985/docker-react-app npm run test
하면 테스트 성공이 잘 나옵니다.
테스트도 소스 코드 변경하면 자동으로 반영되는 것처럼 테스트 소스도 추가하면 바로 반영되게 해보겠습니다.
이는 docker compose 파일을 수정하면 됩니다.
version: '3'
services:
react:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- /usr/src/app/node_modules
- ./:/usr/src/app
stdin_open: true
tests:
build:
context: .
dockerfile: Dockerfile.dev
volumes:
- /usr/src/app/node_modules
- ./:/usr/src/app
command: ["npm","run","test"]위처럼 tests 부분을 추가시켜 주엇습니다.
docker-compose up --build
하면 두개의 컨테이너(리액트 앱, 테스트) 를 모두 실행하게 됩니다.
운영환경을 위한 Nginx
현재까지는 리액트 앱을 개발 환경에서 다뤄보았고 이제는 운영 환경(배포 후)을 알아보겠습니다.
먼저 개발환경과 운영환경에서 리액트가 실행되는 과정을 보겠습니다.
개발 환경
운영 환경
개발 서버는 개발 환경에 특화된 기능들(소스 변경 시 자동으로 전체 앱을 다시 빌드해서 반영해주는) 및 무거운 기능들이 있기에 Nginx보다 적합합니다.
운영 서버는 운영 환경에 초점을 두어 Nginx같은 경우 경량한 웹 서버로써 클라이언트로 부터 요청을 받을 때 요청에 맞는 정적파일을 응답해주는 Http 웹 서버로 활용되기도 하고, Reverse Proxy Server로 활용하여 WAS 서버의 부하를 줄일 수 있는 로드 밸런서로 활용 되기도 합니다.
운영환경 도커 이미지를 위한 Dockerfile 작성
운영 환경에서 도커 파일은 2가지 단계가 있습니다.
첫 번째 단계는 빌드 파일들을 생성합니다. (Builder Stage)
두 번째 단계는 Nginx를 가동하고 첫 번째 단계에서 생성된 빌드 폴더의 파일들을 웹 브라우저의 요청에 따라 제공해 줍니다. (Run Stage)
운영 환경의 도커파일을 자세히 보면
Dockerhub 공식 nginx 설명
FROM nginx
COPY static-html-directory /usr/share/nginx/html
운영환경을 위한 Dockerfile 을 작성해 줍니다.
FROM node:alpine as builder
WORKDIR '/usr/src/app'
COPY package.json .
RUN npm install
COPY ./ ./
FROM nginx
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
그리고 build를 해줍니다.
docker build ./
파일 이름이 Dockerfile 이기 때문에 -f 옵션은 안해줘도 됩니다.
그다음 실행을 시켜보도록 하겠습니다.
docker run -p 8080:80 028e3596bf6f
80 : Nginx의 기본 포트번호입니다.
028e3596bf6f : Dockerfile로 build된 이미지
localhost:8080 으로 브라우저에 입력하면 실행이 잘 되는것을 확인할 수 있습니다.
아뵵!
이번엔 정말 기본적인 리액트앱을 만들고 도커로 실행을 해보았고
volumn, compose, test 도 해보앗습니다.
그리고 운영환경을 위한 Nginx도 이용해보았습니다.
다음 글에선 테스트 하고 배포하는 부분에 중점을 두어 프로젝트를 만들어 보겠습니다.
'Docker' 카테고리의 다른 글
| [Docker] 복잡한 어플을 실제로 배포해보기 (개발 환경 부분) (0) | 2022.04.04 |
|---|---|
| [Docker] 간단한 어플을 실제로 배포해보기(테스트 & 배포) (0) | 2022.03.30 |
| [Docker] Docker Compose (0) | 2022.03.26 |
| [Docker] 도커를 이용한 간단한 Node.js 어플 만들기 (0) | 2022.03.25 |
| [Docker] 직접 도커 이미지 만들어 보기 (0) | 2022.03.24 |
