웹 개발 배포 및 아키텍처 구조 총정리⭐

웹 개발을 하다 보면 단순히 코드를 짜는 것뿐만 아니라, 배포 과정도 중요한 부분이인데요. 하지만 처음 접하면 "도대체 이걸 어떻게 배포하지?"라는 고민이 들 수밖에 없죠..ㅠㅠ 특히 도커, 쿠버네티스, 컨테이너 같은 용어들이 많이 등장하는데, 총 정리 시간을 가져보려고 합니다!

1. 웹 애플리케이션 배포란?

웹 개발을 했다면, 내 로컬에서만 실행되는 코드가 아니라 누구나 접속할 수 있는 형태로 배포해야 해요.
배포를 하기 위해서는 크게 다음과 같은 요소들이 필요하답니다.

 

• 애플리케이션 코드 (백엔드 & 프론트엔드)
• 데이터베이스 (DB) - MySQL, PostgreSQL, MongoDB 등
• 서버 (웹 서버 & API 서버) - Nginx, Apache, Express.js 등
• 도메인 및 네트워크 설정 - DNS, SSL 인증서 적용
• 배포 자동화 (CI/CD) - GitHub Actions, Jenkins, AWS CodePipeline 등

개발 환경에서는 코드만 실행하면 되지만, 실제 서비스 환경에서는 이 모든 것들을 설정해야 원활한 서비스 운영이 가능합니다.

2. 컨테이너와 도커

컨테이너란?

컨테이너(Container)는 애플리케이션을 실행하는 독립적인 환경이에요.
기존에는 위 사진처럼 프로그램을 실행하기 위해 어떤 환경에선 설치가 되고, 어떤 환경에선 설치가 안되는 문제를 해결하기 위해 운영체제(OS), 라이브러리, 의존성 등을 수동으로 맞춰야 했습니다. 하지만 컨테이너는 이러한 환경을 통째로 패키징하여 어디서든 동일한 환경에서 실행될 수 있도록 해줍니다.

컨테이너를 사용하는 이유

• "로컬에서는 잘 되는데 서버에서는 왜 안 되지?" 같은 문제 해결
• 운영 환경을 통일할 수 있어 배포가 쉬워짐
• 여러 개의 컨테이너를 띄워 확장성을 높일 수 있음

도커(Docker)란?

도커는 컨테이너를 만들고 관리할 수 있도록 도와주는 도구입니다.
컨테이너 자체는 개념이고, 도커는 이를 쉽게 다룰 수 있는 툴이라고 보면 됩니다.

도커의 핵심 개념

1. 이미지(Image): 컨테이너를 실행하기 위한 템플릿
2. 컨테이너(Container): 이미지를 실행한 상태
3. 도커파일(Dockerfile): 컨테이너를 만들기 위한 설정 파일
4. 도커허브(Docker Hub): 도커 이미지를 저장하고 공유하는 저장소

도커 사용 예제 (Node.js 서버 실행)

# Node.js 컨테이너 생성 예제
FROM node:16  
WORKDIR /app  
COPY package.json .  
RUN npm install  
COPY . .  
CMD ["node", "server.js"]

 

3. 쿠버네티스(Kubernetes)

도커를 사용하면 컨테이너를 쉽게 만들 수 있지만, 컨테이너가 많아지면 관리가 어려워집니다.
이때 등장하는 것이 쿠버네티스(Kubernetes, 줄여서 K8s)입니다.

쿠버네티스는 여러 개의 컨테이너를 자동으로 배포, 확장, 관리하는 오케스트레이션(Orchestration) 도구입니다.

쿠버네티스의 핵심 개념

1. 노드(Node): 컨테이너가 실행되는 서버
2. 파드(Pod): 하나 이상의 컨테이너를 포함하는 단위
3. 서비스(Service): 외부에서 접속할 수 있도록 네트워크를 제공
4. 디플로이먼트(Deployment): 컨테이너 업데이트 및 배포 전략

4. 번들러와 웹팩(Webpack)

번들러란?

프론트엔드 개발을 할 때 HTML, CSS, JavaScript 파일을 최적화하고 묶어주는 도구가 필요합니다.
이때 사용하는 것이 번들러(Bundler)입니다.

번들러는 여러 개의 파일을 하나로 합쳐 로딩 속도를 최적화하고, 코드 스플리팅을 통해 필요한 파일만 로드할 수 있도록 도와줍니다.

대표적인 번들러 예시

• Webpack: 가장 많이 사용하는 번들러 (React, Vue 등에서 활용)
• Parcel: 설정 없이 쉽게 사용할 수 있는 번들러
• Vite: 빠른 빌드를 지원하는 번들러 (React, Vue 등에서 사용)

웹 팩(Webpack) 설정 예제

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

위 설정을 사용하면 index.js를 포함한 모든 JS, CSS 파일이 번들링됩니다.

5. 웹 개발 배포 단계

이제 실제 배포 과정을 AWS를 기준으로 설명하겠습니다.

1️⃣ 데이터베이스 배포

• AWS RDS를 사용하여 MySQL, PostgreSQL을 배포
• 보안 그룹을 설정하여 IP 및 접근 제한 적용

AWS RDS 연결 예제 (Node.js + MySQL)

const mysql = require('mysql2');
const connection = mysql.createConnection({
  host: 'my-db-instance.rds.amazonaws.com',
  user: 'admin',
  password: 'password',
  database: 'mydb'
});

connection.connect();

2️⃣ 백엔드 서버 배포

• EC2 또는 Lambda를 사용하여 백엔드 서버 실행
• Nginx를 사용해 API 요청을 처리

EC2에 Node.js 서버 실행

# SSH로 EC2 접속
ssh -i my-key.pem ec2-user@my-ec2-instance.amazonaws.com

# Node.js 서버 실행
cd my-app
node server.js

3️⃣ 프론트엔드 배포

• AWS S3 + CloudFront를 사용하여 정적 파일 배포

React/Vue 빌드 및 배포

# React 빌드
npm run build

# AWS S3에 업로드
aws s3 cp ./build s3://my-frontend-bucket --recursive

4️⃣ 도메인 & HTTPS 설정

• AWS Route 53을 사용하여 도메인 연결
• ACM(AWS Certificate Manager)로 SSL 적용

Nginx + Let's Encrypt로 HTTPS 활성화

sudo certbot --nginx -d mywebsite.com

5️⃣ CI/CD 자동화 (배포 자동화)

• GitHub Actions 또는 Jenkins를 사용하여 배포 자동화 가능

GitHub Actions + Docker 배포 예제

name: Deploy Backend
on: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
      - name: Build Docker image
        run: docker build -t my-backend .
      - name: Push to AWS ECR
        run: docker push my-backend

6. 정리

1. 컨테이너는 독립적인 실행 환경을 제공
2. 도커는 컨테이너를 쉽게 다룰 수 있는 도구
3. 쿠버네티스는 여러 개의 컨테이너를 자동 관리
4. 번들러는 프론트엔드 코드 최적화 및 번들링을 수행
5. 배포 과정은 DB → 백엔드 → 프론트엔드 → CI/CD 순서

처음에는 어렵지만, 하나씩 따라 하다 보면 배포 과정이 익숙해질 것입니다!