서버 배포와 쿠키 문제

서버 배포

문제 1: 환경변수

ec2에 서버를 배포한 뒤 문제가 발생했다. 먼저 .env파일이 깃 레포지토리에 없었다. supabase를 이용하기 위해서는 제공받은 access_key를 사용해야하는데 로컬 개발 시에 .env파일을 이용해 관리를 하였지만, .gitignore에 보통 .env파일을 포함시키기 때문에 (중요한 키를 저장하고 있는 환경변수를 다루는 파일은 절대로 원격 레포지토리에 올리면 안된다.) ec2에서 내 투두 리스트 서버 레포지토리를 클론해와서 실행하면 해당 키 값을 가져오지 못하는 것이다.

문제 1: 해결

이는 vim .env를 통해 파일을 생성하고 환경변수를 넣어주는 것으로 해결했다. 사실 .env파일을 이렇게 ec2 내에서 직접 만들어서 사용해도 괜찮은 가 모르겠는데 뭐 지금은 이것말고는 방법이 없으니…

$vim .env # .env파일 생성 (이미 존재하면 해당 파일로 진입)

esc #명령 모드로 전환

---명령모드---
i ##입력모드로 전환
:q ## 종료한다
:q!	##저장하지 않고 강제로 종료
:wq	##저장하고 종료한다.

i를 눌러 입력 모드로 전환한다.
환경변수를 입력한다.
:wq를 입력해서 저장하고 종료한다.

이러면 로컬 개발 당시와 같이 .env파일이 생성된다.

문제 2 : 포트

다음은 서버 포트를 8000이 아닌 80으로 설정한다. 서버 코드에서 포트를 process.env.PORT로 접근해서 열고 있기 때문에 .env에서 PORT에 대한 환경변수를 80으로 저장하면 된다.

그 후 서버가 잘 동작하는 것을 확인했지만, 클라이언트에서 서버 요청이 제대로 가지 않았다. 이는 클라이언트에서 요청하는 주소를 설정하지 않았기 때문이었고(그냥 localhost:8000으로 연결되어 있었다.),.env파일을 통해 서버 주소를 넣었다. 여기서 .env는 클라이언트에 있는 파일이다. 이,때 클라이언트를 CRA로 만들었기 때문에 환경변수 이름의 prefix는 REACT_APP이다.

문제 3: 로그인 불가

다음으로 서버 요청이 가는 것은 확인했지만, 로그인이 되지 않는 문제가 생겼다. 나는 로그인을 단순히 쿠키를 이용해서 구현했는데, 이렇게 하니까 ec2에 올린 서버 코드에서 쿠키 옵션의 도메인을 어떻게 설정할 지 알지 못해서 그런 것이었다. 당시 도메인이 localhost로 되어 있었고, 이를 서버 주소로 바꾸었다.

하지만 또 다른 문제는 클라이언트와 서버의 도메인이 다르기 때문에 http 요청에서 쿠키가 전달되지 않는다는 것이었다. 로그인은 성공하지만, 유저 정보를 가져오는 방식에서 리다이렉트를 하는데 여기서 쿠키를 받지 못하는 것이다. 즉, 브라우저에 쿠키가 있더라도 서버에 그 쿠키가 담겨서 요청이 전달되지 않았다.

많은 삽질을 했는데, 먼저 samesite를 lax와 none으로 두었다. 하지만 none의 경우 https 스키마에서 통신이 되어야하는데 ec2 서버는 http로 열리기 때문에 실패했다. lax의 경우는 될 줄 알았지만, 클라이언트의 도메인이 달라서 되지 않는다고 한다. 그래서 방법을 챗 gpt에게 물어보니 프록시를 이용하라고 하기에 react에서 http-proxy-middleware 를 이용해서 프록시 서버를 통해 요청을 하니 성공했다.

위 코드는 리액트에서 프록시서버를 설정한 것이다. (setupProxy.js 파일을 src폴더 내에 생성해서 만든다.)

참고

dotenv 추가하기 : https://vixxcode.tistory.com/70