✨소개

이번 포스팅을 작성하게 된 이유가 뭐나면 Heroku에서 도메인을 연결하는 법을 알려드릴 겸 https 설정을 하는 법을 알려드리기 위함입니다.
웹사이트를 만드실 때엔 https 사용하시는 것이 좋습니다. AWS ec2를 사용할 때에는 certbot-auto를 사용해서 letsencrypt를 통해 인증서를 받고 nginx로 http로 접속을 해도 자동으로 https로 접속하게 설정을 해주었습니다.

🎐Cloudflare 장점, 단점

그러나 Heroku 같은 경우는 이런 설정을 하기가 좀 힘듭니다. 그래서 저는 방법을 찾다가 cloudflare라는 것을 알게되었습니다.
Cloudflare 는 letsencrypt처럼 https 인증서를 무료로 발급받을 수 있는 사이트입니다. Cloudflare는 전에 certbot-auto 때와 같이 코드를 입력해주실 필요가 없습니다. 그냥 버튼만 누르시면 자동으로 설정이 되어서 매우 편합니다. 게다가 https 인증서 뿐만이 아니라 무료로 웹사이트를 최적화할 수 있는 방법들이 많으니 한 번 찾아보시길 권합니다.

그러나 단점은 certbot-auto로 설정했을 때와는 다르게 cloudflare를 한 번 거쳐가야하므로 속도가 조금 느려진다고는 합니다. 그래도 편의성만큼은 칭찬해줄만 합니다.

✨도메인 연결

이제 사용하는 방법에 대해 알아봅시다.

🎐Heroku에 도메인 추가하기

우선 heroku 웹사이트에 가셔서 여러분이 만든 웹에 들어가세요. 그 다음 세팅에 들어가시고 스크롤을 내리다 보면 Add Domain이란 버튼이 보이실텐데 그 버튼을 누르시고 '여러분의.도메인', 'www.여러분의.도메인'을 넣어주시면 됩니다.

🎐Cloudflare 설정하기

🎉가입하기

그 다음 google에 Cloudflare를 검색하셔서 가입해주세요. 그 다음 도메인을 추가하라고 할텐데 여러분의 도메인을 입력해주시고 https의 관한 여러 설명들이 나올텐데 한국어 버전도 있으니 천천히 읽어보시면서 설정을 해주시면 됩니다. 아마 중간에 https로 리다이렉트에 관한 얘기가 나올텐데 한다고 체크해주시면 됩니다.

🎉레코드 설정

그리고 이젠 도메인 설정을 할텐데 등록하신 도메인을 클릭하고 들어가셔서 DNS 버튼을 누르시면 레코드를 생성하실 수 있는 부분과 네임서버가 나옵니다.

여기서 네임서버는 'AWS에 도메인 연결하기' 때처럼 도메인을 구입하신 곳에 가시면 네임서버를 입력할 곳이 있을텐데 거기에 적어주시고 저장해주시면 됩니다.

그리고 레코드 생성을 하시고 CNAME 타입을 선택하시고 이름에 @를 적어주시고 콘텐츠에 heroku에 배포하신 웹사이트 주소를 입력해주시면 됩니다(예시: kihat-blog.herokuapp.com). 여기서 @은 root 주소를 뜻합니다. 거기에 추가로 CNAME 타입의 레코드 생성을 또 하셔서 이름에 www를 입력하시고 콘텐츠에 그전에 입력하신 heroku에 배포한 웹사이트 주소를 입력해주시면 www.여러분의.도메인 이런 식으로 접속해도 접속을 할 수 있게 됩니다.

여기까지 설정을 하셨으면 여러분의 도메인을 통해 들어가실 수 있게 되고 자동으로 https로 접속이 되실겁니다.

🎉Page Rules 설정

그리고 추가로 설정을 해주면 좋은게 PageRules입니다. 이걸 통해서 어떤 주소로 들어가도 원하고자 하는 주소로 들어오게 할 수 있습니다.

이런 식으로 설정해주시고 저장 및 배포를 하시면 됩니다.

이제 진짜 마지막으로 heroku에다가 cloudflare를 사용하니까 cookie secure를 true할 때 뭔가 문제가 있더군요. 그래서 검색을 하다 방법을 찾았는데

app.set('trust proxy, 1')

cookie: {
    //...
    secure: true,
},

백엔드의 server 파일에 위 내용을 추가해주시고
cloudflare에 가서 쓰시고자 하는 도메인에 가셔서 SSL/TLS에 가시고 원본 서버를 누르신 다음 인증된 원본 끌어오기를 '켬'으로 바꿔주시면 됩니다.

+최근 다시 해보니 "인증된 원본 끌어오기"는 굳이 켜지 않아도 되는 것 같습니다.