0Pricing
Docker & Kubernetes for Developers · 강의

웹 애플리케이션 컨테이너화

프런트엔드, 백엔드, 데이터베이스 구성 요소를 포함한 일반적인 웹 애플리케이션의 Docker화 과정을 단계별로 살펴봅니다.

웹 애플리케이션 컨테이너화은(는) CoddyKit의 무료 Docker & Kubernetes for Developers 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Docker & Kubernetes for Developers 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Docker & Kubernetes for Developers 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Containerizing Web Apps

Welcome to containerizing a web application! In this lesson, we'll walk through how to package a complete web application, including its frontend, backend, and database, into Docker containers.

This is a crucial step for modern development, enabling consistency across environments and simplifying deployment.

Web App Architecture

A typical web application usually consists of several components working together. For our example, we'll focus on a common three-tier architecture:

  • Frontend: The user interface (e.g., React, Vue, Angular) that runs in the browser.
  • Backend: The server-side logic (e.g., Node.js, Python Flask, Java Spring) that handles business logic and API requests.
  • Database: Stores and manages application data (e.g., PostgreSQL, MySQL, MongoDB).

Backend: Node.js API

First, let's create a Dockerfile for a simple Node.js backend API. This file tells Docker how to build an image for our backend service.

We'll start with a base Node.js image, copy our application code, install dependencies, and define the command to run the server.

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Frontend: React & Nginx

For our frontend, we'll use a multi-stage Dockerfile. This is a best practice for frontend applications, allowing us to build the app in one stage and then serve the static assets using a lightweight web server like Nginx in a separate, smaller stage.

This results in a much smaller final image.

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Database: PostgreSQL Service

For the database, we don't need to write a Dockerfile. Instead, we can use an official image from Docker Hub, like PostgreSQL.

It's crucial to use a Docker volume to ensure our database data persists even if the container is removed or recreated. We'll define this when we use Docker Compose.

Orchestration with Compose

Now that we have Dockerfiles for our frontend and backend, and know we'll use an official image for our database, we need a way to define and run all these services together.

This is where Docker Compose comes in. It uses a YAML file (docker-compose.yml) to configure all our services, networks, and volumes.

version: '3.8'
services:
  # Define your application services here

volumes:
  # Define named volumes for data persistence

networks:
  # Define custom networks for inter-service communication

Compose: Backend Service

Let's add our backend service to the docker-compose.yml file. We'll specify its build context (where its Dockerfile is), map ports, define environment variables for database connection, and set up a dependency on the database.

version: '3.8'
services:
  backend:
    build: ./backend # Path to backend Dockerfile
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgres://user:password@db:5432/mydb
    depends_on:
      - db # Ensure db starts before backend
    networks:
      - app-network

networks:
  app-network:
    driver: bridge # Custom network for app services

Compose: Frontend Service

Next, we add the frontend service definition. This service will also be built from its Dockerfile, expose port 80, and depend on the backend service to ensure it's available for API calls.

version: '3.8'
services:
  # ... backend service definition ...
  frontend:
    build: ./frontend # Path to frontend Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend # Frontend needs backend to be ready
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

Compose: Database Service

Finally, we define the database service. We'll use the official postgres image, set crucial environment variables for database setup, and most importantly, attach a named volume for data persistence.

version: '3.8'
services:
  # ... backend and frontend definitions ...
  db:
    image: postgres:13-alpine # Use an official PostgreSQL image
    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - db_data:/var/lib/postgresql/data # Mount named volume
    networks:
      - app-network

volumes:
  db_data: # Define the named volume
networks:
  app-network:
    driver: bridge

Launching the App Stack

With our docker-compose.yml file complete, launching the entire application stack is incredibly simple. Navigate to the directory containing your docker-compose.yml file and run a single command:

  • docker compose up -d: Builds images (if needed), creates containers, networks, and volumes, and starts all services in detached mode (-d).
  • docker compose down: Stops and removes all services, networks, and volumes defined in the file.
docker compose up -d

Compose Configuration Check

Consider the following docker-compose.yml snippet for a simple web application:

version: '3.8'
services:
  web:
    build: .
    ports:
      - "8000:8000"
    depends_on:
      - db
  db:
    image: postgres:latest
    environment:
      POSTGRES_DB: appdb
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    volumes:
      - db_data:/var/lib/postgresql/data
volumes:
  db_data:

Which of the following statements about this configuration are TRUE?

Lesson Summary

In this lesson, we learned how to containerize a full web application stack using Docker. We covered creating Dockerfiles for frontend and backend services, using official images for databases, and orchestrating everything with Docker Compose. This approach simplifies development, deployment, and scaling of complex applications.

  • Defined Dockerfiles for a multi-stage frontend and a backend service.
  • Integrated a database using an official Docker image and a named volume.
  • Orchestrated all services using a docker-compose.yml file.
  • Learned to launch the entire application stack with a single command.

자주 묻는 질문

“웹 애플리케이션 컨테이너화” 강의는 무료인가요?

네 — “웹 애플리케이션 컨테이너화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Docker & Kubernetes for Developers 강의 전체를 잠금 해제할 수 있습니다. Docker & Kubernetes for Developers 강의에는 총 4개의 강의가 포함되어 있습니다.

“웹 애플리케이션 컨테이너화”에서 뭘 배우나요?

프런트엔드, 백엔드, 데이터베이스 구성 요소를 포함한 일반적인 웹 애플리케이션의 Docker화 과정을 단계별로 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 Docker & Kubernetes for Developers을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Docker & Kubernetes for Developers을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Docker & Kubernetes for Developers은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“웹 애플리케이션 컨테이너화” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Docker & Kubernetes for Developers 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Docker & Kubernetes for Developers 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 웹 애플리케이션 컨테이너화
  2. Docker 이미지 최적화
  3. 보안 및 운영 환경 모범 사례
  4. 경량 운영 이미지를 위한 다단계 빌드
← Docker & Kubernetes for Developers(으)로 돌아가기