[과제6-1] 웹 띄우기: MyMon Dev환경 세팅(웹 소스코드 도커라이징)

과제6 숙지

git clone 받기

웹 띄우기 - 완료되면 보고

도커 패키징

도커 이미지 파일로 CMI에 띄우기

목표

cb801에 디렉토리 만들고 웹 서버 코드 올려서 웹을 띄워보자 -> 웹 작동 확인 후 웹 소스코드들 도커로 패키징하자

구체화

서비스db config 부분(하드코딩된 pw 등)을 맨 상위로 빼서, 도커 패키징 용도로 만들어보자.

도커로 이미지화한 뒤 백지 인스턴스에서 도커 실행하면 바로 웹이 동작하도록 하자.

도커 패키징 목적

현재 회사는 1000대 이상의 DB 서버를 운영하고 있으며, 다양한 종류의 DBMS를 사용한다.

DB 서버 운영을 위해 운영 툴이 필요하며, 그 중 MyMon은 MySQL 운영 툴이다.

공공기관을 비롯한 여러 고객사의 인프라는 망 분리를 위해 각기 다른 리전에 구축되었으며,

이로 인해 MyMon같은 운영 도구도 쪼개져야 한다.

수많은 고객사의 인프라에 DB 운영 도구 구축을 쉽고 빠르게 하려면 도커 등을 이용한 자동화 작업이 필요하다.

도커를 사용하면 .env 파일의 환경 변수 변경만으로 다양한 환경에 빠르게 대응할 수 있다.

기타

과제 수행하며 충돌 발생할테니, 해결 필요할 것이다.

---

과제6 시작

[로컬의 파일들을 로컬 -> hcon -> cb801로 옮기기]

로컬에 git clone한 뒤

 

rsync -avz --exclude='.git' mymon-web/ bjpark00@hcon.nhnent.com:/home1/bjpark00/mymon-web/

rsync -avz --exclude='.git' mymon-web/ irteam@infa-testsrv-cb801:/home1/irteam/mymon-web/

 

[확인]

ssh irteam@infa-testsrv-cb801

 

[Deprecated]

scp -r mymon-web/ bjpark00@hcon.nhnent.com:/home1/bjpark00/

 

chmod +r mymon-web/main/config/settings/__init__.py

chmod +r mymon-web/main/config/__init__.py

chmod +r mymon-web/main/__init__.py

chmod +r mymon-web/client/src/view/MainPage.vue

chmod +r mymon-web/client/src/view/db/MysqlSlaveInstall.vue

chmod +r mymon-web/client/src/view/db/MMMAdminLog.vue

---

디렉토리 구조 분석

MYMON-WEB 디렉토리 분석

프로젝트 개요

• 기존 MYMON 웹페이지 개편 프로젝트
• Frontend: Vue.js 2.6 + Vuetify (Material Design)
• Backend: Django 4.0 + Django REST Framework
• Database: MySQL 5.7

📁 프로젝트 최상위 구조

파일/디렉토리	역할
package.json	Node.js 프로젝트 설정, Vue 의존성 관리
babel.config.js	ES6+ 코드 컴파일 설정
vue.config.js	Vue CLI 설정 (서버 IP/포트 등)
manage.py	Django 관리 명령어 실행 (DB마이그레이션, 서버 시작 등)
requirements.txt	Python 의존성 (Django, MySQL, 보안 라이브러리 등 68개 패키지)
README.md	프로젝트 셋업 가이드
utility scripts	benchmark.py, mmm_monitor_list.py 등 - 모니터링/설치 자동화 스크립트

 

