헤로쿠(heroku)에 github 연동해서 cors 프록시 서버 만들기(with cors-anywhere)

요즘 이것 저것 많이 건드려(만들어) 보려고 하는데요. 서버리스 상태로 무언가 만들기 위해서는 cors 프록시 서버가 필수적으로 필요합니다. cors 프록시 서버로 가끔 쓰거나 상용 서비스가 아닌 간단한 서비스, 토이프로젝트를 돌리기 위해서는 헤로쿠(heroku)만한 것이 없어 보입니다. 

 

헤로쿠(heroku)에 github 연동

 

조금 더 자유도가 높은 게 필요하다면 여기서 당연히 AWS로 눈을 돌리면 되는것이지요. 프리티어가 생각보다는 꽤나 짱짱하게 돌아갑니다. 1년밖에 안되서 그렇지...

 

우선 cors 프록시로 사용할 프로젝트는 직접 만드는게 아닌 이미 잘 만들어져있는 cors-anywhere 라는 프로젝트를 포크해와서 그대로 헤로쿠에 연결해서 띄우는 작업으로 나만의 cors 프록시를 만들겁니다. 

 

헤로쿠와 깃헙을 연동하고 프록시를 만들기를 찾는 소양을 가진 개발자라면 아마 10분 안쪽으로 나만의 프록시 서버를 가지실수 있습니다. 시작해봅시다~ 

---

1. cors-anywhere 프로젝트를 내 깃헙으로 포크해온다.

 

https://github.com/Rob--W/cors-anywhere

Rob--W/cors-anywhere

아주 유명한 프로젝트입니다. 스타가 거의 3천개를 받은 깃헙 프로젝트니 제가 봤을때는 아주 유명한 프로젝트지요. 이 프로젝트를 본인 깃허브로 포크해오세요~ 

 

저기 Fork 누르면 되는거 아시죵?

---

2. 헤로쿠 가입이랑 앱도 만들어준다!

 

우선 헤로쿠 가입이 되어있고 당연히 앱도 만들었습니다. 혹시 가입도 안되어있는 상태고 앱도 만들어져있는 상태가 아니라면 "헤로쿠(heroku) 가입부터 node.js 서비스 올리기까지"를 참고해서 회원가입도 하고 앱도 만들어줍시다.

 

---

3. 디플로이 방법을 Github로 선택, Connect to GitHub 선택

 

디플로이 방법을 Github로 선택, Connect to GitHub 선택

---

4. 깃헙 인증을 하고 자신이 포크한 cors-anywhere를 연결해준다.

자신이 포크한 cors-anywhere를 연결

---

5. Enable Automatic Deploys와 Deploy Branch 선택

 

Enable Automatic Deploys를 활성화 시켜서 master 브랜치에 소스가 수정되면 자동으로 디플로이 되게 변경해줍니다. 그 후에 메뉴얼 디플로이 한번 해서 소스를 수동으로 한번 올려줍시다.

 

---

Enable Automatic Deploys 활성화가 되면 Disable Automatic Deploys가 됨.

▼▼▼

Enable Automatic Deploys 활성화

---

Deploy Branch 선택

▼▼▼

Deploy Branch 선택

---

Deploy Branch 하면 빌드 로그가 보임

▼▼▼

Deploy Branch 하면 빌드 로그가 보임

---

6. 작업이 완료되면 사이트에 접속해서 확인!

 

내 주소는 https://cors-nhj12311.herokuapp.com 이다. 크롬으로 접속해보니 잘 나온다. 이제 나만의 프록시 서비스를 갖게 되었습니다.

접속해서 확인

cors-anywhere 프로젝트에 가보면 화이트 리스트를 지정하는 방법이 나오니 그대로 화이트 리스트를 지정해서 본인이 아닌 사이트에서의 호출을 차단하도록 설정해줍시다. 저는 일단 귀찮아서 안했는데 로그 좀 살펴보다가 엉뚱한 곳에서 사용이 들어오면 그때 화이트 리스트를 적용할까 생각중입니다.

 

어차피 무료라... 별로 상관없기도 하고 저도 여러 PC에서 사용하려면 화이트 리스트 지정하는것도 좀 귀찮아서;;;

---

7. 헤로쿠 서비스 로그 확인하는 방법

 

사실 헤로쿠(heroku)에 접속해보면 영문이라 그렇지 메뉴얼이 엄청 잘 나와있는 것 같습니다. 서비스 로그를 확인하는 방법입니다.

 

 

아래의 커맨드 방식은 heroku-cli를 설치하면 사용할수 있는 커맨드 방식입니다. 로그를 자주 확인한다면 헤로쿠 사이트에서 확인하는 것보다 커맨드 방식으로 확인하는게 좀 더 간편할 것입니다. 

heroku logs -t --app your-app-name

 

두번째로 대시보드 우측 상단에 More 버튼에 있는 View logs를 선택해서 보는 방법이 있습니다. 

 

우측 상단 More --> View logs

---

이렇게 아주 잠깐 동안 "헤로쿠(heroku)에 github 연동해서 cors 프록시 만들기(with cors-anywhere)"를 통해서 나만의 프록시 서버를 만드는데 10분이 채 안걸렸습니다. CORS를 우회하기 위해서 간단한 프록시 서버가 필요하다면 이 방법만한게 있을까 싶네요. 강추드립니다.