react로 소셜 로그인을 구현했는데 배포를 하고 나서 내 컴퓨터가 아닌 다른 컴퓨터 또는 핸드폰으로는 로그인 후 다음 화면으로 넘어가지 않는다.
내 컴퓨터로만 작업을 하다 보니 그런 문제가 있는지도 몰랐었다.
왜 다른 컴퓨터나 핸드폰에선 로그인이 정상적으로 작동되지 않는 걸까 ...
또 배포 후 다른 문제점은 url 주소창에서 url을 직접 작성해 라우터 이동을 하게 되면 페이지를 찾을 수 없다고 한다.
이 두 가지 문제를 해결하고 부족한 부분을 보안해야겠다.
Page Not Found on Netlify with React Router
링크나 버튼을 이용했을 때 라우터 이동 시 문제가 없지만 url 주소창에 직접 url을 작성해 라우터를 이동하거나 엔터만 쳐서 리다이렉트만 시켜도 아래와 같이 Page Not Found가 된다.
React는 싱글 페이지 응용 프로그램으로 모든 웹 페이지가 동일한 위치 ( index.html)에서 제공된다. 서버에서 프런트(예:ejs, pug)를 제공하는 경우 각 페이지마다 별도의 파일이 렌더 되지만 React의 경우 경로가 작동하게 하려면_redirects를 만들어야 한다.
_redirects파일은 요청하는 주소 또는 경로를 기반으로 클라이언트를 리디렉션 할 위치를 Netlify에 알려주는 파일로 React 라우터는 모든 라우팅을 처리하므로 Netlify가 모든 요청을 index.html로 리디렉션하도록해야한다 .
(출처)
public폴더에_redirects파일을 만든 뒤 아래와 같이 모든 리다이렉션에 200을 줄 수 있도록 아래와 같이 작성 후 모든 다시 배포를 하니 해결되었다./* /index.html 200
https와 SSL인증
SSL 인증서는 클라이언트가 접속한 서버가 신뢰할 수 있는 서버임을 보장하고, SSL 통신에 사용할 공개키를 클라이언트에 제공한다.
악수 -> 전송 -> 세션종료
Handshake(악수)
실제 데이터를 주고받기 전에 클라이언트와 서버는 일종의 Handshake(인사)를 한다. 이 과정을 통해서 서로 상대방이 존재하는지, 믿을만한지, 또 상대방과 데이터를 주고받기 위해서는 어떤 방법을 사용해야 하는지를 파악한다.
SSL 방식을 이용해서 통신을 하는 브라우저와 서버는 핸드 셰이크를 하는데, 이때 SSL 인증서를 주고받는다.세션(전송)
실제로 서버와 클라이언트가 데이터를 주고받는 단계이다. 이 단계에서 핵심은 정보를 상대방에게 전송하기 전에
session key값을 이용해서 대칭키 방식으로 암호화한다는 점이다. 암호화된 정보는 상대방에게 전송될 것이고, 상대방도 세션키 값을 알고 있기 때문에 암호를 복호화 할 수 있다. 서로 암호를 복호화 한 후 데이터를 전송한다.세션 종료
데이터의 전송이 끝나면 SSL 통신이 끝났음을 서로에게 알려준다. 이때 통신에서 사용한 대칭키인 세션 카를 폐기한다.
(출처-생활코딩)netlify로 클라이언트를 배포하면 기본적으로 https로 배포되기 때문에 SSL 인증서가 제공된다. 이후 aws에서 https를 설정하면서 SSL 인증서를 다시 제공받았고 이전 SSL 인증서와 이후 제공받은 SSL 인증서가 다르다.
클라이언트와 서버가 서로 Handshake(악수)를 할 때 SSL 인증서를 통해서 신뢰할 수 있음을 판단하는데 이때 클라이언트가 와 서버의 Handshake(악수)에서 문제가 생겼던 것이다.
도메인 DNS 관리에 들어가 CNAME을 aws 인증받은 서버 환경 url을 설정한다. 그리고 netlify에 환경 변수의 url도 CNAME에 설정한 url로 변경해 주고 다시 배포하니 해결되었다.
