본문 바로가기

카테고리 없음

Inflearn 9주차 - React 실행을 위한 Docker 실습

1. 도커란?

 

도커란 컨테이너를 사용해 응용 프로그램을 더 쉽게 만들고, 배포하고, 실행할 수 있도록 설계된 도구이다.

컨테이너 기반의 오픈소스 가상화 플랫폼이며 생태계이다. 

도커를 쓰는 이유는, 어떤 프로그램을 다운 받는 과정을 간단하게 만들기 위해서다. 

 

만약, 도커 없이 프로그램을 받아 실행한다면?

Redis를 받는 과정을 통해 Docker 사용 유무에 따른 차이점을 살펴보자.

Redis 홈페이지로 이동 -------> redis.io

 

wget이 없기 때문에 redis installl시에 에러가 발생했다.

그럼 다시 wget을 설치하고, redis를 설치하고, 또 의존성 문제 등으로 다운에 실패하면 다시 부가적인 것들을 설치하고... 반복하다보면 굉장히 번거롭고 설치하는데 많은 어려움을 겪을 것이다.

 

만약 도커로 Redis를 받게된다면?

"docker run -it redis" > 다운로드 완료!

 

매우 간단하게 redis를 다운받을 수 있다.

 

보다시피 도커를 이용해 프로그램을 설치하면, 예상치 못한 에러 발생도 줄고, 설치 과정도 훨씬 단순해지기 때문에

많이들 도커를 이용하는 것이다.

 

 

 

2. 컨테이너란?

컨테이너를 이용하면, 여러 물건들을 손쉽게 나를 수 있다.

 

서버에서 컨테이너의 개념도 이와 동일하다.

마치 컨테이너 안에 운반할 물건들을 담듯이, 컨테이너를 이용해 프로그램을 실행하는데 필요한 모든 준비물품들을 한데모아 추상화한것이다.

 

컨테이너 안에 다양한 프로그램, 실행 환경을 컨테이너로 추상화하고, 

컨테이너를 통해 동일한 인터페이스를 제공하여 프로그램의 배포 및 관리를 단순하게 해준다.

AWS, Azure, Google cloud 등 어디에서든 실행 가능하게 해준다.

 

 

 

>> Window에서 도커 설치 <<

 

*나는 도커 설치 후 실행시 unexpected WSL error 때문에 조금 헤맸다. 

전에 학교 수업에서 했던 리눅스 관련 실습때문에 vmware가 깔려있는데, vmware와 docker가 둘 다 가상화 기능을 사용하기 때문에 문제가 발생한 것 같았다. VMware에서 VT-x 또는 AMD-V 가상화 기술의 독점 사용을 방지하려면 VMware 설정을 조정해야 한다는데, 나는 vmware를 실습 이후로 사용한 적이 없어서 일단 vmware를 삭제 했더니 간단히 문제가 해결되었다.

 

Window에서 도커 설치하는 법은 아래와 같다.

1) docker.com 사이트 접속

https://www.docker.com/

 

Docker: Accelerated Container Application Development

Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.

www.docker.com

2) 우측 상단 Get Started 버튼 클릭

3) Download for Windows 클릭해 docker installer 설치

 

 

4) 도커 회원가입

5) 도커 설치 후 컴퓨터 재시작

6) 도커 로그인 후 "docker version" 명령어로 도커 잘 설치되었는지 확인.

 

 

>> Docker 사용 시 흐름 <<

 

항상 도커를 사용할 때는 

1. 도커 CLI에 커맨드를 입력한다.

2. 도커 서버가 입력한 커맨드를 받아 동작을 수행(이미지 생성, 컨테이너 실행)한다.

 

예를 들어 도커 실행 후, cmd창에 아래와 같은 command 를 입력했다고 하자.

docker run hello-world

 

실행 흐름은 다음과 같다.

1) 도커 클라이언트에 command 입력(client -> server로 요청을 보냄)

2)서버에서 hello-world라는 이미지가 이미 로컬에 cache되어있는 상태인지 탐색

(cache되어있지 않다면, Unablet to find image~ 문구가 표시됨.)

