[Docker] Dockerfile 은 무엇일까? (2) - Dockering 실습 (리액트와 nginx를 도커라이징 하기)

해당 글은 2부작으로 이루어져 있습니다.

• 1. Dockerfile 은 무엇일까? (1)- 도커 파일이 뭐고 어떤 명령어가 있는지 알아보자. 에서는 기본적으로 도커 파일이 무엇이고 왜 사용하며 어떤 명령어가 있는지 알아보는 시간이고

  2. Dockerfile 은 무엇일까? (2)- Dockering 실습 (리액트와 nginx를 도커라이징 하기)은 1부작에서 배운 내용을 바탕으로 실제 서비스를 도커라이징 해보는 시간입니다.

서로 의존하고 있는 개념이 있으므로 한 번 가볍게 읽어보시는 것도 좋을 것 같습니다 :)

---

지난 시간에 우리는 도커 파일에 대해서 알아보았고, 어떤 명령어들이 있는지 확인했다.

 

잠시 빠르게 지난 시간의 내용을 복습해보자.

Recap

Dockerfile

도커파일이란? 하나의 완성된 이미지를 구성하기 위해 있어야할 패키지, 소스코드, 스크립트들을 하나의 FILE로 기록하여 도커가 읽고 이를 실행해 이미지를 만들 명령파일.

 

이라고 했다.

 

그리고 이 과정을 BUILD 과정이라고 하고 이를 수행할 수 있게 하는 명령어가 바로 빌드 명령어이다.

 

우리는 이 빌드 명령어를 통해서 도커 파일을 구성하게 된다.

그리고 다음과 같은 빌드 명령어를 배웠다.

• FROM
• MAINTAINER
• RUN
• ADD
• WORKDIR
• EXPOSE
• CMD

그리고 이 명령어들을 짧게 설명해보자면

 

FROM

Base Image를 지정함

 

MAINTAINER

작성자 혹은 개발자를 넣는 부분, 생략해도 무방

 

RUN

이미지 내부에서 실행할 명령어

 

ADD

Host PC 에서 File이나 Directory을 Docker Image로 Copy할 때 사용

 

WORKDIR

작업 디렉토리 지정할 때 사용

 

EXPOSE

포트 개방, 포트 포워딩

 

CMD

도커 컨에티너가 시작될 때 실행할 커맨드

 

---

 

Dockerizing

도커라이징은 오늘 실습의 핵심이다.

지난 시간에 도커라이징에 대해서 도커화 시키는 것이라고 했는데, 오늘은 실습을 통해 더 자세히 알아보자.

도커라이징

도커라이징은 우리가 만들 Application을 도커 이미지화하는 것이다.

 

우리는 우리가 만든 Application의 소스코드, 스크립트, 패키지들을 준비하고 도커 빌드 명령어를 통해서 이미지로 빌드하는 과정을 거칠 것이다.

 

이 과정을 다음과 같은 환경을 통해 구성할 것이다.

• Application : Create-React-App 애플리케이션
• Package : npm module
• Web Server : Nginx

실습에 대해

우선 실습을 전반적으로 설명하자면 다음과 같은 구조로 이루어진다.

준비물

• Creact-React-App 으로 만들어진 리액트 앱
• Dockerfile
• nginx.conf

Creact-React-App 으로 만들어진 리액트

일단 Create-React-App으로 리액트 애플리케이션을 준비한다.

만약 CRA를 사용해서 구축할 수 없다면 Create-React-App으로 리액트 개발 환경을 구축해보자.글을 확인하는 것도 추천한다.

Dockerfile

이번 실습의 꽃인 도커파일이다.

해당 파일에서 도커 엔진에게 빌드 명령어를 해석시키고 우리가 원하는 환경으로 세팅해달라고 명령하는 핵심적인 부분이다.

nginx.conf

Dockerfile에서 Base Image를 Nginx로 지정하는데, Default의 Nginx 설정 파일에서 우리가 미리 만들어 놓은 nginx.conf 파일로 바꿔치기 할 타겟 파일을 미리 호스트에서 구축해놓는다.

과정

우리는 다음과 같은 과정으로 진행할 것이다.

 

1. CRA앱의 루트 폴더에서 빌드를 실행한다.
2. nginx.conf 파일을 정의한다.
3. Dockerfile 에 빌드 명령어를 추가한다.
4. docker image를 빌드한다.
5. docker image를 실행한다.

CRA 의 빌드

우선 아무 CRA를 준비한다.

필자는 마침 이미지로 만들 서비스가 있기 때문에 해당 레포지토리에서 진행하도록 하겠다.

해당 CRA 디렉토리의 src와 같은 level에서 다음과 같은 파일을 생성해준다.

 

Dockerfile

nginx.conf

그리고 npm을 이용해서 빌드를 한다.

 

$ npm run build

그럼 build 라는 디렉토리가 생성되는데, 해당 디렉토리의 소스 코드를 우리가 만들 Nginx 도커에 복사할 예정이다.

 

nginx.conf 파일 정의

위에서 생성한 nginx.conf 파일에서 nginx의 기본 라우팅을 설정해주자.

여기서 설정할 내용은 작업 루트 디렉토리와 index html 파일이다.

server {
    listen 80;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

Dockerfile 정의

이제 도커 파일을 정의할 차례이다.

FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

차례대로 설명해보자면.

• FROM
  • 기반 이미지로 Nginx 이미지를 사용해라.
• RUN mkdir /app
  • 컨테이너를 실행하면 app이라는 디렉토리를 만들어라.
• WORKDIR /app
  • cd /app
• RUN mkdir ./build
  • 현재 디렉토리 (/app) 에서 build 디렉토리를 생성하기 위해 mkdir 명령어를 입력해라
• ADD ./build ./build
  • 호스트 PC에 있는 /build 폴더를 컨테이너 내부의 /build 폴더로 복사해라
• COPY ./nginx.conf /etc/nginx/conf.d
  • 호스트에 있는 nginx.conf 파일을 컨테이너 내부의 /etc/nginx/conf.d 경로로 복사해라.
• EXPOSE 80
  • 컨테이너의 80 포트를 열어라
• CMD ["nginx", "-g", "daemon off;"]
  • 컨테이너 실행 시 자동으로 실행할 nginx의 커맨드.

의 과정으로 동작하게 된다.

 

docker Image 빌드

그럼 이제 준비가 다 되었으니 build 명령어를 입력하자

.

docker build -t my-react-app

docker image 실행

그리고 도커를 실행해주면 끝!

 

docker run -d -p 8300:80 my-react-app

그럼 해시가 출력되고, 도커 프로세스 명령어로 확인해보면,

 

정상적으로 잘 동작하는 것을 알 수 있다.

 

(필자는 도커허브로 EC2 인스턴스에 배포했기 때문에 이미지 이름이 다르다.)

---

오늘은 이렇게 Dockerfile을 실제로 작성해보고 어떤식으로 사용하는지 알아보았다.

 

다음 시간에는 도커의 빌드는 어떻게 동작하는지 알아보자.