[보안포털 구축기 4편]도메인 연동 &보안이슈관리 고도화

🔐 보안포털 구축기

EPISODE 04

도메인 연동 &
보안이슈관리 고도화

raonsec.com 도메인 개통부터 수정 모달, API 연동까지
보안포털이 한 단계 더 성숙해졌다

Nginx SSL/TLS Let's Encrypt FastAPI Docker PostgreSQL GitHub Actions

01 raonsec.com 도메인 구매 및 VPS 연동

🌐 왜 도메인을 샀나?

기존에는 IP 주소로 직접 접속했다. 보안포털이 어느 정도 완성됐으니 이제 제대로 된 주소가 필요했다.

raonsec.com — Raon(라온시큐어) + sec(urity)의 조합. 깔끔하고 기억하기 쉽다.

1

Hostinger에서 raonsec.com 구매 도메인 포트폴리오에서 구매 완료 — 초기 상태는 Pending verification

2

DNS A레코드 설정 파킹 서버 IP 삭제 → VPS IP로 A레코드 교체, www는 CNAME 유지

3

Nginx server_name 변경 IP 기반 설정 → raonsec.com / www.raonsec.com 도메인 기반으로 전환

4

SSL 인증서 자동 발급 (Let's Encrypt) certbot --nginx로 HTTPS 자동 설정 완료. 인증서 자동 갱신도 등록됨

✅ 결과: https://raonsec.com 으로 보안포털 정식 접속 가능!

---

02 보안이슈관리 — 이메일 컬럼 누락 버그 수정

🐛 증상

엑셀로 업로드한 보안이슈 데이터에 이메일 정보가 있는데, 관리자 페이지 테이블에서 이메일이 표시되지 않았다. 담당자 이름과 전화번호는 보이지만 이메일만 빠져있는 상태.

🔍 원인 & 수정

DB에는 이메일 컬럼이 있고 API도 정상 반환 중이었다. 문제는 렌더링 코드에서 이메일 출력 구문이 아예 빠져있었던 것.

// 수정 전 — 이메일 없음 (r['담당자명']||'') + (r['연락처'] ? '📞 '+r['연락처'] : '') // 수정 후 — 이메일 추가 (r['담당자명']||'') + (r['연락처'] ? '<br>📞 '+r['연락처'] : '') + (r['이메일'] ? '<br>✉️ '+r['이메일'] : '')

✅ 담당자 컬럼에 이름 / 📞 전화번호 / ✉️ 이메일 모두 정상 표시

---

03 보안이슈 인라인 수정 모달 구현

🎯 요구사항

테이블 각 행의 수정 버튼을 클릭하면 해당 데이터를 편집할 수 있는 모달 팝업이 열리고, 저장 시 DB에 즉시 반영되어야 한다.

1

모달 HTML 추가 excel-edit-modal div가 누락되어 있었음 — 파일 끝에 추가

2

필드 순서 고정 DB 저장 순서가 아닌 이슈명→분류→위험도→발생일→상태→담당자 순으로 고정

3

input 키 매핑 버그 수정 한글 키가 '_'로 변환되어 저장 시 값을 못 찾던 문제 → data-field-key 속성 방식으로 변경

4

PUT API 연동 /api/excel/data/{category}/{id} 엔드포인트로 수정 데이터 전송 → DB 즉시 반영

---

04 상태 배지 색상 개선

🎨 문제점

기존에는 대응중과 진행중이 비슷한 주황/빨강 계열이라 한눈에 구별하기 어려웠다. 직관적인 색상 체계로 개선했다.

상태	변경 전	변경 후	의미
🔴 대응중	빨강	빨강 유지	긴급 / 즉시 대응 필요
🔵 진행중	주황	파랑으로 변경	처리 진행 중
🟢 완료	초록	초록 유지	처리 완료
🟡 보류	회색	노랑으로 변경	대기 / 보류

---

05 일반포털 ↔ 관리자 데이터 실시간 연동

🔗 문제

관리자 페이지에서 보안이슈를 수정해도 일반 포털에는 반영이 안 됐다. 일반 포털 HTML에 하드코딩된 정적 테이블 데이터가 있어서 API 응답을 덮어쓰고 있었기 때문.

⚠️ index.html에 정적 데이터가 직접 박혀있었음 — API 데이터를 아예 무시하는 구조

1

하드코딩 데이터 제거 정적 테이블 HTML → "데이터 로딩 중..." 플레이스홀더로 교체

2

script 태그 분리 버그 수정 <script src="..."> 내부 코드는 브라우저가 무시 — 별도 <script> 태그로 분리

3

누락 함수 및 변수 선언 추가 페이지네이션 관련 _idxPages 변수 및 idxGoPage 함수가 누락되어 있었음

4

불필요한 토큰 체크 제거 /public 엔드포인트는 인증 불필요 — 토큰 없어도 데이터 로드되도록 수정

✅ 결과: 관리자에서 수정 → 일반포털에 즉시 반영 완성!

---

06 GitHub Actions — Deploy 실패 해결

⚙️ 증상 & 원인

lint ✅ · test ✅ 는 통과하는데 deploy ❌ 만 계속 실패. GitHub Secrets에 저장된 VPS_SSH_KEY가 만료되어 있었다. GitHub CLI를 활용해 터미널에서 직접 Secrets를 업데이트했다.

# GitHub CLI로 Secrets 업데이트 gh secret set VPS_SSH_KEY < ~/.ssh/id_rsa --repo jun0e86/security-portal gh secret set VPS_HOST --body "VPS_IP" --repo jun0e86/security-portal

✅ Secrets 업데이트 후 재배포 성공

---

07 오늘의 작업 요약

🌐

도메인

raonsec.com

🔒

SSL

HTTPS 적용

✏️

수정 모달

구현 완료

🔄

데이터 연동

실시간 반영

🚀

CI/CD

배포 정상화

🔐 보안포털이 한 단계 성숙해졌다

IP 주소로만 접근하던 포털에 정식 도메인과 HTTPS가 붙었고,
관리자와 일반 포털의 데이터가 드디어 하나로 연결됐다.

다음 편에서는 보안포털의 추가 기능 고도화를 다룰 예정이다.

→ 5편 예고: 보안포털 기능 고도화