client/
├── public/index.html           ← 메인 HTML 진입점
└── src/
    ├── App.vue                 ← 루트 컴포넌트
    ├── main.js                 ← Vue 앱 초기화
    ├── assets/                 ← 정적 리소스 (폰트, 이미지)
    ├── plugins/vuetify.js      ← Vuetify UI 라이브러리 설정
    ├── router/router.js        ← Vue Router 라우팅 설정
    ├── components/
    │   ├── Loading.vue         ← 로딩 표시 컴포넌트
    │   ├── Nav.vue             ← 네비게이션 바
    │   ├── Tool.vue            ← 도구/유틸리티 컴포넌트
    │   └── common/             ← 공통 재사용 컴포넌트
    └── view/                   ← 페이지 단위 컴포넌트
        ├── Dashboard.vue       ← 메인 대시보드
        ├── MainPage.vue        ← 메인 페이지
        ├── PageNotFound.vue    ← 404 페이지
        ├── db/                 ← 데이터베이스 관련 뷰
        ├── mmm/                ← MMM(MySQL Multi-Master) 관련 뷰
        ├── object/             ← 객체 관리 뷰
        ├── sms/                ← SMS/알림 관련 뷰
        ├── system/             ← 시스템 관리 뷰
        ├── user/               ← 사용자 관리 뷰
        └── extra/              ← 기타 뷰

 

Frontend 핵심 기술스택

• axios - HTTP 통신
• vuetify - Material Design UI 컴포넌트
• vue-router - SPA 라우팅
• html2canvas - 캡처/스크린샷
• xlsx - Excel 파일 처리

🚀 Backend (main) - Django 애플리케이션

main/
├── __init__.py
├── asgi.py                     ← ASGI 설정 (비동기 서버)
├── wsgi.py                     ← WSGI 설정 (프로덕션 배포)
├── urls.py                     ← URL 라우팅 설정
├── views.py                    ← 메인 뷰 로직
├── config/settings/
│   ├── base.py                 ← 공통 설정
│   ├── debug.py                ← 개발 환경 설정
│   ├── deploy.py               ← 배포 환경 설정
│   ├── settings.py             ← 실제 동작 설정 (git 제외)
│   └── secrets.json            ← DB 비밀번호 등 (git 제외)
├── templates/
│   ├── base.html               ← 공통 HTML 템플릿
│   └── index.html              ← Vue 앱 마운트 포인트
└── view/                       ← API 엔드포인트 로직
    ├── salt.py                 ← Salt(설정관리) 관련 API
    ├── api/                    ← 범용 API 뷰
    │   ├── mmm_conn_check.py   ← MMM 연결 확인
    │   ├── mysql_prev_check.py ← MySQL 사전 검증
    │   └── wget_view.py        ← 파일 다운로드
    ├── db/                     ← 데이터베이스 관리 API (24개 파일)
    │   ├── MySQL 설치/업그레이드
    │   ├── 백업 관리
    │   ├── 마이그레이션
    │   ├── 성능 벤치마킹
    │   ├── Monitoring/, Server/, Statistic/ 폴더
    │   └── xtrabackup 설치
    ├── mmm/                    ← MySQL 이중화 관리 API
    │   ├── mmm_auto_install_view.py
    │   ├── mmm_monitor.py
    │   ├── mmm_status_view.py
    │   ├── mmm_admin_log.py
    │   └── mmm_common.py
    ├── object/                 ← 인프라 객체 관리 API
    │   ├── object_change_history_view.py
    │   ├── object_change_request_view.py
    │   └── reserved_word.py
    ├── sms/                    ← 알림/이벤트 관리 API
    │   ├── event_view.py
    │   ├── host_group_view.py
    │   └── spam/skip 관리
    ├── system/                 ← 시스템 설정 API
    │   ├── code_manage_view.py ← 코드 관리
    │   └── manager_view.py
    └── user/                   ← 사용자 인증 API
        ├── login_view.py
        └── login_required.py   ← 인증 데코레이터

 

Backend 핵심 기술스택

• django - 웹 프레임워크
• djangorestframework - REST API 생성
• django-cors-headers - CORS 처리
• mysqlclient - MySQL 드라이버
• CherryPy - HTTP 서버
• pycurl - HTTP 요청 (원격 호스트 연동)

🔑 주요 기능 모듈 분석

모듈	설명
DB 관리	MySQL 설치, 업그레이드, 백업, 마이그레이션, 성능 벤치마킹
MMM	MySQL 이중화(MySQL Multi-Master) 자동 설치 및 모니터링
Object	인프라 객체(서버, DB 등) 변경 이력 및 요청 관리
SMS	모니터링 알림, 이벤트 로깅, 스팸/스킵 설정
System	코드 관리, 시스템 설정 관리
User	로그인/인증, 권한 관리

