20221210 TIL 좌충우돌 배포하기
어제부터 배포를 하고 있었는데, 해결되지 않은 문제가 꽤 많았고, (SPA를 github pages에 배포하기, CORS에러 해결하기, 등등)
그 어느 것도 해결된 것이 없이 시간이 흐르고 있어서 여러 가지를 동시에 진행하며 조금씩 조금씩 나아가고 있었는데,
여러 번의 실패 실패 실패 후에 결국 오늘 정오 쯤에 SPA 리액트 앱 github pages에 배포를 성공했다!
SPA는 기존에 정적인 페이지들을 github pages로 배포했던 것과 달리 라우팅 관련 처리를 해줘야 했다.
CRA를 사용해서 배포한 후기가 많았는데, 나는 parcel을 쓰고 있기 때문에 적용할 수 없었고,
CRA없이 만든 SPA github pages 배포 관련 문서를 찾기가 힘들었는데,
https://github.com/rafgraph/spa-github-pages
를 통해 많은 해결법을 얻을 수 있었다.
그리고 main브랜치를 github pages에 띄웠기 때문에 PR을 머지해서 배포를 하는 방식을 이용하다가
배포가 잘되지 않아 수정을 잦게 했는데, 이 과정에서 무의미한 PR이 늘어나서
PR을 머지하지 않고 github pages배포를 하는 방법을 검색을 해서 gh-pages를 이용하는 방법을 찾았다.
그 후에 gh-pages로 실험을 많이 해보면서 조금씩 조금씩 에러를 수정해나갔고, 배포에 성공하였다.
그리고 fly에 서버를 배포한 이후로 POST요청에서만 유독 CORS에러
(No 'Access-Control-Allow-Origin' header is present on the requested resource.)가 발생해서
spring CORS에러 해결하는 방법을 찾아보다가 @CrossOrigin도 적용되지 않았고, exposedHeaders추가 해결이 되지 않았고,
그 어떤 방법으로도 해결되지 않아서 좌충우돌하고 있던 중에
개발자도구의 network탭에서 응답 헤더를 봤는데
fly를 거쳐서 들어오는 과정에서 fly가 CORS관련 헤더를 잡아주지 않아서 생기는 문제 같았다.
그래서 헤더를 추가하는 방법을 찾아보았고,
https://community.fly.io/t/new-feature-basic-http-response-header-modification/3594
를 보고 fly.toml에 아래 코드처럼 http_options를 추가했다.
[[services.ports]]
force_https = true
handlers = ["http"]
port = 80
http_options = { response = { headers = { access-control-allow-origin = "*", to-remove = false } } }
그 후 정상적으로 헤더를 받을 수 있었고, CORS에러가 드디어 약 24시간만에 해결되었다.
(물론 * 보다는 정확히 origin을 명시해주는 것이 더 좋다)
서버는 fly로, 클라이언트는 깃헙페이지로 배포를 완료하였다!
원래는 배포를 하고, 작은 버그들을 수정을 하고자 했는데
앞으로 진행할 포트폴리오 기획을 내일까지 해야하기 때문에 더 이상 시간을 쓸 수는 없어서
아쉽지만 배포를 정상적으로 한 것에서 만족해야할 것 같다.
그래도 가장 큰 목표였던 배포를 완료할 수 있어서 매우매우 기뻤다!
가장 아쉬운 부분은 서버 응답 속도이다.
포트폴리오를 만들 때는 서버 응답이 느릴 수 있다는 점을 고려하고 API를 매우 잦게 보내지 않도록 주의해야겠다.
그리고 아마 무료로 쓰고 있는데 메모리를 너무 많이 차지하는 것 때문으로 짐작하고 있는데,
몇 시간을 투자했음에도 어디가 문제인지 전혀 감을 아직 못 잡았지만
포트폴리오를 배포할 때는 서버 응답이 너무~너무~ 느린 점을 꼭 해결하고 싶다.
어떤 문제든 해결되지 않는 동안은 끝이 없는 터널을 걷는 기분인 것 같다.
그래도 그 시간들이 전혀 헛된 것이 아니고, 조금씩 경험치가 쌓여서 결국 해결할 수 있게 되는 것 같다.
앞으로 포트폴리오를 만들면서 구글링을해도 해결방법이 잘 나오지 않는 문제들을 많이 만날텐데
해결이 잘 되지 않는 문제를 만났을 때 어떻게 접근을 하고 어떻게 해결을 했는지 과정을 글로 꼭 남기도록 해보자.