공짜인데 파워풀한 Cloudflare와 Nginx를 써보자 - 플리맨 프로젝트

김철기·2022년 12월 13일

플리맨(FleaMan)

목록 보기

4/14

해당 포스팅은 플리맨(FleaMan) 프로젝트의 광고 겸 개발일지입니다.
시간되실때 플리맨(https://fleaman.shop) 서비스 한번 사용해주시고 피드백주시면 감사하겠습니다.

개발 포스팅 시작

드디어 개발 포스팅 시작이다. 코드를 리뷰하기보다 사용된 기술들을 소개하는 형식으로 진행해보려고 한다. 이번 포스팅은 저번에 예고했던 Cloudflare와 Nginx에 대해서 다뤄보도록 하겠다. 어렵지 않으면서 누구든지 따라할 수 있게 (노력)해보겠다.

왜 쓰는거야?

시리즈의 2번째 포스팅에서 언급했었다. (중고물품 통합검색 플랫폼 무엇으로 만들까? - 플리맨 프로젝트)
각각의 이유는 아래와 같다.

Cloudflare DNS: 공짜인데 SSL까지 자동으로 적용된다.
Nginx: 포트포워딩용으로 쓴다.
(추가) Cloudflare Pages: git push하면 자동으로 빌드해서 꽤 많은 요청을 공짜로 배포해준다.

그런데 이렇게만 설명하면 너무 불친절하다. 어려운 용어를 조금 더 쉽게 설명해보겠다.

DNS(Domain Name System): 우리 서비스 페이지는 서버에 올라가 있고 서버는 ip로 접근 가능하다. 120.153.xx.xx 같은 형태일 것이다. 그런데 이렇게 서비스하면 사람들이 저 이상한 숫자를 외워야한다. 그래서 우리는 서비스를 운영할 때 도메인이라는 것이 필요한 것이다. 이건 naver.com, velog.io, fleaman.shop와 같은 형태로 생겼는데 이걸 저 이상한 숫자에 연결해서 쓴다. 예를 들어 fleaman.shop을 입력하면 120.153.xx.xx의 페이지를 보여주는 형식이다. 그러면 사람들이 저 이상한 숫자대신 쉬운 fleaman.shop을 외우면 된다. DNS는 fleaman.shop과 120.153.xx.xx와 같은 ip를 연결해주는 시스템을 의미한다.
SSL(Secure Sockets Layer): 브라우저 입력창을 클릭해보면 가장 앞이 https로 시작될 것이다. 이것이 SSL이 적용되었다는 것인데 적용안된 사이트에서는 http로 되어 있을것이다. SSL이 적용되어 있으면 웹에서 전송되는 데이터가 암호화돼서 보안적으로 좋다.
포트포워딩: DNS에서 fleaman.shop을 ip주소로 변환해준다고 했다. 그런데 DNS에서는 뒤에 포트까지 컨트롤해주지 않는다. 예를 들어 backend.fleaman.shop이라는 도메인을 120.153.xx.xx:3400으로 연결해주지 않는다는 것이다. http 요청이면 80번, https 요청이면 443번 포트번호로 서버에 신호가 갈것이다. 그러면 80 또는 443으로 들어온 신호를 3400으로 바꿔줘야하는데 이렇게 포트를 바꿔주는 것이 포트포워딩이다.

쓰는 방법

Cloudflare DNS

DNS 설정을 따라해보려면 먼저 도메인을 사야한다. 기본적인것까지 전부 설명하려면 끝도없기 때문에 도메인 구입 및 cloudflare 사이트 등록은 기본적으로 할 수 있다는 가정으로 진행하겠다. 사이트 등록이 끝났으면 DNS 탭에서 도메인 연결을 할 수 있다. 형식을 A로 한것은 도메인을 ip주소로 연결하겠다는 것이고 아래 이미지처럼 설정하면 fleaman.shop이 120.153.xx.xx로 연결된다.

자주 쓸 CNAME이라는 형식도 한 번 보자면, 도메인을 다른 도메인으로 연결할 때 쓴다. 아래 이미지처럼 설정하면 fleaman.shop 도메인이 fleaman.pages.dev로 연결된다. 현재 이렇게 연결되어 있는데 fleaman.pages.dev는 cloudflare pages로 배포한 페이지의 주소이다.

앞에서 SSL에 대해서 살펴봤는데 cloudflare에서 SSL 기본으로 세팅이된다. 그래서 별도로 세팅해줄 필요가 없다. 이 부분이 아주아주아주아주 편하고 좋다.
만약 기본 세팅이 안되있는 AWS Route53같은것을 쓴다면... 아래와 같은 어렵진 않지만 귀찮은 것을 해야한다.

1. 도메인을 서버 ip로 연결한다.
2. Nginx를 설치하고 80으로 들어온 신호를 캐치할 수 있도록 세팅한다.
3. .well-known 폴더를 세팅한다.
4. letsencrypt를 설치해 인증서를 세팅한다.
5. 인증서 정보로 nginx 세팅을 수정한다.
6. 인증서가 갱신될수 있도록 cron을 생성해 체크한다.

Nginx

nginx는 서버에 설치해서 사용한다. 설치방법은 우분투 기준으로 sudo apt install nginx 로 설치한다. os마다 설치 명령어가 조금씩 다르니 참고하길 바란다. nginx를 설치하면 /etc/nginx/ 폴더가 생성된다. /etc/nginx/site-available/defalut 파일을 수정하면 포트포워딩을 할 수 있다.
간단하게 80번 포트, backend.fleaman.shop으로 들어온 신호를 localhost:3400으로 포워딩하는 예시를 작성했다.

server {
	listen 80;
    server_name backend.fleaman.shop;
    
    location / {
    	proxy_pass http://localhost:3400;
    }
}

만약 리다이렉트하려면 아래처럼 작성하면 된다.

server {
	listen 80;
    server_name backend.fleaman.shop;
    
    return 301 https://back.fleaman.shop$requests_uri;
    }
}