🔄 아키텍처 플로우

[Vue.js 웹브라우저]
         ↓
    [axios HTTP]
         ↓
  [Django REST API]
    ├─→ [MySQL Database]
    ├─→ [Remote Hosts via pycurl/SSH]
    └─→ [Salt Configuration Management]
         ↓
[Infrastructure Management & Monitoring]

 

⚙️ 개발/배포 환경 구분

• 개발: debug.py - 핫리로딩, 상세 에러 표시
• 배포: deploy.py - 보안 강화, 성능 최적화

이 프로젝트는 MySQL 데이터베이스 인프라의 중앙 관리 플랫폼으로, 설치, 모니터링, 백업, 이중화 등을 웹UI를 통해 통합 관리할 수 있도록 설계되었습니다.

---

[궁금증]

 

vue.js: 웹의 사용자 ui를 만들기 위한 javascript 프레임워크

• 점진적 프레임워크: 프로젝트 일부분에만 or 전체를 vue로 구축할 수 있음
• 컴포넌트 기반: 화면 전체를 한번에 코딩하지 않고, 헤더, 사이드바 등 각각의 컴포넌트를 만들고 이를 조립해 완성. 재사용 가능
• 반응형: 데이터의 변화를 감지해 vue가 알아서 화면을 업데이트

 

API: 애플리케이션과 기기 간 통신 창구

API 엔드포인트 url: API 호출을 위한 전화번호

주요 API 엔드포인트 (baseURL 기반)

/sms_spam_host_port_list/        ← 서버 목록 조회
/slave_search/                   ← 슬레이브 서버 검색
/mysql_slave_backup_path_check/  ← 백업 경로 확인
/mysql_slave_rsync_port_check/   ← Rsync 포트 확인
/admin_query/                    ← 직접 쿼리 실행
/db_variables/                   ← DB 변수 조회

 

백엔드엔 Django(파이썬 프레임워크)를 사용함

• mvt: 모델 뷰 템플릿 패턴
• 모델: 데이터베이스의 데이터 형태 정의
• 뷰: 데이터 처리 로직 수행
• 템플릿: 여기서는 데이터만 보내주는 API 역할(원래는 사용자에게 보여줄 화면(html))

axios HTTP

Vue 프론트 → Django 백엔드로 요청 보냄

각 Vue 컴포넌트에서 개별적으로 axios를 import하는 방식 사용

 

[axios 사용 파일 현황]

DB 관련 뷰

파일	용도
AdminQuery.vue	직접 SQL 쿼리 실행 (axios.post)
DBVariables.vue	DB 변수 조회 및 설정
BackupFailManager.vue	백업 실패 관리 (다중 axios 요청)
CheckDBACL.vue	DB 권한 확인 및 동기화
MysqlMigrationServer.vue	MySQL 마이그레이션 (async/await 사용)
MysqlSlaveRecovery.vue	슬레이브 복구 (38개 axios 요청)
XtraBackupAutoInstall.vue	Xtrabackup 자동 설치
Server/ServerList.vue	서버 목록 조회
Server/NewServerList.vue	신규 서버 관리
Server/SaltManager.vue	Salt 설정 관리 (async/await)
Monitoring/LoginLog.vue	로그인 기록 조회
Monitoring/MyStatus.vue	MySQL 상태 모니터링
Monitoring/Lock.vue	Lock 정보 조회
Monitoring/ProcessList.vue	프로세스 목록 조회
Monitoring/DetailLogTime.vue	상세 로그 시간 범위 조회

 

SMS/알림 관련 뷰 (sms/ 디렉토리)

파일	용도
Event.vue	이벤트 조회 및 관리
SkipInfo.vue	스킵 정보 관리
Spam.vue	스팸 호스트 관리

 

[axios 사용 패턴]

1. 기본 GET 요청(읽기)

axios.get(URL).then((res) => {
  if(res.data == 'login')
    this.$router.push('/login');
  // 데이터 처리
})

2. POST 요청(쓰기)

axios.post(URL, { host:this.target_name.split(':')[0] }).then((res) => {
  // 응답 처리
})

