일기 · 199

  1. 2026
  2. 9월
  3. 09.20 듀오링고리타분위기린
  4. 09.19 반값 설빙
  5. 09.18 우주 전쟁
  6. 4월
  7. 04.19 REBEL HEART
  8. 1월
  9. 01.20 e ∈ F
  10. 01.20 기술개발 진행상황 공유 1
  11. 01.20 기술개발 진행상황 공유 2
  12. 01.20 기술개발 진행상황 공유 3
  13. 01.15 항저우
  14. 2025
  15. 10월
  16. 10.24 어제까지의 이야기
  17. 10.09 돈 벌기
  18. 9월
  19. 09.02 PERFECT BLUE
  20. 8월
  21. 08.31 코코아분말 0.9%
  22. 08.30 WHAT THE
  23. 08.29 문을 닫고 들어오세요
  24. 08.28 하우스도르프 공간
  25. 08.27 All Time Low
  26. 08.26 세상의 끝을 겨눈대도
  27. 08.25 앉은 자리가 꽃자리
  28. 08.24 6과 7 사이 자연수
  29. 08.23 아직 아무 문제도 발견되지 않았습니다
  30. 08.22 Adventure
  31. 08.21 Adobe Creek
  32. 08.20 나의 무가지보(無價之寶)
  33. 08.19 T. Rex
  34. 08.18 누구를 위하여 종은 울리나
  35. 08.17 Sunday Morning
  36. 08.16 일상의 안녕
  37. 08.15 친애하는 우리의 결함에게
  38. 08.14 이것이 있으므로 저것이 있다
  39. 08.13 나는 나의 길을 간다
  40. 08.12 Vanilla Latte
  41. 08.11 그것은 하나의 가까움
  42. 08.10 정복 불허의 공간에
  43. 08.09 쉼 없이 수선하기
  44. 08.08 나는 전설이다
  45. 08.07 철판치즈버거
  46. 08.06 난 포기에 소질 있음
  47. 08.05 스피또런
  48. 08.04 하룻밤 만에
  49. 08.03 세상에 딱 하나뿐인
  50. 08.02 게으름뱅이를 위한 변명
  51. 08.01 북극 백화점
  52. 7월
  53. 07.31 사람은 무엇으로 사는가?
  54. 07.30 KRAFTON Yeoksam Office
  55. 07.29 Slowly flowing day
  56. 07.28 What's this?
  57. 07.28 Architectural Improvements 4
  58. 07.27 Lime Light
  59. 07.26 우리가 기다린 미래
  60. 07.25 Final approach
  61. 07.25 Poster Design Note : Form and Flow
  62. 07.25 Poster Design Note : How We Made It
  63. 07.24 폭풍의 눈
  64. 07.23 IYKYK
  65. 07.22 순살치킨 -> 치킨너겟
  66. 07.21 TRAIN - TRAIN
  67. 07.21 Architectural Improvements 3
  68. 07.21 Logo Design Note : The Logic of Flow
  69. 07.20 어떤 통찰도 지름길로는 얻을 수 없다
  70. 07.20 DeepDive : Many Over Mighty
  71. 07.19 시간이 느리게 가는 건
  72. 07.19 Architectural Improvements 2
  73. 07.19 DeepDive : GC-Triggered Stop-the-World
  74. 07.18 EVEREST
  75. 07.18 Architectural Improvements 1
  76. 07.18 PhantomFlow : High-performance HTTP request simulator
  77. 07.18 Introduction to Project KlickLab
  78. 07.18 What is Clickstream data?
  79. 07.17 깊은 사고는 더 이상 니즈가 없다
  80. 07.16 이기적인 토대 위
  81. 07.15 무엇이든, 언제가는
  82. 07.14 경험을 압축하는 알고리즘은 존재하지 않는다
  83. 07.13 무한한 가능성을 가질 것
  84. 07.12 화려한 거짓을 향해
  85. 07.11 Kentucky Fried Chicken
  86. 07.10 Tropical Blue
  87. 07.09 처음처럼 내 딛는
  88. 07.08 어제와 다른 하늘의 색
  89. 07.07 누군가의 달이었기를
  90. 07.06 아직 뜯지 않은 마음
  91. 07.05 황금의 오솔길
  92. 07.04 우리는 오가는 바람
  93. 07.03 Nic dwa razy
  94. 07.02 Never basic
  95. 07.01 입꼬리올림근
  96. 6월
  97. 06.30 그럼에도 불구하고
  98. 06.29 과잉포장된 자존심
  99. 06.28 E3i3
  100. 06.27 118
  101. 06.26 무한 우주에 순간의 빛일지라도
  102. 06.25 RUSH
  103. 06.24 그래, 우리는
  104. 06.23 The wind blowing low
  105. 06.22 피어나는 마음의 꽃
  106. 06.21 하나는 죽고, 하나는 살았다
  107. 06.20 초속일초
  108. 06.19 씨앗이 가장 고귀한 이유는
  109. 06.18 Evening Primrose
  110. 06.17 마음이 휑뎅그렁할 때
  111. 06.16 하나
  112. 06.15 강철무지개
  113. 06.14 유람
  114. 06.13 13일의 금요일
  115. 06.12 백만 스물하나, 백만 스물둘
  116. 06.11 경안천
  117. 06.10 달이 아름답네요
  118. 06.09 Tampermonkey
  119. 06.08 미르
  120. 06.07 나 평생 꿈만을
  121. 06.06 아르기닌
  122. 06.05 변속주
  123. 06.04 Global Running Day
  124. 06.03 가장 밝은 별
  125. 06.02 천천히
  126. 06.01 circular metal ring
  127. 5월
  128. 05.31 담장과 쪽문
  129. 05.30 투표런
  130. 05.29 출발선
  131. 05.28 Post Traumatic Growth
  132. 05.27 SET
  133. 05.26 READY
  134. 05.25 청복
  135. 05.24 열복
  136. 05.23 강제 푸시 반성합니다
  137. 05.22 유로파
  138. 05.21 떠오름과 저묾
  139. 05.20 Family Friend Fools
  140. 05.19 Time machine
  141. 05.18 맑은 일요일
  142. 05.17 흐린 토요일
  143. 05.16 PTG
  144. 05.15 셋이 만드는 하나
  145. 05.14 Lotte+Cafeteria
  146. 05.13 오십삼
  147. 05.12 일장춘몽
  148. 05.11 𝑬𝒗𝒆𝒓𝒍𝒂𝒏𝒅, 𝑬𝒗𝒆𝒓 𝑴𝒊𝒏𝒅
  149. 05.10 五月雨よ
  150. 05.09 Your Journey Starts Here
  151. 05.08 「권의 속도」
  152. 05.07 Quiet Air
  153. 05.06 놀자판 하루
  154. 05.05 뭔데이
  155. 05.04 After School
  156. 05.03 나침반이 가리킨 곳
  157. 05.02 짧은 하루
  158. 05.01 예고된 악재는 악재가 아니다
  159. 4월
  160. 04.30 Can More
  161. 04.29 초급반
  162. 04.28 감사합니다. 죄송합니다.
  163. 04.27 맥도날드 원정
  164. 04.26 무용(無用)의 쓸모
  165. 04.25 Sunny Day
  166. 04.24 벚나무 아래에서
  167. 04.23 언제나 이타카를 마음에 두라
  168. 04.22 D-100
  169. 04.21 수상한 미용실
  170. 04.20 손으로 컴퓨터를 마주하다
  171. 04.19 비가 오면 빨래를 하자
  172. 04.18 반차
  173. 04.17 발표, 청소, 러닝
  174. 04.16 반티 발주
  175. 04.15 첫 달리기
  176. 04.14 선택과 해석
  177. 04.13 Home Sweet Home
  178. 04.12 人生
  179. 04.11 반티 디자인 공모 & 제출
  180. 04.10 알고리즘의 끝, C언어의 시작
  181. 04.09 하와이안 스테이크
  182. 04.08 Long Chat
  183. 04.07 Es irrt der Mensch, solang' er strebt.
  184. 04.06 마무리
  185. 04.05 움직이는 물체의 시간은 느리게 간다
  186. 04.04 하나의 칼날
  187. 04.03 3x7=21
  188. 04.02 퀴즈 다음날, 시험 전날
  189. 04.01 April Fools' Day
  190. 3월
  191. 03.31 1년의 90번째 날
  192. 03.30 日曜日은 칠요일 중 첫째 날 이다
  193. 03.29 토요일은 주말이 아니다
  194. 03.28 그래프와 치킨버거
  195. 03.27 3주차의 시작
  196. 03.26 기초 다지기
  197. 03.25 기초 다지기 & 정리해야 할 CS 개념들
  198. 03.24 0.44%
  199. 03.23 본가 다녀온 날
  200. 03.22 문제 풀이에 집중한 하루
  201. 03.21 동료학습
  202. 03.20 첫번째 시험
  203. 03.19 먹다가 끝난 하루
  204. 03.18 눈이 쌓이면 버그도 쌓인다
  205. 03.17 깃허브, 팀별 면담, 키워드 공부
  206. 03.16 외출과 배달
  207. 03.15 첫 주말
  208. 03.14 컴퓨팅 사고로의 전환
  209. 03.13 cookie4u.store + 1주차 발제 + 회식
  210. 03.12 디지털 포춘쿠키
  211. 03.11 정글 입성
  212. 03.10 입소 당일

