날짜별로 회고록을 적는 분을 보고 적고 싶어져서 지금부터라도 적게 되었다.
오늘은 nginx 설정을 하고 테스트를 해봤다.
예전 졸업프로젝트때에는 스프링서버, flask서버, 프론트서버 이렇게 ec2 인스턴스를 3개 썼었다.
하지만 이번 프로젝트에서는 1개만 사용하고 있다.
따라서 /api로 시작하는 요청이 들어오는 경우 모두 백엔드 포트로 보내고
나머지는 모두 프론트엔드 포트로 보내기로 했다.
설정은 어렵진 않지만 삽질을 조금 했다.
/api로 오는 요청은 백엔드로 보내기로 했는데
예를들어 https://도메인/api/test로 외부에서 요청하면 http://localhost:8080/api/test로 보낸다. http://localhost:8080/test로 보내는게 아니다.
이걸 테스트하고싶어서 백엔드 팀원이 백엔드 도커를 여러번 빌드 해줬다.
다음 프로젝트때는 꼭 젠킨스를 사용해야겠다.
하지만 이렇게 하면 oauth라이브러리가 정해주는 주소 형식과 달라져서
https://도메인/api/test를 http://localhost:8080/test로 보내게 만들고 싶었다.
rewrite ^/api(/.*)$ $1 break;이 한줄을 적어주면 해결되었다.
rewrite는 Nginx에서 URL을 재작성하기 위해 사용되는 지시어이다.
^/api(/.*)$는 정규 표현식 패턴으로, URI 경로가 "/api/"로 시작하고 그 뒤에 어떠한 문자열이 와도 매치된다.
괄호는 캡처 그룹을 나타낸다.
$1은 정규 표현식에서 첫 번째 캡처 그룹에 해당하는 부분이다. 즉, "/api/" 다음에 오는 부분을 나타낸다.
break는 리다이렉션을 중단하고 해당 경로로 요청을 전달하는 지시어이다.
따라서 "/api/"로 시작하는 URI에 대한 요청에서 "/api/" 부분을 제외하고 나머지 부분을 그대로 사용하여 재작성한다.
예를 들어, "/api/resource"의 경우 "/resource"로 재작성된다.
Nginx 설정
location /api {
rewrite ^/api(/.*)$ $1 break;
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
proxy_pass http://localhost:5173;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
그 후에는...
typescript의 타입 에러를 해결하고 통일성을 위해서 class형 react component를 함수형으로 바꿨다.
React와 Typescript를 사용해서 web을 만들고 있는데
다른 프론트 팀원들은 react와 typescript가 처음이라 type에러를 해결하기 어려워했다.
그리고 class형 컴포넌트가 생겨있었다.
어디선가 데려온 코드 같았다
class형 컴포넌트를 써본적이 없긴했지만 천천히 읽어보니 어느정도 파악할 수 있었다.
통일성을 위해서 함수형 컴포넌트로 바꿔줬다.
나도 타입스크립트를 많이 써보지는 않아서 아직 잘 모르겠는 부분도 있었다
예를 들면
fruit의 type이 'apple'|'banana' 이런식일때 {fruit:'apple'}이렇게 적으면 fruit의 type를 string으로 추론해서 타입에러를 일으키켰다.
하지만 {fruit:'apple' as 'apple'}와 같은 형식으로 적으면 type error가 발생하지 않았다.
이건 뭔가 아닌 것 같았다. 좀더 깔끔하게 타입 에러를 해결할 수 있는 방법을 찾아봐야겠다.
