CloudFront와 OAuth 인증이 필요한 ElasticBeanstalk 연동

ElasticBeanstalk에서 만든 웹 앱 환경(Devise+omniauth 포함)을 ELB에서 받는 것이 아니라 일단 CloudFront에서 받기 위해 어떤 사고에 고생했는지 기사입니다.

웹 애플리케이션 환경

rails

인증계에는 Devise를 이용

Google 계정과 연결 (중요)

쿠키 사용 (중요)

ElasticBeanstalk를 사용하고 있습니다

특정 경로에 대한 액세스는 API 게이트웨이로 흐릅니다

고생한 점 1: CloudFront와 ELB의 증명서의 차이

SSL Certificate는 *.yasai.com로 설정되어 있다고 가정합니다.



Create Origin으로 웹 앱 환경으로 설정합니다.

실수

여기서 사용되고 있는 ELB가 선택사항 나타난다고 해서 그대로 선택해서는 안됩니다.

왜냐하면 CloudFront -> ELB에서 참조하는 것은 hogehoge.ap-southeast-1.elb.amazonaws.com이므로 전혀 도메인이 맞지 않습니다.

정답

여기는 제대로 Route53에서 ELB의 엔드포인트에 대해, tomato.yasai.com 의 이름으로 받아들여, 아래와 같이 설정해야 합니다.

고생한 점 2: Google에 OAuth 실패, 사용자가 전혀 로그인할 수 없다

결론을 보면, CloudFront의 캐시는 제대로 하자는 것입니다.

왜 사용자가 로그인하지 못했습니까?

CloudFront는 쿠키 정보를 웹 앱으로 보내지 않았습니다.

Google OAuth 인증 실패

여기는 자세히 조사되지 않았지만 callback에서 웹 앱으로 돌아올 때 실패가 발생했습니다. query나 Header등의 캐쉬가 원인이라고 보고 있습니다만 단정은 할 수 없습니다.

그러므로 어떤 header, query, 쿠키라면 웹 앱에 보내는지, 무엇을 캐시해야 하는지 적절하게 설정합시다.
나는 이번에 CloudFront의 역할은 캐시가 아니었기 때문에, 조금씩 설정하는 것은 과연 너무 귀찮아서 거의 캐시시키지 않게 했습니다.

힘든 점 3 : API Gateway와 CloudFront와의 연계는 조심해야합니다.

이것은 앞서 언급한 웹 앱에 쿠키 정보나 header 정보를 보내고 있었지만, API Gateway에 대해서는 아무것도 보내지 말아야 합니다.

이 기사 에 있는 것처럼, Host 정보를 CloudFront로부터 API Gateway에 보내고 있어 정상적인 동작을 하지 않았습니다.