[과제6-4] dockerfile 작성, docker 빌드 및 테스트: MyMon Dev환경 세팅(웹 소스코드 도커라이징)

Dockerfile을 mymon-web-docker/ 안에 위치시킴

/home1/irteam/mymon-web-docker/
├── Dockerfile
├── entrypoint.sh
├── manage.py
├── package.json
├── client/
├── main/
└── ...

 

최종 Dockerfile

FROM ubuntu:22.04

# 환경변수 및 기본 설정
ENV DEBIAN_FRONTEND=noninteractive
ENV TZ=Asia/Seoul

# 기본 패키지 설치 전: PPA 등록 먼저
RUN apt update && apt install -y software-properties-common

# Python 3.9 설치를 위한 PPA 추가
RUN add-apt-repository -y ppa:deadsnakes/ppa && apt update

# 나머지 패키지 설치
RUN apt install -y \
    curl \
    gnupg \
    lsb-release \
    default-libmysqlclient-dev \
    build-essential \
    python3.9 \
    python3.9-venv \
    python3.9-dev \
    git

# Node.js 16 설치
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && \
    apt install -y nodejs

# 작업 디렉토리 설정
WORKDIR /home/mymon-web-docker

# 프로젝트 복사 (node_modules, venv 등은 .dockerignore로 제외)
COPY . .

# 로그 디렉토리 및 파일 생성
RUN mkdir -p log && touch log/mymon.log

# Python 가상환경 생성 및 활성화
RUN python3.9 -m venv venv

# uv 설치 및 Python 의존성 설치
RUN bash -c "source venv/bin/activate && \
    curl -Ls https://astral.sh/uv/install.sh | bash && \
    export PATH=$HOME/.local/bin:$PATH && \
    uv pip install -r requirements.txt"

# 프론트엔드 의존성 설치
RUN npm install && npm install dotenv-flow

# 포트 개방
EXPOSE 18080 15361

# 엔트리포인트 스크립트 복사
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

# 시작 명령
CMD ["/entrypoint.sh"]

entrypoint.sh(최종 버전은 '과제6-5' 게시글에)

#!/bin/bash

# Python 가상환경 활성화
source /home/mymon-web-docker/venv/bin/activate

# Django 백엔드 실행 (백그라운드)
python manage.py runserver 0.0.0.0:15361 --settings=main.config.settings.debug &

# Vue 서버 실행 (포그라운드)
node ./node_modules/@vue/cli-service/bin/vue-cli-service serve --port 18080

최종 .dockerignore

venv/
__pycache__/
*.pyc
node_modules/
*.log
# 백엔드용 env는 컨테이너 외부에서 주입 예정
.env
.DS_Store

최종 .env(예시)

# ========================
# Vue Development Settings (vue.config.js)
# ========================
VUE_DEV_SERVER_URL=http://localhost:18080/
VUE_DEV_PUBLIC_URL=http://localhost:18080
VUE_PROD_PUBLIC_PATH=/static/dist/

# ========================
# Django Settings (manage.py, main/config/settings/)
# ========================
# Django Module
DJANGO_SETTINGS_MODULE=main.config.settings.settings

# Base Settings
DJANGO_SECRET_KEY=your-secret-key-here
DJANGO_DEBUG=True
DJANGO_ALLOWED_HOSTS=*

# Database
DB_ENGINE=django.db.backends.sqlite3

# CORS Settings
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS=True

# Static Files
STATIC_URL=static/

# Deploy Settings
DJANGO_DEBUG_DEPLOY=False

# ========================
# Production Database Settings (main/config/settings/settings.py)
# ========================
# Default Database (MYMON)
DB_DEFAULT_ENGINE=django.db.backends.mysql
DB_DEFAULT_NAME=MYMON
DB_DEFAULT_USER=django
DB_DEFAULT_PASSWORD=django_password
DB_DEFAULT_HOST=localhost
DB_DEFAULT_PORT=13306

# Log Database
DB_LOG_ENGINE=django.db.backends.mysql
DB_LOG_NAME=log
DB_LOG_USER=django
DB_LOG_PASSWORD=django_password
DB_LOG_HOST=localhost
DB_LOG_PORT=13306

# File Upload Settings
MAX_UPLOAD_SIZE=1073741824
FILE_UPLOAD_MAX_MEMORY_SIZE=1073741824

