GitHub Pages에서 직접 외부API를 사용하는건 힘들다 [AWS/탐구]

깃허브 페이지에서 외부 API를 호출하여 데이터를 실시간으로 렌더링하고자 했습니다.

깃허브 페이지는 정적 리소스를 무료로 간편하게 배포할 수 있어 활용성이 높은데, 통신 및 API 활용이 가능할지에 대한 의문이 생겼습니다.

의문을 해소하기 위해 서버사이드 함수를 AWS Lambda로 실행하고자 했습니다. (서버리스 아키텍처)

---

# 테스트 결과:

1. 외부 API를 사용해 데이터를 응답받아 렌더링하는 것은 충분히 가능했습니다.
2. 하지만 외부 API를 사용하려면 API Key를 사용해야 하는데, API Key와 API Gateway 주소를 숨기는 것이 불가능하다는 문제가 있었습니다.

깃허브 페이지는 웹에 배포되는 형태이기 때문에 API Key, 보안 키 등을 깃허브 리포지토리에 업로드하면 안 됩니다.

리포지토리에 있는 키는 누구나 열람하고 다운로드할 수 있기 때문에 악용될 위험이 있습니다.

AWS Lambda를 통해 OpenWeather API의 Key를 서버 측에서 숨기고 깃허브 페이지에서 데이터를 사용하려 했지만, API Key를 숨기더라도 Lambda와 연결된 API Gateway 주소를 호출해야 했습니다.

그런데 API Gateway의 주소도 프론트엔드에서 보이지 않게 숨겨야만 합니다. 이를 공개하면 무차별적인 요청이 들어올 수 있어 관리 부담이 커집니다.

 

결론적으로, API Key와 API Gateway 주소는 모두 프론트엔드에 노출되지 않아야 합니다. 깃허브 페이지만으로는 이 문제를 해결할 수 없었습니다. API 키와 로직을 숨기려면 프론트엔드에서는 요청만 보내고, 처리 로직은 서버에서 구현해야만 외부에 키와 로직이 노출되지 않습니다.

 

서버리스 아키텍처로 Lambda를 선택했어도, 실제로 서버는 필요하며, 서버리스 아키텍처는 서버 관리의 부담을 줄여주지만, 서버가 없는 환경은 아니라는 점을 이해해야 합니다. 핵심은 클라우드 제공자가 서버 인프라를 자동으로 관리하고 설정하여 개발자가 코드 작성에 집중할 수 있게 한다는 것입니다.

# 결론:

1. GitHub Pages만으로는 API Key를 숨길 수 없습니다, 서버 없이 리소스를 누구나 확인할 수 있기 때문입니다.
2. GitHub Pages만으로는 API 요청을 안전하게 처리하는 것이 불가능합니다.
3. 서버리스 아키텍처는 EC2와 같은 서버 배포 환경에서 충분히 활용할 수 있으며, 서버와 병행하여 사용하면 자원 관리 부담을 줄이고 개발자가 코드 작성에 집중할 수 있습니다.