3) 없는 상태라고 가정했을 때, 이미지들이 저장되어있는 Docker Hub에 가서 해당 이미지를 가져오고 로컬에 cache로 보관함.

4) 한번 불러오고 나서는 로컬에 cache되어있으니 해당 이미지를 이용해 컨테이너를 생성한다. 

 

실행 결과 화면을 보면 아래와 같이 Hello from Docker!가 출력되었다.

 

 

>> 이미지로 컨테이너 생성하기 <<

이미지로 컨테이너를 생성하고, 반대로 컨테이너에서 이미지를 생성해 낼 수도 있다.

리마인드하자면, 이미지는 응용 프로그램을 실행하는 데 필요한 모든 것을 포함하고 있다.

 

응용 프로그램을 실행하는 데 필요한 것은

1) 컨테이너 시작 시 실행된느 명령어 ex) 리액트로 본다면, npm run start

2) 파일 스냅샷 ex) 컨테이너에서 kakaotalk을 실행하고 싶다면 카카오톡 실행하는데 필요한 파일

이 있을 것이다.

 

 

이미지로 컨테이너를 만드는 순서는 아래와 같다.

 

1) Docker 클라이언트에 docker run <이미지>를 입력해준다.

2) 도커 이미지에 있는 파일 스냅샷을 컨테이너 하드 디스크에 옮겨준다.

 

3. 이미지에서 가지고 있는 명령어를 컨테이너로 로드해 카카오톡을 실행시켜준다.

 

 

>> 도커 이미지 생성하는 법 <<

 

지금까지는 Docker Hub에 있던 기존 이미지를 가져와 사용했다.

이미지를 사용자가 직접 만들어 사용할 수 도 있고, 만든 이미지를 도커 허브에 올려서 공유할 수도 있다.

도커 이미지를 생성하는 법에 대해 알아보자.

 

다시 리마인드 하자면, 도커 이미지란, 컨테이너 만들기 위해 필요한 설정이나 종속성들을 갖고 있는 소프트웨어 패키지이다.

 

1) 도커 파일을 작성한다.

도커 파일은 이미지를 만들기 위한 설정 파일이고, 컨테이너 가 어떻게 동작해야 하는지에 대한 설정들을 정의한다.

컨테이너를 위한 설명서? 가이드라인? 이라고 보면 된다.

 

2) 도커 클라이언트에 도커 파일에 입력된 명령어들을 전달한다.

 

3) 도커 서버측에서는 도커 클라이언트에 전달된 모든 중요한 작업들을 하는 곳이다.

 

4) 이미지를 생성한다.

 

도커 파일 생성 >> 도커 클라이언트 >> 도커 서버 >> 이미지 생성 흐름으로 절차가 수행된다.

 

그럼 이제 도커 파일을 만드는 법에 대해 알아보자.

 

>> 도커 파일 작성하는 법 <<

다시 한번 리마인드,

도커 파일이란 도커 이미지를 만들기 위한 설정 파일이다. 컨테이너가 어떻게 동작해야하는지에 대한 설정들을 정의해주는 곳이라고 생각하면 된다.

 

만드는 순서는 

1) 베이스 이미지를 명시해준다.(파일 스냅샷에 해당) -> FROM baseImage

2) 추가적으로 필요한 파일들을 다운받기 위한 몇가지 명령어를 명시한다.(파일 스냅샷에 해당) -> RUN command

 

근데 여기서, 베이스 이미지라는 건 무엇을 말하는 걸까?

도커 이미지는 여러 layer로 구성되어있다. 그 중 베이스 이미지는 해당 레이어들의 기반이 되는 부분이다.

 

 

 

도커 이미지를 생성할 폴더를 하나 만들고(dockerfile-folder), 해당 폴더에 dockerfile을 생성했다.

 

dockerfile-folder 생성 >vscode에서 폴더 열기 > dockerfile 생성 > dockerfile 안에 아래와 같은 포맷으로 도커 파일 작성

순으로 도커 이미지 생성을 위한 도커 파일을 작성해준다.

#베이스 이미지 명시해주기
FROM baseImage

#추가적으로 필요한 file들 다운로드
RUN command

#컨테이너 시작 시 실행될 명령어 명시
CMD ["executable"]

 

