성인 엔지니어 캐릭터 루나가 브라우저, 보호 구름, 터널, Mac mini 서버 흐름을 설명하는 웹툰 표지

typeandlife.com infrastructure comic

루나의
터널 마법 수업

Cloudflare, HTTPS, Tunnel, Mac mini 서버 구조를 처음 보는 사람도 이해하도록 만든 장편 설명 만화.

CloudflareHTTPSTunnelMac mini127.0.0.1

EP. 01

“주소를 치면, 누가 먼저 만나러 올까?”

루나가 방문자 브라우저와 보호 구름을 양손에 놓고 설명하는 장면

루나: “브라우저에 typeandlife.com을 치면, 네 컴퓨터가 바로 Mac mini를 때리는 게 아니야.”

“먼저 인터넷 앞문, 즉 Cloudflare 쪽으로 가!”

1. 지금 구조 한 줄 요약

방문자는 Cloudflare의 HTTPS 앞문을 만나고, Cloudflare는 Mac mini 안의 cloudflared가 미리 열어 둔 터널을 따라 로컬 서비스로 요청을 전달해.

핵심: 공유기 포트를 열어 외부에서 Mac mini로 직접 들어오게 하지 않는다. Mac mini가 밖으로 먼저 연결한 터널만 사용한다.

2. DNS는 “주소록” 역할

DNS는 “typeandlife.com은 어디로 가야 해?”를 알려주는 주소록이야. 지금은 공개 DNS가 Cloudflare edge 주소를 돌려줘.

사용자가 보는 것

https://typeandlife.com

DNS가 안내하는 곳

Cloudflare의 가까운 edge 서버

그래서 방문자는 Mac mini의 집 IP를 직접 알 필요가 없어.

3. HTTPS 인증서는 누가 맡나?

방문자의 브라우저와 Cloudflare 사이에는 HTTPS가 걸려 있어. 인증서 갱신은 Cloudflare edge 쪽에서 관리되는 모델이야.

Mac mini 안쪽 서비스는 현재 http://127.0.0.1:8787로 충분해. 왜냐하면 이 주소는 같은 Mac 안에서만 접근되는 루프백 주소이기 때문이야.

나중에 직접 공개 origin HTTPS 구조로 바꾸는 게 아니라면, 지금 단계에서 별도 origin certificate는 필수가 아니야.

보호 구름에서 Mac mini로 빛나는 터널이 내려오는 장면

루나: “터널은 비밀 통로라기보다, Mac mini가 Cloudflare에 먼저 걸어 둔 ‘밖으로 나가는 전화선’에 가까워.”

“그래서 공유기에서 80/443 포트를 열 필요가 없어.”

4. Cloudflare Tunnel이 하는 일

Mac mini에서 cloudflared라는 작은 연결 프로그램이 계속 실행돼. 이 프로그램이 Cloudflare와 연결을 유지하고 있다가, Cloudflare가 받은 요청을 로컬 서비스로 넘겨줘.

터널 이름

typeandlife-macmini

현재 로컬 목적지

http://127.0.0.1:8787

이 말은 “도메인과 HTTPS는 Cloudflare가 받고, 실제 임시 페이지 파일은 Mac mini가 준다”는 뜻이야.

5. 왜 127.0.0.1이 중요할까?

127.0.0.1은 “내 컴퓨터 자신”을 뜻해. 현재 임시 랜딩 서버는 이 주소에만 붙어 있어서 LAN이나 인터넷에서 직접 접근하기 어렵다.

좋음127.0.0.1:8787
피하기0.0.0.0:8787
피하기공유기 포트포워딩

6. 요청 하나가 지나가는 실제 여정

  1. 방문자가 브라우저에서 https://typeandlife.com을 연다.
  2. DNS가 Cloudflare edge로 안내한다.
  3. 브라우저와 Cloudflare가 HTTPS로 안전하게 대화한다.
  4. Cloudflare가 “이 hostname은 터널로 보내야 한다”고 판단한다.
  5. Mac mini의 cloudflared가 받은 요청을 127.0.0.1:8787에 전달한다.
  6. 임시 랜딩 서버가 HTML을 돌려주고, 같은 길로 응답이 돌아간다.

7. 보안 관점에서 좋은 점

외부 인바운드 포트 없음

공유기에서 웹 포트를 열 필요가 없다.

origin 직접 노출 감소

방문자는 Mac mini에 직접 접속하지 않는다.

비밀정보는 repo 밖

Cloudflare credential은 ~/.cloudflared에만 둔다.

잘못된 hostname은 404

설정에 없는 요청은 기본적으로 막힌다.

8. 그래도 조심할 것

터널이 안전한 편이어도, Mac mini 전체가 자동으로 안전해지는 건 아니야. 다른 개발 서버가 0.0.0.0이나 *:3000처럼 열려 있으면 LAN에 노출될 수 있어.

제품 앱도 가능하면 127.0.0.1:<port>로만 띄우고, Cloudflare Tunnel이 그 포트로만 연결하게 만드는 게 기본 방침.

9. 지금 typeandlife.com은 무엇을 보여주나?

지금은 실제 제품 앱이 아니라, 이 설명 만화를 담은 임시 랜딩 페이지를 보여줘. 즉 “웹서비스 기반 공사 완료, 제품 입주 대기 중” 상태야.

DNSCloudflare edge
HTTPS정상
OriginMac mini loopback
루나가 8787이라고 적힌 바통을 다른 개발자에게 넘기는 장면

루나: “제품 Codex가 실제 앱을 만들면, 이 바통만 넘기면 돼.”

“DNS와 HTTPS는 그대로 두고, 로컬 목적지만 바꾸는 거야.”

10. 실제 앱으로 바꾸는 가장 쉬운 방법

제품 앱이 준비되면 두 가지 중 하나를 선택하면 돼.

방법 A: 같은 포트 사용

임시 랜딩을 내리고 실제 앱을 127.0.0.1:8787에 띄운다. 터널 설정은 그대로.

방법 B: 새 포트 사용

앱을 127.0.0.1:3001 같은 포트에 띄우고, 터널 service target만 바꾼다.

보통은 B가 더 안전해. 새 앱을 로컬에서 먼저 확인한 뒤 터널 target만 전환할 수 있으니까.

11. 절대 git에 넣으면 안 되는 것

  • Cloudflare API token
  • ~/.cloudflared/*.json credential 파일 내용
  • ~/.cloudflared/cert.pem
  • 개인키, 세션 쿠키, 계정 ID와 연결된 민감 메모

문서에는 placeholder만 쓰고, 실제 비밀값은 로컬 사용자 계정의 안전한 위치에 둔다.

12. 장애가 나면 어디를 볼까?

페이지가 안 뜸

먼저 DNS와 Cloudflare edge를 본다.

터널 에러

cloudflared 서비스 상태를 본다.

502/응답 없음

로컬 앱 127.0.0.1:8787이 살아있는지 본다.

Mac 재부팅 후 안 됨

LaunchAgent/로그인 세션 상태를 본다.

13. 한 문장으로 기억하기

“방문자는 Cloudflare 앞문으로 들어오고, Cloudflare는 Mac mini가 먼저 열어 둔 터널을 따라 localhost 서비스에만 노크한다.”