CloudFlare Tunnel로 쉽게 웹사이트 배포하는 방법

WHY CloudFlare?

자동으로 ssh, Https 배포를 도와준다.

비용이 들지 않는다.

무료 플랜에 지원되는 기능이 매우 많다.

 

FOR WHO?

소규모 프로젝트에 빠르게 배포하고 싶은

비용을 들이지 않고 배포하고 싶은 
로컬 네트워크나 서버를 퍼블릭 IP 없이 외부에서 접근 가능하게 하고 싶은

리눅스 터미널 환경이 익숙하지 않은 윈도우
개발자

Prerequisites

신용카드 등록이 된 CloudFlare ZERO TRUST 계정

Cloudflare dashboard에 등록하고, 네임서버가 cloudflare 로 된 도메인

일반적인 웹 DNS설정 대시보드와 다르게 생겼다.

 

기본 대시보드는 신용카드 등록없이 접근 가능하고 왼쪽 바에서 ZERO TRUST를 클릭하면 신용카드 등록 화면으로 넘어간다.

 

처음 CloudFlare에 가입하면 이런 대시보드가 뜰텐데 ZERO TRUST가입이 안 되어있으면 메뉴 사이에 ZERO TRUST가 있을 것이다. 그것을 클릭해서 신용카드 등록을 하면 ZERO TRUST DASHBOARD에 접속이 가능합니다.

 

만약 도메인을 외부사이트에서 구매했다면, 구매한 사이트에서 네임서버 설정을 변경해야한다.

구매한 사이트 네임서버 설정에서 이 두개를 추가하면 된다.

 

제한사항

최대 50의 사용자까지 이용가능하다.

적용할 프로젝트 특성

front는 vue3, vscode로 back은 sts(spring tool suite 4) Spring BOOT로, DB는 MySQL이다.. 3tier application이라는 뜻.

 

배포를 결정한 이유

나의 경우 센드버드의 챗 api가 로컬 환경에서 돌아가는지 확인했다. 시연하는 환경도 강의실 안 25개의 컴퓨터가 같은 네트워기 이기 때문에 사실 로컬로도 시연이 충분히 가능한 상황이라 배포가 필요없었다. 그렇지만 이번 년도부터 프로젝트에 AI 활용 능력이 채점 기준에 추가되었고, GEN AI로 단순 데이터 생성이 아니라 학습시키는 등을 해보고 싶었다. 센드버드에 AI CHATBOT API가 있지만 추가하려면, 내 도메인이 외부에서 접속 가능한 환경이어야했다. 

 

---

 

CloudFlare Tunnel 관련 문서이다. 필히 읽어봐야한다.

https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/

Downloads | Cloudflare Zero Trust docs

 

Cloudflared를 선택한다.

 

다운받고 cmd를 관리자 권한으로 실행 후 4 밑의 명령어를 복붙한다.

 

system32라 길래 깜짝놀랐다.

내 컴퓨터 운영체제는 64비트일텐데? 

 

역사적 이유: 초기에 Windows에서 32비트 프로그램을 저장하기 위해 System32라는 이름을 사용했습니다. 이후 64비트로 전환되면서도 이 디렉토리 이름을 유지해 호환성을 보장했다고 한다.

 

그대로 치면 사이트도 커넥터를 인식하고 띄워준다.

 

 

service는 연결할 localhost를 넣으면 된다.

 

이 때, domain에는 cloudflare에 등록해놓은 도메인만 가능하다. dns 네임서버 설정이 외부(aws route53, 가비아 등)이면 안되고 cloudflare 네임서버 2개를 등록해야한다. 또한, dns 레코드(A, AAAA 등)가 설정되어 있으면 안 된다. 

 

네트워크 스터디에서 나온 keep alive가 나와 신기했다.

각종 설정이다. 나의 경우 프런트인 vue3 , localhost:5173을 연결한다. mysql은 로컬에서 처리한다. TCP에서 연결이 제대로 되어있는지 ack 패킷을 보내 확인하는 것이 keep alive였다. 너무 자주 보내도 좋지 않고 너무 오래 안보내도 좋지 않다.

 

위 사진에서 next를 누르면 아래 사진처럼 뜬다.

배포 성공!

축하한다 ! 이제 vue프로젝트인 프론트엔드가 배포가 완료되었다! 설정한 subdomain과 설정한 도메인을 검색하면 작동이 제대로 되는 것을 볼 수 있다.
심지어 https 까지 자동으로 해주었다. 정말 편리한 것을 알 수 있다. 

CloudFlare 메인 대시보드

CloudFlare 메인 대시보드 DNS페이지에 가보면 자동으로 CNAME(별칭)설정한 서브도메인까지 추가하여 설정되어 있는 것을 볼 수 있다.

 

익숙해지면 배포하는데 30분도 안 걸릴것 같다. 기한이 얼마 안남은 프로젝트를 빠르게 배포해야할 때 추천드리겠습니다.

 

소모된 리소스

가비아에서 구매하는데 든 도메인 구입 비용 500원

cloudflare를 알아가는데 걸린시간 하루