[도커 공식문서 학습] 2. Docker를 활용한 애플리케이션 개발

개요

Docker Desktop을 설치한 후, 이제 본격적으로 애플리케이션을 개발할 준비가 되었습니다. 이 가이드에서는 다음과 같은 작업을 수행합니다.

• 예시 프로젝트를 클론하고 시작하기
• 백엔드 및 프론트엔드 코드 수정하기
• 변경 사항을 실시간으로 확인하기

프로젝트 시작하기

Docker 기반 애플리케이션 개발을 시작하려면 먼저 프로젝트를 다운로드해야 합니다.

1. 프로젝트 클론

아래 명령어를 실행하여 GitHub에서 예제 프로젝트를 클론하거나, 프로젝트 ZIP 파일을 다운로드합니다.

 git clone https://github.com/docker/getting-started-todo-app

2. 프로젝트 디렉터리 이동

클론한 프로젝트 디렉터리로 이동합니다.

 cd getting-started-todo-app

3. Docker Compose로 개발 환경 시작

Docker Compose를 사용하여 개발 환경을 시작합니다.

 docker compose watch

이 명령을 실행하면 필요한 컨테이너 이미지가 다운로드되고, 컨테이너가 실행됩니다. 몇 분 내로 애플리케이션이 정상적으로 실행될 것입니다.

이후 브라우저에서 http://localhost로 접속하면 간단한 To-Do 애플리케이션을 확인할 수 있습니다.

구성 요소 살펴보기

이 Docker 환경에는 여러 개의 컨테이너가 존재하며, 각각의 역할은 다음과 같습니다.

• React 프론트엔드: Node 컨테이너에서 React 개발 서버 실행 (Vite 사용)
• Node 백엔드: To-Do 목록을 관리하는 API 제공
• MySQL 데이터베이스: To-Do 항목을 저장하는 데이터베이스
• phpMyAdmin: 데이터베이스를 웹에서 관리하는 UI (http://db.localhost에서 접속 가능)
• Traefik 프록시: Traefik은 요청을 올바른 서비스로 라우팅하는 애플리케이션 프록시입니다. localhost/api/* 에 대한 모든 요청은 백엔드로, localhost/* 에 대한 요청은 프론트엔드로, db.localhost 에 대한 요청은 phpMyAdmin으로 보냅니다. 이를 통해 각 서비스마다 다른 포트를 사용하는 대신 80 포트를 사용하여 모든 애플리케이션에 접근할 수 있습니다.

이 환경을 사용하면 개발자는 어떤 서비스도 설치하거나 구성할 필요가 없으며, 데이터베이스 스키마를 채우거나 데이터베이스 자격 증명을 설정하는 등의 작업을 할 필요가 없습니다. Docker Desktop만 있으면 됩니다. 나머지는 모두 자동으로 작동합니다.

애플리케이션 수정하기

이제 코드를 수정하고, Docker가 실시간으로 변경 사항을 반영하는 과정을 경험해 봅시다.

1. 환영 메시지 변경하기

현재 /api/greeting 엔드포인트는 "Hello world!" 메시지를 반환합니다. 이를 랜덤한 환영 메시지로 변경해보겠습니다.

파일: backend/src/routes/getGreeting.js

변경 전:

const GREETING = 'Hello world!';

module.exports = async (req, res) => {
    res.send({
        greeting: GREETING,
    });
};

변경 후:

const GREETINGS = [
    "Whalecome!",
    "All hands on deck!",
    "Charting the course ahead!",
];

module.exports = async (req, res) => {
    res.send({
        greeting: GREETINGS[Math.floor(Math.random() * GREETINGS.length)],
    });
};

 

파일을 저장하고 브라우저를 새로고침하면 새로운 환영 메시지가 무작위로 표시됩니다.

2. 입력 필드 플레이스홀더 변경하기

To-Do 항목을 입력하는 필드의 placeholder를 변경해보겠습니다.

파일: client/src/components/AddNewItemForm.jsx

변경 전:

<Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="New Item"
    aria-label="New item"
/>

변경 후:

<Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="What do you need to do?"
    aria-label="New item"
/>

저장 후 브라우저를 확인하면 변경된 플레이스홀더를 볼 수 있습니다.

3. 배경색 변경하기

배경색을 변경하여 UI를 개선해보겠습니다.

파일: client/src/index.scss

변경 전:

body {
    background-color: #ffffff;
    margin-top: 50px;
    font-family: 'Lato';
}

변경 후:

body {
    background-color: #99bbff;
    margin-top: 50px;
    font-family: 'Lato';
}

파일을 저장하면 브라우저에서 즉시 변경 사항이 반영됩니다.

요약

불과 몇 분 만에 여러분은 아래의 일들을 할 수 있었습니다.

• Docker Desktop과 코드 편집기만으로 별도의 설치 작업 없이 완전한 개발 프로젝트를 시작했습니다. 컨테이너 환경이 필요한 모든 것을 갖춘 개발 환경을 제공해 주었습니다.
• 로컬 환경에서의 변경 사항이 컨테이너에 즉시 반영되었습니다. 이는 1) 로컬 파일이 컨테이너 환경에서 공유되고, 2) 각 컨테이너에서 실행중인 프로세스가 로컬 파일의 변경 사항을 감시하고 있기 때문에 가능했습니다.

Docker Desktop은 이 이상의 기능을 제공합니다. 컨테이너를 활용하면 거의 모든 환경을 만들 수 있고, 이를 팀과 쉽게 공유할 수 있게됩니다.

다음 단계

다음 가이드에서는 수정된 애플리케이션을 Docker 이미지로 패키징하고, 이를 Docker Hub에 푸시하는 방법을 배웁니다.

---

원문

https://docs.docker.com/get-started/introduction/develop-with-containers/

Develop with containers