# ========================
# Application Settings
# ========================
# Installer Settings (main/view/api/wget_view.py)
INSTALLER_BASE_DIR=/home/installer

# Login Settings (main/view/user/login_view.py)
SSO_URL=http://sso-server.example.com/sso.nhn?encpw=
SSO_DEV_URL=http://sso-dev-server.example.com/sso.nhn?encpw=
LOGIN_COOKIE_DOMAIN=.example.com

# main/templates/base-vue.html
VUE_DEV_SERVER=http://localhost:8080

최종 .env.client

# 프론트엔드(Vue)용 환경변수
# client/src/components/Nav.vue
VUE_APP_NAV_BASE_URL=
# client/src/components/Tool.vue
VUE_APP_MYMON_URL=http://mymon2.nhnent.com:15361/serverlist
VUE_APP_REDISMON_URL=http://redismon.nhnent.com:15361/login

# client/src/view/db/Monitoring/Lock.vue
VUE_APP_API_LOCK_BASE_URL=

# client/src/view/db/Monitoring/ProcessList.vue
VUE_APP_API_PROC_BASE_URL=

# client/src/extra/Grafana.vue
VUE_APP_GRAFANA_URL=http://mygraph.nhn.com:3000/login

# client/src/extra/Neta.vue
VUE_APP_NETA_URL=http://adneta.nhnent.com/tiams/ip

# client/src/extra/Prometheus.vue
VUE_APP_PROMETHEUS_URL=http://mygraph.nhn.com:9090/targets

# client/src/view/system/Manager.vue
VUE_APP_API_SYSTEM_BASE_URL=

# client/src/view/user/Login.vue
VUE_APP_API_LOGIN_BASE_URL=

빌드 & 실행 방법

# Docker 이미지 빌드
docker build -t mymon-web-image .

# 컨테이너 실행
docker run -it --env-file .env -p 18080:18080 -p 15361:15361 --name mymon-web-prod mymon-web-image

---

[시행착오]

.env 파일이 --env-file로 주입되는 걸 고려해서 파일 전면 수정

 

전면 수정될 파일 후보군

main/config/settings/base.py
main/config/settings/debug.py
main/config/settings/deploy.py
main/config/settings/settings.py
main/templates/base-vue.html
main/view/api/wget_view.py
main/view/user/login_view.py
main/asgi.py
main/context_processors.py
manage.py

 

이 중 2개 파일만 수정(아래 2개)

main/config/settings/base.py
main/config/settings/settings.py

 

이 2개의 파일에서 아래 내용 제거

from dotenv import load_dotenv

ENV_BASE_DIR = Path(__file__).resolve().parent.parent.parent
ENV_PATH = ENV_BASE_DIR / '.env'
load_dotenv(dotenv_path=ENV_PATH)

 

main/config/settings/base.py에서

?: (urls.E006) The STATIC_URL setting must end with a slash.

에러 때문에

STATIC_URL만 어쩔 수 없이 하드코딩

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR.parent.parent, 'static')
]

---

http://cb801주소:15361 접속 시 웹이 안뜨고 DisallowedHost 경고창이 뜨는 문제

임시 컨테이너에서는 load_dotenv()로 .env를 읽었으므로 ALLOWED_HOSTS='' → ['']가 되어 로컬 요청이 허용됐음

 

.env에 #으로 썼던 주석이 주석처리되지 않아 웹 소스코드에서 .env 환경변수를 읽지 못하는 문제였음

주석 제거해 해결

 

아까 STATIC_URL 문제도 주석 때문이었음

main/config/settings/base.py에서 STATIC_URL만 어쩔 수 없이 하드코딩했던 것

.env에서 가져오도록 코드 되돌린 후 docker 재빌드 수행

 

드디어 웹이 잘 뜬다

---

[프롬프트]

mymon-web-docker 디렉토리 내의 파일들은 웹페이지 동작에 필요한 파일들이야.
디렉토리 구조는 다음과 같아.
(생략)

mymon-web-docker를 패키징해서 docker image로 만든 뒤, 새로운 인스턴스에서 docker image를 실행시켜 웹페이지를 작동하고 싶어.
이를 위해 mymon-web-docker을 임시 컨테이너에서 실행시키고, 실행에 필요한 명령어들만 모아서 docker file을 만들고 싶어. 임시 컨테이너를 실행해 웹 구동에 성공시킨 명령어는 다음과 같아.
(생략)

dockerfile을 만들어줘.