Architectural Improvements 3

도메인을 직접 구입했으니
이제는 “집 주소만 있고 초인종도 없는” 상태에서 벗어나야 했다.
조금 전 한 일은 세 가지다.

  • klicklab.co.kr을 EC2 퍼블릭 IP에 매핑하는 도메인 연결
  • 무료 SSL(Let’s Encrypt)로 HTTPS 적용
  • PM2로 프론트·백엔드 프로세스를 영구 데몬화

이 세 단계만으로 “주소 → 보안문 설치 → 집주인 자동 출근”까지 끝냈다.
이제 클릭랩은 한층 더 실제 서비스같은 면모를 갖춰 나가고 있다.


1. 도메인 & DNS 두 개의 A 레코드

레코드값TTL①
A @ (root)15.165.249.173600
A www15.165.249.173600

① TTL(Time To Live) — DNS 캐시 유지 시간(초). 600이면 10분마다 갱신된다.

왜 이중 레코드가 필요하냐면…

  • 사용자가 www 붙여서 접속할 수도, 생략 할 수도 있다.
  • 두 레코드를 모두 IP에 매핑해야 트래픽·SEO 지표가 한 URL로 집중돼 검색 순위 하락(중복 페이지 패널티)을 막는다.

얻은 이점

  • 운영자가 로그·분석 대시보드를 볼 때 “www”와 “non-www”를 합쳐 계산할 필요가 없다.
  • 외부에 배포하는 자료(발표 자료·SNS)에서도 도메인을 한 형태로만 쓰면 된다.