-FROM: 이미지 생서 시 기반이 되는 이미지 레이어. <이미지 이름>:<태그(버전)> 형식으로 작성한다.

태그가 없으면 디폴트로 가장 최신 버전의 이미지를 다운 받는다.

ex) ubuntu: 14.04

 

-RUN: 도커 이미지가 생성되기 전에 수행할  셸 명령어들을 입력한다.

 

-CMD: 컨테이너 시작 시 실행할 실행 파일 또는 셸 스크립트이다.

해당 명령어는 DockerFIle 내 한번만 사용할 수 있다.

 

>> hello를 출력하는 이미지 파일 생성 실습 <<

 

위에서 배웠던 대로 도커 이미지 생성을 위한 도커 파일을 아래와 같이 작성했다.

#베이스 이미지 명시해주기
FROM alpine

#추가적으로 필요한 file들 다운로드
#RUN command

#컨테이너 시작 시 실행될 명령어 명시
CMD ["echo","hello"]

 

>> 도커 파일로 도커 이미지 생성 <<

 

이제 도커 파일 작성까지 완료되었으니, 도커 파일에 입력된 것들이 도커 클라이언트에 전달된 후, 도커 서버가 인식하게 해야 한다. 그렇게 하기 위해서는 vscode의 terminal을 열어 아래 명령어를 입력해준다.

해당 디렉토리 내에서 dockerfile을 찾아 도커 클라이언트에 전달시켜준다. 

(./은 현재 디렉토리를 가리킴.)

docker build ./

로 도커 파일 빌드하기

 

build 과정의 흐름은 아래와 같다.

베이스 이미지에서 다른 종속성이나 새 커맨드를 추가할 때는 임시 컨테이너를 생성한 후, 해당 컨테이너를 토대로 새로운 이미지를 만든다. 그리고 해당 컨테이너는 지워준다.

 

[build과정 실행 흐름]

 

이미지 ---> 임시 컨테이너  ------------------------> 새로운 이미지(임시 컨테이너는 삭제)

                            ^

               새 명령어, 새 파일 스냅숏 ...

 

 

 

>> 생성된 도커 이미지 실행 <<

 

docker run {docker image ID} 명령어를 통해 생성된 도커 이미지를 생성할 수 있다.

도커 이미지에 대한 id값은 "docker images" 명령어로 확인할 수 있다.

docker run (writing imaeg shar256부분 일부 복사)

 

 

>>> 리액트 도커로 실행해보기 <<<

전에 만들었던 react-todo-app에 dockerfile 생성 후, 이미지 생성 시 필요한 옵션들 위와 같이 작성해주기

 

*react에서 alpine 대신 node 이미지를 사용하는 이유는?

alpine 이미지는 가장 최소한의 경량화된 파일들이 들어있기 때문에 npm을 위한 파일이 들어있지 않다.

따라서 run 부분에 npm install을 할 수가 없다. 알파인 이미지 사이즈는 5MB정도밖에 되지 않기 때문이다.

 

*npm install을 통해 package.json에 적혀있는 종속성들을 웹에서 자동으로 다운 받아 설치해줌으로써

현재 리액트 JS 앱을 만들때 필요한 모듈들을 다운받아 설치하는 역할을 한다.

#baseImage: 이름 node, 버전 16-alpine
FROM node:16-alpine

#지정된 경로가 해당 컨테이너 안에 자동 생성
WORKDIR /usr/src/app

#컨테이너 안의 경로
COPY package.json ./

#종속성 설치
RUN npm install

COPY ./ ./

CMD ["npm", "run", "start"]

 

docker build ./

로 이미지 파일 빌드하기

 

이미지 실행해보기

localhost:3000으로 접속한다.

접속이 바로 되지 않을 시, 브라우저 포트 3000번과 컨테이네 내부 3000포트를 아래와 같이 맵핑해준다.

밑줄친 이미지 아이디는 docker images 명령어를 통해 확인할 수 있음.

 

접속에 성공하였다.

 

*윈도우에서 도커 설치가 안되는 경우 AWS에 접속해 EC2에서 도커 설치 및 실행이 가능하다.