만약 엘라스틱서치, 키바나, 주피터노트북 등 외부에서 접근하고 싶은 무언가가 생기면 포트만 잘 나눠주고 포트포워딩해서 쓰면 되겠다.

Cloudflare Pages

내가 git에 올린 페이지를 자동으로 배포해주는 서비스라고 설명했다. 그러니까 먼저 git 레포지토리가 있어야한다. 실습해보려면 github에 레포지토리를 만들고 내가 만든 페이지를 올려보자. 이 부분도 설명하려면 한 세월이라 할줄 안다고 가정하고 진행하겠다.
먼저 Pages 페이지에서 프로젝트 생성 -> Git에 연결 버튼을 누른다.

레포지토리 선택은 자신이 만든 레포지토리를 선택하고, 빌드 설정 및 배포로 넘어온다.
프로젝트 이름을 설정하고 프로덕션 분기를 선택한다. 만약 아래처럼 master로 한다면 master 브랜치에 push될 때 배포된다.

그리고 본인이 빌드하고자하는 설정을 선택한 뒤 저장 및 배포 버튼을 눌러주면 된다. 플리맨은 리액트로 작성되었기 때문에 Create React App으로 선택했다.

배포가 완료되면 Pages 페이지에 아래 이미지처럼 표시된다.

누르고 들어가면 사용자 설정 도메인 탭에서 연결할 도메인을 설정할수도 있다.

설정 탭에서 환경변수 설정 및 배포 설정을 수정할 수 있으니 확인해보면 좋다.
이제 코딩하고 git add . -> git commit -m "메세지" -> git push 하면 새로 개발한 페이지가 자동 배포된다!

정리

이렇게 파워풀한 Cloudflare와 Nginx를 이용해 공짜로 도메인 세팅부터 포트포워딩, 자동 배포까지 해보았다.(도메인 구입 비용과 Nginx 운용 서버 비용은 당연히 발생한다.)
오늘 포스팅한 내용이 서버 네트워크 인프라를 조금이라도 했던 분이면 쉽게 느껴지겠지만, 코드 작성만 해오던 개발자 분들은 생소해서 어렵게 느껴졌을 수도 있다. 그래서 최대한 쉽게 쓰려고 했는데 잘 됐는지는 모르겠다. 바라기로는 포스팅이 도움이 돼서 많은 분들이 공짜이면서 간편한 cloudflare와 nginx를 활용할 수 있게 됐으면 좋겠다. (추가로 궁금한 부분이 있다면 댓글로 적극 답변하겠다)