[스나이퍼팩토리] 한컴AI아카데미(26.05.14)

 

도메인 연결

1단계: 도메인 구매

https://hosting.cafe24.com/

카페24 호스팅 | 온라인 비즈니스의 시작

 

2단계: cloudflare 연결

• 도메인 연결
• 해당 도메인 - DNS - 레코드 - Cloudflare 이름 서버를 cafe24호스팅 네임서버에 입력

CloudFlare 연결 이해하기

1. 핵심 개념 이해하기

🌐 도메인 (Domain) 이란?
인터넷 세상의 '문자 주소'입니다. 원래 컴퓨터들이 서로를 찾아갈 때는 192.168.0.1 같은 복잡한 숫자 배열인 IP 주소를 사용.
하지만 사람이 이 숫자를 일일이 외우기 힘들기 때문에, naver.com이나 google.com처럼 기억하기 쉽게 만든 주소가 바로 도메인입니다.
비유: 친구에게 우리 집 주소를 알려줄 때 경도·위도 좌표 대신 "서울시 OO구 OO동"으로 알려주는 것과 같습니다.

🗺️ DNS (Domain Name System) 란?
도메인을 IP 주소로 번역해 주는 '인터넷의 전화번호부'입니다. 사용자가 브라우저에 mysite.com을 입력하면, DNS 서버가 "아, 그 도메인의 실제 컴퓨터 주소(IP)는 123.456.78.9네!" 하고 연결해 줍니다.
비유: 전화번호부(DNS)에서 '홍길동(도메인)'을 검색하면 '010-XXXX-XXXX(IP 주소)'가 나오는 것과 같습니다.

🚇 터널 (Cloudflare Tunnel) 이란?
내 컴퓨터(서버)와 클라우드플레어 사이에 '안전하고 암호화된 전용 비밀 통로'를 연결하는 기술입니다. 원래 외부에서 내 컴퓨터에 접속하게 하려면 공유기의 포트를 열어주는 포트포워딩(Port Forwarding)을 하거나, 집의 공인 IP 주소를 외부에 노출해야 했기 때문에 보안상 매우 위험!!
터널을 쓰면 내 컴퓨터가 클라우드플레어에게 "내가 먼저 안전한 통로를 연결해 둘 테니, 내 도메인으로 오는 손님들은 이 통로로 보내줘!" 하고 요청하는 방식이 됩니다. 외부에는 내 집 IP 주소가 전혀 노출되지 않습니다.
비유: 외부인에게 내 집 주소와 현관문 비밀번호를 알려주는 게 아니라, 클라우드플레어라는 거대한 안전 가이드 센터와 우리 집 지하 사이에 안전한 '전용 지하철(터널)'을 뚫어놓는 것입니다.

2. 전체적인 작동 흐름

     1. 사용자: 브라우저에 내가 산 도메인(예: myproject.com)을 입력
     2. DNS 단계: 클라우드플레어의 DNS가 이 도메인을 확인하고, 클라우드플레어의 안전한 서버(프록시)로 사용자를 안내
     3. 클라우드플레어 서버: "아, 이 주소로 들어온 요청은 저번에 뚫어놓은 '그 터널'로 보내면 되겠구나!" 하고 판단
     4. 터널 통과: 요청이 암호화된 터널을 타고 내 컴퓨터(로컬 서버)로 쏙 들어옵니다.
     5. 내 컴퓨터: 요청을 처리하고(예: Flask 웹 페이지를 띄움) 다시 터널을 통해 사용자에게 안전하게 화면을 보내줍니다.

3. 클라우드플레어는 여기서 무엇을 해주나요?
클라우드플레어는 이 모든 과정을 한곳에서 관리할 수 있게 해주는 '종합 커넥터이자 방패' 역할

1. 초고속 DNS 제공: 세계에서 가장 빠른 DNS 시스템을 가지고 있어서, 사용자가 내 도메인을 입력했을 때 연결되는 속도가 엄청나게 빠릅니다.

2. 보안 및 디도스(DDoS) 방어: 모든 트래픽이 클라우드플레어를 거쳐서 터널로 들어오기 때문에, 악성 해커나 디도스 공격을 클라우드플레어 선에서 알아서 걸러내고 차단해 줍니다.

3. SSL 인증서 자동 발급 (https://): 보안 연결에 필수적인 SSL 인증서를 복잡한 설정 없이 클릭 몇 번으로 무료로 적용해 줍니다.

4. 포트포워딩 없는 외부 연동: 집 공유기 설정을 바꿀 필요도 없고, 내 실제 IP 주소를 꽁꽁 숨긴 채 안전하게 내 개발 서버를 외부에 서비스할 수 있게 해줍니다.

 

3단계: 도메인 연결

 

1: cloudflared 설치

1) 설치 파일 다운로드

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb

2) 패키지 설치

sudo dpkg -i cloudflared-linux-amd64.deb

3) 버전확인

cloudflared --version

 

2: 로그인 및 인증

cloudflared tunnel login

• 위 명령어를 치면 URL이 나오는데 이를 브라우저 창에 복사해서 페이지 열기
• 페이지가 열리면  로그인하고 권한적용 창이 열리면 적용할 도메인을 선택하여 인증
• 인증완료 후  ~/.cloudflared/cert.pem 위치에 인증서가 자동으로 저장되면 성공!

3: 터널 생성 및 ID 확인

# 'my-tunnel'은 본인이 원하는 이름

cloudflared tunnel create my-tunnel

• 결과값으로 나오는 Tunnel ID(예: 12345678-abcd...)를 복사해서 메모장에 붙여넣기

4: 설정 파일(YAML) 만들기

설정 파일 생성

nano ~/.cloudflared/config.yaml

아래 내용을 복사해서 붙여넣기

tunnel: <아까_복사한_터널_ID>
credentials-file: /home/<사용자계정명>/.cloudflared/<터널_ID>.json

ingress:
  - hostname: web.example.com         # 연결할 외부 도메인
    service: http://localhost:8000    # 내부 서비스 포트
  - service: http_status:404          # 그 외 접속 시 404 처리

 

5: DNS 등록 및 실행

DNS 등록 (도메인과 터널 연결: 처음에 한 번만 하면 됨)

cloudflared tunnel route dns my-tunnel web.example.com

 

6: 서비스 등록

서비스 설치:

sudo cloudflared --config /home/<사용자계정>/.cloudflared/config.yaml service install

 

서비스 시작 및 등록:

sudo systemctl start cloudflared   # 서비스 시작
sudo systemctl enable cloudflared  # 부팅이후 자동 시작

 

7: 사이트 확인

외부 도메인을 브라우저에 입력하여 페이지가 열리는지 확인

 

가상 서버(Front Server, Back Server) 도메인 연결

1단계: 위 방법처럼 Front Server, Back Server 도메인 연결

2단계: 호스트로 nginx 연결하기

 

* 주의할 점

 

1. nginx 설정파일 설정

• Nginx는 요청이 들어오면 [1단계: listen] ➡️ [2단계: server_name] 순서로 필터링을 거칩니다.
• listen (포트 번호): "어느 문으로 들어왔는가?"
  • listen은 Nginx가 컴퓨터의 몇 번 포트(방 번호)를 열고 손님을 기다릴지 결정하는 설정
  • 역할: 외부 요청이 들어오는 통로를 지정합니다.
  • 특징: 웹 브라우저 주소창에 http://로 접속하면 기본적으로 80번, https://로 접속하면 443번 포트로 자동 연결됩니다. (포트 번호를 주소창에 안 적어도 되는 이유가 이 때문입니다.)

server {
    listen 80; # 80번 문(포트)으로 들어오는 손님을 이 구역에서 받겠다!
    ...
}

---

• server_name: "주소창에 뭐라고 치고 들어왔는가?"
  • server_name은 손님이 주소창에 입력한 도메인 이름(또는 IP 주소)을 확인하는 설정입니다.
  • 역할: 똑같은 listen 포트로 들어온 손님들을 도메인 주소에 따라 세부적으로 분류합니다.
  • 특징: 도메인이 없을 때는 서버의 실제 IP 주소를 적거나, 테스트 용도라면 localhost를 적기도 합니다. 여러 개의 도메인을 띄어쓰기로 나열할 수도 있습니다.

server {
    listen 80;
    server_name example.com www.example.com; # 주소창에 example.com을 친 손님만 이리로 오세요!
    ...
}

 

2. nginx 프록시(Froxy) 사용

server {
    listen 80;
    server_name localhost;
    
      location / {

        root /var/www/html; 
        index index.html index.htm;

    }
    
        location /api {
        proxy_pass https://front.codefoilo.store;
        include proxy_params;

    }
}

• 원래는 proxy_pass에 도메인 사용 가능
• 하지만 오류 발생 가능성
  • DNS 해석 문제 (가장 흔함)
    • 아래 환경에서 더 자주 발 
    • Docker 내부
    • private DNS
    • Cloudflare tunnel
    • 내부 네트워크
    • /etc/resolv.conf 문제
  • HTTPS SNI
  • Host 헤더
  • trailing slash 규칙

* 해결 방법

1.  proxy 설정파일 수정

proxy_pass https://api.example.com;

proxy_ssl_server_name on;

 

2. 자바스크립트에 직접 url 입력

const API_BASE = "https://api.codefoilo.store";

$.getJSON(`${API_BASE}/v1/restaurants`, function(data) {
  console.log(data);
});

 

 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.