전체 · 253

  1. 2026
  2. 9월
  3. 09.20 듀오링고리타분위기린
  4. 09.19 반값 설빙
  5. 09.18 우주 전쟁
  6. 7월
  7. 07.26 김미정 - 더 (More)
  8. 6월
  9. 06.16 JT Music - Join Us For A Bite
  10. 06.15 aespa - 'Til We Die
  11. 06.15 MEOVV - Favorite Song
  12. 4월
  13. 04.19 REBEL HEART
  14. 1월
  15. 01.20 e ∈ F
  16. 01.20 기술개발 진행상황 공유 1
  17. 01.20 기술개발 진행상황 공유 2
  18. 01.20 기술개발 진행상황 공유 3
  19. 01.16 『실패를 통과하는 일』
  20. 01.15 항저우
  21. 2025
  22. 12월
  23. 12.12 Kittyy & The Class - I'm Not Remarkable
  24. 10월
  25. 10.26 『싯다르타』
  26. 10.24 어제까지의 이야기
  27. 10.24 The killers - Shot At the night
  28. 10.20 『학문의 즐거움』
  29. 10.12 심통봇 - GHOSTagram
  30. 10.09 돈 벌기
  31. 9월
  32. 09.13 My Chemical Romance - Welcome To The Black Parade
  33. 09.10 TUBE - The Season In The Sun
  34. 09.02 PERFECT BLUE
  35. 8월
  36. 08.31 코코아분말 0.9%
  37. 08.30 WHAT THE
  38. 08.30 Ado - The World’s Continuation
  39. 08.29 문을 닫고 들어오세요
  40. 08.28 하우스도르프 공간
  41. 08.27 All Time Low
  42. 08.27 『생각 좀 하며 세상을 보자』
  43. 08.26 세상의 끝을 겨눈대도
  44. 08.25 앉은 자리가 꽃자리
  45. 08.24 6과 7 사이 자연수
  46. 08.23 아직 아무 문제도 발견되지 않았습니다
  47. 08.22 Adventure
  48. 08.21 Adobe Creek
  49. 08.20 나의 무가지보(無價之寶)
  50. 08.20 HUNTR/X - What It Sounds Like
  51. 08.19 T. Rex
  52. 08.18 누구를 위하여 종은 울리나
  53. 08.17 Sunday Morning
  54. 08.16 일상의 안녕
  55. 08.15 친애하는 우리의 결함에게
  56. 08.14 이것이 있으므로 저것이 있다
  57. 08.14 『초신성의 후예』
  58. 08.13 나는 나의 길을 간다
  59. 08.13 Aimer - 蝶々結び (나비매듭)
  60. 08.12 Vanilla Latte
  61. 08.11 그것은 하나의 가까움
  62. 08.11 Vaundy - 踊り子 (무희)
  63. 08.10 정복 불허의 공간에
  64. 08.09 쉼 없이 수선하기
  65. 08.08 나는 전설이다
  66. 08.07 철판치즈버거
  67. 08.07 『나는 포기를 모른다』
  68. 08.06 난 포기에 소질 있음
  69. 08.05 스피또런
  70. 08.04 하룻밤 만에
  71. 08.04 Myuk - Black Sheep
  72. 08.03 세상에 딱 하나뿐인
  73. 08.03 『심장보다 높이』
  74. 08.02 게으름뱅이를 위한 변명
  75. 08.02 Myuk - Gift
  76. 08.02 『누가 내 치즈를 옮겼을까?』
  77. 08.01 북극 백화점
  78. 7월
  79. 07.31 사람은 무엇으로 사는가?
  80. 07.30 KRAFTON Yeoksam Office
  81. 07.30 Tani Yuuki - W/X/Y
  82. 07.29 Slowly flowing day
  83. 07.28 What's this?
  84. 07.28 Architectural Improvements 4
  85. 07.27 Lime Light
  86. 07.26 우리가 기다린 미래
  87. 07.25 Final approach
  88. 07.25 Poster Design Note : Form and Flow
  89. 07.25 Poster Design Note : How We Made It
  90. 07.24 폭풍의 눈
  91. 07.23 IYKYK
  92. 07.22 순살치킨 -> 치킨너겟
  93. 07.21 TRAIN - TRAIN
  94. 07.21 Architectural Improvements 3
  95. 07.21 Logo Design Note : The Logic of Flow
  96. 07.20 어떤 통찰도 지름길로는 얻을 수 없다
  97. 07.20 DeepDive : Many Over Mighty
  98. 07.20 JINI - Bad Reputation
  99. 07.19 시간이 느리게 가는 건
  100. 07.19 Architectural Improvements 2
  101. 07.19 DeepDive : GC-Triggered Stop-the-World
  102. 07.18 EVEREST
  103. 07.18 Architectural Improvements 1
  104. 07.18 PhantomFlow : High-performance HTTP request simulator
  105. 07.18 Introduction to Project KlickLab
  106. 07.18 What is Clickstream data?
  107. 07.17 깊은 사고는 더 이상 니즈가 없다
  108. 07.16 이기적인 토대 위
  109. 07.15 무엇이든, 언제가는
  110. 07.15 Official HIGE DANdism - Universe
  111. 07.14 경험을 압축하는 알고리즘은 존재하지 않는다
  112. 07.14 『료의 생각 없는 생각』
  113. 07.13 무한한 가능성을 가질 것
  114. 07.12 화려한 거짓을 향해
  115. 07.11 Kentucky Fried Chicken
  116. 07.10 Tropical Blue
  117. 07.09 처음처럼 내 딛는
  118. 07.08 어제와 다른 하늘의 색
  119. 07.08 Furui riho - Hello
  120. 07.07 누군가의 달이었기를
  121. 07.06 아직 뜯지 않은 마음
  122. 07.05 황금의 오솔길
  123. 07.05 noa - A8番出口 (A8번출구)
  124. 07.04 우리는 오가는 바람
  125. 07.03 Nic dwa razy
  126. 07.02 Never basic
  127. 07.02 MEOVV - DROP TOP
  128. 07.01 입꼬리올림근
  129. 6월
  130. 06.30 그럼에도 불구하고
  131. 06.29 과잉포장된 자존심
  132. 06.29 Steve Winwood – Higher Love
  133. 06.29 『어린 왕자』
  134. 06.28 E3i3
  135. 06.27 118
  136. 06.26 무한 우주에 순간의 빛일지라도
  137. 06.26 Mercury Rev - Holes
  138. 06.25 RUSH
  139. 06.25 Cloudybay - 내게로
  140. 06.24 그래, 우리는
  141. 06.24 『이건 다만 사랑의 습관』
  142. 06.23 The wind blowing low
  143. 06.23 『생각 망치』
  144. 06.22 피어나는 마음의 꽃
  145. 06.21 하나는 죽고, 하나는 살았다
  146. 06.21 『2025 제16회 젊은작가상 수상작품집』
  147. 06.20 초속일초
  148. 06.19 씨앗이 가장 고귀한 이유는
  149. 06.18 Evening Primrose
  150. 06.17 마음이 휑뎅그렁할 때
  151. 06.16 하나
  152. 06.16 Vaundy - しわあわせ (주름 맞추기)
  153. 06.15 강철무지개
  154. 06.15 Will Ye Go, Lassie Go?
  155. 06.14 유람
  156. 06.13 13일의 금요일
  157. 06.12 백만 스물하나, 백만 스물둘
  158. 06.11 경안천
  159. 06.10 달이 아름답네요
  160. 06.10 Yuuri - ドライフラワー (드라이플라워)
  161. 06.10 『하늘과 바람과 별과 시』
  162. 06.09 Tampermonkey
  163. 06.09 Hump Back - 拝啓、少年よ (친애하는 소년이여)
  164. 06.09 Yuuri - ガリレオは恋をする(갈릴레오는 사랑을 한다)
  165. 06.08 미르
  166. 06.08 『인간의 대지』
  167. 06.07 나 평생 꿈만을
  168. 06.06 아르기닌
  169. 06.05 변속주
  170. 06.05 THE BLUE HEARTS - 情熱の薔薇 (정열의 장미)
  171. 06.05 noa - ホットレモン (Hot Lemon)
  172. 06.04 Global Running Day
  173. 06.03 가장 밝은 별
  174. 06.02 천천히
  175. 06.01 circular metal ring
  176. 5월
  177. 05.31 담장과 쪽문
  178. 05.30 투표런
  179. 05.29 출발선
  180. 05.28 Post Traumatic Growth
  181. 05.27 SET
  182. 05.26 READY
  183. 05.25 청복
  184. 05.24 열복
  185. 05.23 강제 푸시 반성합니다
  186. 05.22 유로파
  187. 05.21 떠오름과 저묾
  188. 05.20 Family Friend Fools
  189. 05.20 Aimyon - 裸の心 (벌거벗은 마음)
  190. 05.19 Time machine
  191. 05.18 맑은 일요일
  192. 05.17 흐린 토요일
  193. 05.16 PTG
  194. 05.15 셋이 만드는 하나
  195. 05.14 Lotte+Cafeteria
  196. 05.13 오십삼
  197. 05.12 일장춘몽
  198. 05.11 𝑬𝒗𝒆𝒓𝒍𝒂𝒏𝒅, 𝑬𝒗𝒆𝒓 𝑴𝒊𝒏𝒅
  199. 05.10 五月雨よ
  200. 05.09 Your Journey Starts Here
  201. 05.08 「권의 속도」
  202. 05.07 Quiet Air
  203. 05.06 놀자판 하루
  204. 05.05 뭔데이
  205. 05.04 After School
  206. 05.03 나침반이 가리킨 곳
  207. 05.02 짧은 하루
  208. 05.01 예고된 악재는 악재가 아니다
  209. 05.01 『오즈의 마법사』
  210. 4월
  211. 04.30 Can More
  212. 04.29 초급반
  213. 04.28 감사합니다. 죄송합니다.
  214. 04.27 맥도날드 원정
  215. 04.26 무용(無用)의 쓸모
  216. 04.25 Sunny Day
  217. 04.24 벚나무 아래에서
  218. 04.23 언제나 이타카를 마음에 두라
  219. 04.22 D-100
  220. 04.21 수상한 미용실
  221. 04.20 손으로 컴퓨터를 마주하다
  222. 04.19 비가 오면 빨래를 하자
  223. 04.18 반차
  224. 04.17 발표, 청소, 러닝
  225. 04.16 반티 발주
  226. 04.15 첫 달리기
  227. 04.14 선택과 해석
  228. 04.14 신지훈 - 시가 될 이야기
  229. 04.13 Home Sweet Home
  230. 04.12 人生
  231. 04.11 반티 디자인 공모 & 제출
  232. 04.11 KiiiKiii - I DO ME
  233. 04.10 알고리즘의 끝, C언어의 시작
  234. 04.09 하와이안 스테이크
  235. 04.08 Long Chat
  236. 04.07 Es irrt der Mensch, solang' er strebt.
  237. 04.06 마무리
  238. 04.05 움직이는 물체의 시간은 느리게 간다
  239. 04.04 하나의 칼날
  240. 04.03 3x7=21
  241. 04.02 퀴즈 다음날, 시험 전날
  242. 04.01 April Fools' Day
  243. 3월
  244. 03.31 1년의 90번째 날
  245. 03.31 『카할의 과학하는 삶』
  246. 03.30 日曜日은 칠요일 중 첫째 날 이다
  247. 03.29 토요일은 주말이 아니다
  248. 03.28 그래프와 치킨버거
  249. 03.27 3주차의 시작
  250. 03.26 기초 다지기
  251. 03.25 기초 다지기 & 정리해야 할 CS 개념들
  252. 03.24 0.44%
  253. 03.23 본가 다녀온 날
  254. 03.22 문제 풀이에 집중한 하루
  255. 03.21 동료학습
  256. 03.20 첫번째 시험
  257. 03.19 먹다가 끝난 하루
  258. 03.18 눈이 쌓이면 버그도 쌓인다
  259. 03.17 깃허브, 팀별 면담, 키워드 공부
  260. 03.17 RADWIMPS - 正解 (정답)
  261. 03.16 외출과 배달
  262. 03.16 ILLIT - Almond Chocolate
  263. 03.16 Kep1er - HighLight
  264. 03.15 첫 주말
  265. 03.14 컴퓨팅 사고로의 전환
  266. 03.13 cookie4u.store + 1주차 발제 + 회식
  267. 03.12 디지털 포춘쿠키
  268. 03.11 정글 입성
  269. 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

댓글