[Docker] Node.js 웹 앱의 도커라이징

 

🐳

진행 중인 프로젝트에서 노드 앱을 Dockerize 할 필요성이 생겨
여러 블로그와 유튜브 그리고 Node.js 공식 홈페이지를 찾아보면서 알아낸 정보들을 포스팅하고자 합니다.

 

📌 목표

node로 3000번 포트에 서버를 열고 화면에 'Hello Wolrd!'를 출력하는 노드 앱을
도커 이미지로 만든 뒤 도커 컨테이너로 실행해서
localhost 5000번 포트로 접속 시 화면에 'Hello Wolrd!'가 출력되는지 확인하기!

 

 

💼 준비물

• node app을 만들 vscode
• docker desktop(Windows) 프로그램

<docker desktop 다운로드 링크>

https://www.docker.com/products/docker-desktop

Docker Desktop for Mac and Windows | Docker

 

 

🟩 Node App

<package.json>

{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "First Last <first.last@example.com>",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.1"
  }
}

먼저 애플리케이션과 의존성을 알려주는 package.json 파일을 생성합니다.
package.json 파일을 생성했다면 아래의 명령어를 실행해줍니다.

npm install

 

<server.js>

"use strict";

const express = require("express");

// 상수
const PORT = 3000;

// 앱
const app = express();
app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(PORT, console.log(`Running on http://localhost:${PORT}`));

Express 프레임워크로 웹앱을 정의하는 server.js를 생성합니다.
포트번호는 '3000'입니다.

 

 

🐳 Dockerfile 파일 생성

다음은 Docker 이미지를 사용해서 Docker 컨테이너 안에서 이 앱을 실행할 텐데 먼저 이 앱의 Dcoker 이미지를 생성해야 하므로 'Dockerfile'을 생성해줍니다.

<dockerfile>

FROM node:latest

# 앱 디렉터리 생성
WORKDIR /usr/src/app

# 앱 의존성 설치
# 가능한 경우(npm@5+) package.json과 package-lock.json을 모두 복사하기 위해
# 와일드카드를 사용
COPY package*.json ./

RUN npm install
# 프로덕션을 위한 코드를 빌드하는 경우
# RUN npm ci --only=production

# 앱 소스 추가
COPY . .

EXPOSE 3000
CMD [ "node", "server.js" ]

 

어떤 이미지를 빌드할 것인지를 정의합니다. Node.js 최신 버전을 사용합니다.

FROM node:latest

 

이미지 안에 애플리케이션  코드를 넣기 위한 디렉터리를 생성합니다. 이 디렉터리가 작업 디렉터리가 됩니다.

WORKDIR /usr/src/app

 

이 이미지에는 이미 node.js와 npm이 설치되어있기 때문에 'npm isntall'로 앱의 의존성을 설치합니다.

COPY package*.json ./

RUN npm install

 

이미지 내에 앱의 소스코드를 넣기 위해 COPY 지시어를 사용합니다.

COPY . .

 

앱이 3000번 포트에 바인딩되어 있으므로 EXPOSE 지시어를 사용해서 docker 데몬에 매핑합니다.

EXPOSE 3000

 

서버를 구동하도록 명령어 'node server.js' 을 실행시킵니다.

CMD [ "node", "server.js" ]

 

 

🐳 .dockerignore 파일 생성

Dockerfile과 같은 경로에 .dockerignore 파일을 아래의 내용으로 생성합니다.

node_modules
npm-debug.log

docker 이미지에 로컬 모듈과 디버깅 로그를 복사하는 것을 방지하기 위함입니다.

 

 

🖼️ 이미지 빌드

현재까지 도커 데스크톱 앱에 빌드된 이미지가 없는 상태입니다.

 

vscode에서 터미널을 열고 아래의 명령어를 입력해 이미지를 빌드합니다.

docker build . -t hello-world

도커 이미지를 빌드하고 'hellow-wolrd'라는 이미지가 빌드된 것을 확인할 수 있습니다.

터미널에서도 docker images 명령어를 통해 확인할 수 있습니다.

docker images

 

 

🚀 이미지 실행 / 컨테이너 생성

docker run -d -p 5000:3000 hello-world

docker가 컨테이너의 3000번 포트를 local의 5000번 포트로 매핑하였습니다.
-d 옵션은 데몬으로 실행(백그라운드에서 실행),
-p 옵션은 호스트와 컨테이너의 포트를 연결하는 옵션입니다.

docker run -d -p {호스트 포트번호}:{컨테이너 포트번호} {이미지명}:{태그}

쉽게 말해 도커로 이미지를 빌드하고 컨테이너를 생성했을 때
도커 컨테이너 내부에서는 3000번 포트로 'Hello World!'를 화면에 띄워주는 앱이 실행되고 있고
이것을 호스트의 5000번 포트에 매핑해서 사용자가 localhost:5000로 접근 시
컨테이너의 3000번 포트에서 실행되고 있는 프로그램을 볼 수 있게 되는 것입니다. 

{이미지명}:{태그}의 경우 이미지 명인 'hello-world'만 입력하고 태그명을 입력하지 않았기 때문에  
컨테이너 태그 명은 'relaxed_mestorf'와 같이 랜덤으로 작명됩니다.

컨테이너가 잘 생성된 것을 확인할 수 있습니다!

 

 

👨🏻‍💻 테스트

로컬 호스트 5000번 포트로 접근 시 잘 작동하는지 테스트 성공!

 

 

 

📚 참고

https://nodejs.org/ko/docs/guides/nodejs-docker-webapp/