2. Nginx 상세 설정

# ① www → non-www 강제 이동
server {
    listen 80;
    server_name www.klicklab.co.kr;          # 요청 호스트가 www일 때
    return 301 http://klicklab.co.kr$request_uri;  # 301 Moved Permanently
}

# ② 애플리케이션 프록시
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name klicklab.co.kr;              # non-www

    location / {
        proxy_pass http://localhost:5173;    # Vite dev 서버
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade'; # WebSocket 지원
    }
}
구성왜 필요한가이점
www 리디렉션URL 통일, 쿠키·세션 혼란 제거브라우저 캐시 중복·SEO 패널티 해결
리버스 프록시Node(Vite) 서버를 5173 포트에 숨김직접 노출 안 돼 공격 벡터 축소
proxy_set_headerWebSocket·Header 전달Vite HMR(Hot Module Reload) 정상 동작

nginx -t 으로 문법 검증하고 warning 없으면 systemctl reload nginx.


3. Node 런타임 & PM2(Process Manager 2)

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
sudo npm install -g pm2    # sudo 필수, 전역 설치
용어설명
Node.jsJavaScript 백엔드 런타임. 싱글 스레드 이벤트 루프 구조
PM2Node 프로세스를 포크·클러스터 모드로 데몬 관리, 로그·오토 리로드 지원

