Sprint - 애플리케이션 컨테이너화

#학습 목표

• 풀스택 앱 컨테이너화와 Docker Compose를 이용한 실행

 

#해결 과제

• 풀스택 애플리케이션 아키텍처

• frontend 디렉토리에 있는 파일이 이미지로 빌드되어야 합니다.
  • Apache HTTP Server (httpd:2.4)를 base image로 삼아야 합니다.
  • 컨테이너 내 80포트로 접속시, frontend/index.html이 표시되어야 합니다.
  • frontend/Dockerfile을 채워넣으세요.
• backend 디렉토리에 있는 파일이 이미지로 빌드되어야 합니다.
  • Node.js 이미지 (node:16-alpine) 를 base image로 삼아야 합니다.
  • 컨테이너 내 80포트로 접속시, hello from server가 응답으로 표시되어야 합니다.
  • backend/Dockerfile을 채워넣으세요.
• docker-compose.yml 파일을 통해 두 이미지가 동시에 실행되어야 합니다.
  • 두 이미지는 아키텍처에 표시되어 있는 포트 번호로 서로 통신할 수 있어야 합니다.
  • frontend는 backend에 의존성을 가집니다.
  • docker-compose.yml을 채워넣으세요.
• 아래와 같은 화면이 보이면 성공입니다! fork 후 Pull Request를 이용해 제출하세요.

 

#실습 자료

레파지토리 : repository 주소

 

#과제 항목별 진행 상황

💡 frontend 디렉토리에 있는 파일을 이미지로 빌드

Step 1 : frontend 앱 디렉토리에 Dockerfile 파일 작성

# 베이스 이미지를 httpd:2.4 로 사용합니다.
FROM httpd:2.4

# 호스트의 현재 경로에 있는 파일을 생성할 이미지 /usr/local/apache2/htdocs/ 에 복사합니다.
COPY ./ /usr/local/apache2/htdocs/

Step 2 : frontend image 파일 빌드 후 container run 테스트

#frontend 빌드하여 이미지 파일 생성 
$ docker build -t frontend .

#이미지 목록 조회 (내가 생성한 이미지 파일이 있는지 확인) 
$ docker images

#frontend 컨테이너 80포트로 실행 
$ docker container run --name fronttest -d -p 80:80 frontend

Step 3 : 브라우저에서 해당 포트로 접속해 정상 기동 확인

 

💡 backend 디렉토리에 있는 파일을 이미지로 빌드

Step 1 : backend 앱 디렉토리에 Dockerfile 파일 작성

# .../sprint-docker-compose/backend/Dockerfile
FROM node:16-alpine

# 이미지 안에 애플리케이션 코드를 넣기 위한 디렉토리 설정
WORKDIR /usr/src/app

# 이 이미지에는 이미 Node.js와 NPM이 설치되어 있으므로 npm 바이너리로 앱의 의존성을 설치하기만 하면 됨
# 앱 의존성 설치
# 가능한 경우(npm@5+) package.json과 package-lock.json을 모두 복사하기 위해 와일드카드를 사용
COPY package*.json ./

# 현재는 개발 목적으로 빌드
RUN npm install

# 도커 이미지 안에 앱의 소스 코드를 추가
COPY . .

# 앱이 바인딩 되어 있는 포트와 docker 데몬 매핑
EXPOSE 80

# 런타임을 정의하는 CMD로 앱 실행 명령어를 정의(서버를 구동하도록 node server.js을 실행하는 기본 npm start을 사용)
CMD [ "node", "app.js" ]

Step 2 : backend image 파일 빌드 후 container run 테스트

# Dockerfile이 있는 위치에서 빌드
$ docker build . -t backend

# 컨테이너 실행
$  docker run --name backendtest -p 3333:80 backend

Step 3 : 브라우저에서 해당 포트로 접속해 정상 기동 확인

 

💡 docker-compose.yml 파일을 통해 두 이미지를 동시에 실행

Step 1 : docker-compose.yml 작성

# .../sprint-docker-compose/docker-compose.yml
# docker compose 파일을 완성하고 <http://localhost로> 접속했을 때 서버로부터 온 메시지가 표시되게 만드세요
version: "3.0"

services:
  apache2:
    image: frontend
    restart: 'always'
    ports:
      - "80:80"
    container_name: frontend_client

  node:
    image: backend
    restart: 'always'
    ports:
      - "3333:80"
    container_name: backend_server

Step 2 : docker compose up 명령어로 두 서버를 동시 기동

# docker-compose.yml 파일이 있는 위치에서 두 서버 기동
$ docker compose up -d

# 컴포즈한 두 서버 동시 중지
$ docker compose down

Step 3 : 브라우저에서 접속해 정상 기동 확인

 

#TROUBLE SHOOTING LOG

📝 문제 1 : docker-compose.yml 파일 생성 후 comose up으로 기동했을 때 80포트에서 웹 서버를 찾지 못하는 문제

원인

• docker-compose.yml 에서 frontend 포트를 잘 못 씀
• 풀스택 애플리케이션 아키텍쳐를 보고 제대로된 포트로 매핑
  • frontend
    • 도커에서 사용하는 포트: 80
    • 호스트에서 사용하는 포트: 80
  • backend
    • 도커에서 사용하는 포트: 80
    • 호스트에서 사용하는 포트: 3333

// .../sprint-docker-compose/frontend/script.js를 보면 3333포트로 요청하는 것을 확인 가능

fetch('<http://localhost:3333/>')
.then(resp => resp.text())
.then(text => {
  console.log(text)
  document.getElementById("message-from-server").textContent = text
})

 

해결 방안

• docker-compose.yml 파일의 포트 매핑 정보("8080:80" → - "80:80")를 제대로 수정

# .../sprint-docker-compose/docker-compose.yml
services:
  apache2:
    image: frontend
    restart: 'always'
    ports:
      - "80:80"
    container_name: frontend_client

  node:
    image: backend
    restart: 'always'
    ports:
      - "3333:80"
    container_name: backend_server

 

#References

Node.js 웹 앱의 도커라이징

Node.js 웹 앱의 도커라이징 | Node.js

Docker docs - The Compose file

The Compose file

Docker hub - httpd Official Image Doc

httpd - Official Image | Docker Hub