3. Async/Await 패턴(비동기 코드를 동기 코드처럼 순차적이고 쉽게 작성해주는 문법)

const { data } = await axios.post(URL, {
  search_word: host.host
});

4. 로그인 확인(모든 컴포넌트 코드에서)

if(res.data == 'login')
  this.$router.push('/login');  // 로그인 페이지로 리다이렉트

 

---

http://ip주소:18080-process-list 웹페이지가 동작하는 원리

 

client/src/view/db/Monitoring/ProcessList.vue를 통해 http://ip주소:18080-process-list 웹페이지가 구현되는데,

먼저 Vue 컴포넌트(ProcessList.vue)는 백엔드로 HTTP 요청을 보낸다.

그러면 Django(백엔드)는 MYMON DB에서 필요한 정보를 가져온다.

이런 상호작용은 API 엔드포인트(API 호출을 위한 전화번호)를 통해 이루어진다.

[사용자] 
   ↓ (http://ip주소:18080-process-list 웹 화면에서 호스트명 선택 -> 검색 요청)
[ProcessList.vue]
   ↓ (axios 요청)
[백엔드 API: VUE_APP_API_PROC_BASE_URL/get_processList/]
   ↓ (사용자가 선택한 호스트명을 기반으로 DB 정보 조회)
[Django 백엔드]
   ↓ (DB 쿼리)
[데이터베이스]
   ↓ (결과 반환)
[ProcessList.vue]
   ↓ (데이터 테이블 렌더링)
[사용자]

 

VUE_APP_API_PROC_BASE_URL은 빈 문자열인데 왜 잘 실행되는걸까?

빈 문자열이라면 axios는 상대 경로로 요청을 보낸다.

즉, /get_processList/ 엔드포인트는 현재 프론트엔드가 호스팅되는 서버의 기본 URL을 기준으로 요청된다.

프론트엔드와 백엔드가 동일한 서버에서 실행 중이기 때문에 빈 문자열이어도 잘 실행되는 것이다.

Django 백엔드의 /get_processList/ 엔드포인트가 뭐지?

main/urls.py에

path('get_processList/',process_list_view.get_processList),

형태로 정의되어 있다.

즉 /get_processList/는 process_list_view.get_processList 함수와 연결되며,

이 함수는 main/view/db/Monitoring/process_list_view.py에 정의되어 있다.

어느 디렉토리의 어느 파일에서 실행되는지 요약해보면 다음과 같다.

[ProcessList.vue]
   ↓ (axios 요청)
[main/urls.py]
   ↓ (라우팅)
[main/view/db/Monitoring/process_list_view.py]
   ↓ (SQL 쿼리 생성 및 실행)
[logdb 데이터베이스]
   ↓ (결과 반환)
[ProcessList.vue]
   ↓ (데이터 테이블 렌더링)
[사용자]

 

logdb 데이터베이스에 접속하기 위해 사용하는 정보는 main/config/settings/settings.py를 통해 .env파일에서 환경변수를 가져온다.

 

도커 컨테이너 내에서 Django를 실행하는 경우, logdb 데이터베이스가 컨테이너의 접속을 허용하고 13306 포트를 열어놓아야 한다.

만약 logdb가 모든 IP에서의 접속을 허용하고, 비밀번호 인증만 요구한다면

docker run 당시 -p 13306:13306할 필요 없이

[컨테이너 내부] ──(직접 접속)──▶ [logdb 서버]

이게 가능하다.

하지만 logdb가 접속 가능한 IP 주소를 제한했다면, logdb 데이터베이스에서 컨테이너의 IP 주소를 등록하거나 컨테이너를 띄운 IP 주소(123.123.123.123)를 등록한 뒤 docker run --network host 옵션을 사용하면 된다.

 

logdb 데이터베이스와 연결해 수행된 SQL 쿼리 결과는 rows로 가져오며, Python 딕셔너리 형태로 반환된다.

Django의 Response 라이브러리가 이 딕셔너리 형태의 결과를 JSON 형식으로 변환한 뒤

HTTP 응답으로 ProcessList.vue로 전달한다.

 

프론트엔드는

• ProcessList.vue에서 axios를 사용해 Django 백엔드로부터 데이터를 요청
• 백엔드에서 반환된 JSON 응답은 axios를 통해 JavaScript 객체로 변환됨
• 이 JavaScript 객체는 items 배열에 저장되고, v-data-table 컴포넌트에 렌더링됨

---

cb801에서 웹 띄우기

[접속]

sap 켜고

ssh bjpark00@hcon.nhnent.com

kinit

ssh irteam@infa-testsrv-cb801

venv 설정

cd ~/mymon-web

sudo apt update

<ubuntu의 기본 apt 저장소에 python3.9가 없어 ppa 저장소 추가>

sudo apt install -y software-properties-common

sudo add-apt-repository -y ppa:deadsnakes/ppa

sudo apt update

sudo apt install -y python3.9 python3.9-venv python3.9-dev

python3.9 —version

python3.9 -m venv venv

    원래 명령어 python3 -m venv venv 실행 시 3.12로 설치됨. 오류가 발생해 venv를 python 3.9로 설치해 처음부터 다시 실행하는 시행착오 겪음

source venv/bin/activate

 

프론트엔드(Vue.js) 환경 설정

<node -v, npm -v로 설치 여부 확인>

[26.1.23 InternProject_2026 clone 이후 버전]

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

export NVM_DIR="$HOME/.nvm"
source "$NVM_DIR/nvm.sh"

nvm install 16

nvm use 16

<확인>

node -v
npm -v

    (deprecated: sudo apt install nodejs npm)

 

[시행착오]

nodejs 버전 18에서 16으로 다운그레이드

sudo apt remove -y nodejs npm

sudo apt autoremove -y

node -v: 없어야 정상

nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

export NVM_DIR="$HOME/.nvm"
source "$NVM_DIR/nvm.sh"

nvm install 16

nvm use 16

node -v
npm -v

 

서버 실행

cd mymon-web

npm install

node ./node_modules/@vue/cli-service/bin/vue-cli-service serve --port 18080

    (deprecated: npm run serve)

 

백엔드(Django) 환경 설정

프론트엔드 실행된 건 그대로 놔두고 새 터미널 창에서

irteam 접속

source venv/bin/activate

pip install --upgrade setuptools

pip install --upgrade pip

pip install -r requirements.txt

 

[26.1.23 InternProject_2026(1트) clone 이후 추가]

requirements.txt에 아래 내용 추가

pymysql==1.1.2

pycurl==7.45.7

아래 명령 실행

pip install -r requirements.txt

    (deprecated: pip install pymysql pycurl)

 

Django 서버 실행

python manage.py runserver cb801주소:15361 --settings=main.config.settings.debug

    (deprecated: python manage.py runserver --settings=main.config.settings.debug)

 

[시행착오]

Django가 로그 파일을 쓸 디렉토리가 존재하지 않는 문제 해결

mkdir -p ~/mymon-web/log

touch ~/mymon-web/log/mymon.log

 

[26.1.23 InternProject(2트) clone 이후 시행착오]

wsgi.py 없는 문제 -> 맨 처음 mymon-web 폴더에서 main/wsgi.py 찾아 copy paste로 가져옴

 

실행 완료(정상 동작)

[26.1.23 InternProject(2트) clone 이후 버전]

npm run serve 직후(프론트엔드)

python manage.py runserver 직후(백엔드)

프론트엔드(Vue.js) 정상 동작 확인: http://10.cb801주소:18080

백엔드(Django) 정상 동작 확인: http://10.cb801주소:15361

웹 실행 화면

 

Deprecated

[26.1.23 InternProject_2026 clone 이후 버전]

processlist 화면이 아니라 다른 화면이 나옴

 

[맨 처음 버전]

npm run serve 직후(프론트엔드)

python manage.py runserver --settings=main.config.settings.debug 직후(백엔드)

프론트엔드(Vue.js) 정상 동작 확인: http://localhost:8080

백엔드(Django) 정상 동작 확인: http://127.0.0.1:8000

http://127.0.0.1:8000/ 접속해 login 화면 확인하기

네트워크 ACL에 내pc 웹 띄운 서버 ip가 등록돼야 함