이걸 왜 해야 하냐면

  • node index.js만 사용하면 터미널이 끊길 때 서버도 같이 죽는다.
  • PM2는 크래시 감지 후 재시작, 메모리 누수 감시, 시스템 재부팅 후 자동 복구 기능을 제공.
    이점 — 운영자가 SSH 세션을 종료해도 서비스 지속, 장애 MTTR② 대폭 감소.
    (② Mean Time To Recovery — 복구 평균 시간)

4. 애플리케이션 등록

4-1. 프로젝트 구조

~/KlickLab
├─ backend/   # Node(Express)  ▶ index.js
└─ frontend/  # Vite + React   ▶ vite.config.ts

4-2. Vite 설정(외부 호스트 허용)

server: {
  host: '0.0.0.0',                    // 모든 인터페이스 바인딩
  port: 5173,
  allowedHosts: ['klicklab.co.kr','www.klicklab.co.kr'], // 도메인 화이트리스트
  proxy: { '/api': 'http://localhost:4000' }             // 백엔드 프록시
}
  • Blocked request 오류(Vite의 호스트 검증)를 제거.
  • /api 요청은 자동으로 백엔드로 분기.

4-3. PM2로 서비스 등록

# 프런트
cd ~/KlickLab/frontend
pm2 start "npx vite --host 0.0.0.0 --port 5173" --name klicklab-frontend

# 백엔드
cd ~/KlickLab/backend
pm2 start index.js --name klicklab-backend

pm2 save                       # 현재 프로세스 스냅샷 저장
pm2 startup                    # systemd에 서비스 등록

pm2 startup 출력에 나온 sudo env PATH=… pm2 startup systemd … 한 줄을 복사-실행해 systemd 서비스 파일을 생성.

이점설명
자동 부활서버 재부팅 후 pm2 resurrect 가 dump 파일을 읽어 자동 실행
로그 관리~/.pm2/logs/*.log 파일로 stdout/stderr 분리 저장
리소스 모니터pm2 monit 한눈에 CPU·메모리 확인

5. HTTPS 적용 (Let’s Encrypt)

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d klicklab.co.kr -d www.klicklab.co.kr
용어설명
CertbotLet’s Encrypt가 제공하는 무료 SSL 자동 발급·갱신 클라이언트
ACMEAutomatic Certificate Management Environment, SSL 자동화 프로토콜
  • 설치 중 옵션 2 “Redirect” 선택 → 모든 HTTP 요청 301 → HTTPS
  • 만료 30 일 전에 certbot.timer(systemd)가 자동 갱신
  • 인증서 경로: /etc/letsencrypt/live/klicklab.co.kr/

이걸 하면 좋은 점

  • 브라우저 ‘Not Secure’ 경고 제거, 사용자 신뢰도 향상
  • 비용이 공짜다. 안쓸 이유가 없음

6. 최종 효과 정리

카테고리개선 전개선 후
접근 URL다중(www/non-www/HTTP/HTTPS)HTTPS + non-www 로 통일
보안평문 HTTPTLS 1.3 암호화, 무료 SSL
가용성터미널 종료 시 서비스 중단PM2 재시작, 크래시 자동 복구
운영 비용유료 CA 발급Let’s Encrypt(무료)
데브 UX로컬 5173 직접 노출Nginx 프록시 → HMR 유지

https://klicklab.co.kr

댓글