Home https와 SSL인증 (다른 컴퓨터에서 로그인이 되지 않을 때)& Page Not Found on Netlify with React Router
Post
Cancel

https와 SSL인증 (다른 컴퓨터에서 로그인이 되지 않을 때)& Page Not Found on Netlify with React Router

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을 줄 수 있도록 아래와 같이 작성 후 모든 다시 배포를 하니 해결되었다.

1
/*    /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로 변경해 주고 다시 배포하니 해결되었다.

This post is licensed under CC BY 4.0 by the author.

프론트엔드(netlify) 백엔드(AWS Elastic Beanstalk) 배포

http CORS (Cross Origin Resource Sharing)