TYM - vercel배포 후 라우팅, CORS에러 해결

서비스 배포 완료: https://track-your-music.vercel.app/ (현재 닫아둔 상태입니다.)

TYM 서버를 fly.io로 배포에 성공했다.(블로그 글 보기)

이제 vercel로 배포했던 프론트에 백엔드 배포주소를 연결하여 다른 사람도 쓸 수 있도록 만들 차례다.

처음에 접속하면 뜨는 이 페이지에서 Login 버튼을 클릭하면 api를 요청하면서 /loading 페이지로 이동한다.

그런데 vercel로 배포한 주소에서 이동하니, 404 not found 페이지가 떴다.

'vercel route 404', 'vercel 라우팅 404' 키워드로 구글링을 해보니,
.com/loading 같은 하위 url로 접근 시 vercel에서는 SPA의 라우팅 처리가 아닌 해당 리소스를 찾는다.(참고 블로그) 이럴 때는 vercel.json에 routes 설정을 해주면 된다.

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

이 문제를 해결했더니, 이젠 api 요청 시 400 에러가 떴다.

로컬에서 백엔드 배포 주소로 api 요청을 하면 200 코드가 뜨고 데이터도 잘 받아오는데, vercel로 배포한 프론트 서버에서는 백엔드 배포 주소로 api 요청 시 400에러가 났다.

에러 코드를 검색해 보고, 원티드 인턴십 프로그램에서 proxy 설정을 했던 것을 다시 보면서 프론트 package.json에서 proxy 설정을 하고, 백엔드에서도 http-proxy-middleware 라이브러리를 설치해서 setupProxy.js 파일에서 proxy 설정을 해줬는데, 계속 400 에러가 떴다.

백엔드에서는 애초에 cors 패키지를 쓰고 있기도 했고, proxy 설정을 해줬는데도 400에러만 떠서 어떻게 해결해야 할지 잘 감이 안 왔다.

일주일에 한 번 같이 모여 공부하는 프론트엔드 스터디 모임에 디버깅 질문을 올렸고, 스터디 팀원분이 cors에러를 만나면 설정했던 cors 패키지 사용 방법 그리고 React + Express CORS 설정을 다룬 블로그 글을 공유해 주셨다.

그래서 원래 작성해 뒀던 proxy 설정 코드들을 프론트랑 백에서 모두 롤백하고, 백엔드 코드에서 cors 패키지를 모든 설정 허용으로 해뒀는데 로컬 주소랑 배포한 프론트 주소를 작성했다.

app.use(cors()); // 수정 전

app.use(
  cors({
    origin: ['http://127.0.0.1:5173', 'https://track-your-music.vercel.app/'],
  })
);

이렇게 수정했더니 진짜로 CORS에러가 났다.

그냥 아무 말 없이 나던 400에러 말고 드디어 찐 CORS 에러가 났다. 이젠 진짜 뭐 좀 해볼 수 있을 것 같은 느낌이 든다...

그러다가 다시 400 에러가 남.🤷🏻‍♀️

결국 프론트 스터디 모임에 디버깅 헬프 요청을 했다.

그렇게 토요일 2시부터 3시 50분까지 열심히 코드를 고치고 또 고치고 배포하고 재배포하여 결국 vercel로 배포한 프론트앱에서 배포한 백엔드 주소로 api 요청 & 데이터 받아오기를 성공했다.

너무나 감격스러웠던 순간...🥺

해결하기까지 마주한 문제들을 하나씩 정리해 보자.

1. 400 에러가 남.
2. 백엔드 문제가 아닐까 했는데, 로컬에서는 백엔드 api 요청하면 데이터도 잘 받아옴
3. /loading으로 사용하고 있었던 백엔드 endpoint.
4. env 파일 값을 읽어오지 못하나?
5. 요청하는 주소에 중복된 슬래시(/).

디버깅 시작은 첫 번째, 400에러 잡기였다.

// 이렇게 작성했던 CORS 패키지를 주석 처리하고
app.use(
  cors({
    origin: ['http://127.0.0.1:5173', 'https://track-your-music.vercel.app'],
  })
);

// 이렇게 작성해서 다시 재배포했다.
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('Origin'));
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});

그랬더니 잘되던 로컬에서도 400 에러가 나서 다시 원래대로 롤백.
그럼, 일단 CORS 문제는 아닐거라고 판단 후 두 번째 문제로 넘어갔다.

두 번째, 백엔드 문제가 아닐까 의심 지우기

일단 나는 백엔드 문제는 아닐 거로 생각했는데, 그 이유는 로컬에서 백으로 요청이 문제없었기 때문이다. access_token 교환도 잘하고 데이터도 받아와서 보여줬기 때문에.

그래도 혹시나 문제가 있나 싶어서 test 용 endpoint를 파서 postman으로 응답 상태 코드를 확인해 봤다.

app.post('/test', function (req, res) {
  let test = req.body.test;
  res.json({ result: test });
});

200 코드가 떠서 백엔드 문제는 아니라고 확신하고 세 번째 문제로 넘어갔다.

세 번째, 백엔드 endpoint주소를 /loading에서 다른 걸로 변경

endpoint를 loading으로 쓰고 있었는데, 디버깅 도와주셨던 스터디원분이 혹시 백엔드 라우터 주소가 문제가 아닐까요 하시며 주소를 바꿔보자고 하셨다.
왜냐면, 두 번째 문제를 해결할 때 테스트용으로 작성했던 /test endpoint는 상태코드도 200으로 뜨고 문제없었기 때문에. 그래서 처음에는 load로 고쳤다가 아예 상관없게 gettoken으로 수정했다.
이때부터였을까, 에러 코드가 500으로 뜨기 시작했다. 그래서 다음 문제로 넘어갈 수 있게 되었음!
같이 디버깅 도와주셨던 스터디원분이 코드를 가지고 직접 배포해 주는 서비스에서는 중복된 라우터가 있을 수도 있다.라고 하셨다. 그래서 에러가 난 거였을까, 이 사실을 알고 좀 마음이 착잡해졌음(...ㅋㅋㅋ)

네 번째, env 파일 값을 읽어오지 못하는가?

세 번째에서 문제를 해결하고 500에러를 봤을 때, 서버 코드에서 쓰고 있는 스포티파이 모듈 안에서 처리가 될 때, 일어나는 문제 같다고 스터디원분이 말씀해 주셨다. 서버 코드에서 clientId와, clientSecret, redirectUri를 env파일에 작성해 두고 process.env.~이렇게 가져와서 쓰고 있었는데, env파일을 못 읽는 것 같다고.

// 이렇게 쓰고 있었는데
const spotifyApi = new SpotifyWebApi({
    redirectUri: process.env.REDIRECT_URI,
    clientId: process.env.CLIENT_ID,
    clientSecret: process.env.CLIENT_SECRET,
  });

그래서 env에 적어뒀던 정보들을 일단 하드코딩하고, 다시 재배포해서 진짜 env파일을 못 읽는 게 맞는지 확인해 보기로.

!!! 진짜 env파일을 못 읽는 게 맞았다. 400, 500에러 코드가 뜨던 게 드디어 200코드가 뜨면서 데이터를 받아왔다!.

근데 갑자기 can't read undefined라면서 프론트에서 에러가 났다.
발급받은 토큰으로 스포티파이로 요청하고 있는 게 3개가 있는데, 그중 2개에서 에러가 났다. 뭐 다 에러가 나면 또 서버에서 뭐가 잘못됐나 할 텐데 하나는 잘 받아오는데 나머지 2개가 에러가 나서 뭐지 싶었다. 그렇게 다섯 번째 문제 해결로 넘어감!

다섯 번째, 요청하는 주소에 중복된 슬래시(/)🙃

이건 내가 vercel에 env 설정 작성할 때 잘못 써서 난 에러였다.
아주 간단하게 vercel setting으로 가서 env 수정하고 다시 재배포했다.
근데 네 번째에서 200코드로 뜨면서부터 신나서 vercel에서 env 수정하면 재배포해야하는 거 까먹고 다시 했다가 바뀐 게 없어서 엥? 하고, 재배포해야 하는 거 깨닫고 재배포하려는데 어떻게 했더라? 하면서 갑자기 막 기억이 안 나기 시작했다.ㅋㅋ 다행히 전에도 같은 상황이 있어서 정리해 뒀던 내 블로그 글보고 무사히 재배포 했다.

그리고 마지막으로 다시 시도했더니, 진짜로 성공했다..!

하드코딩했던 값들도 다시 process.env.~로 수정해서 다시 확인 완료했다. 잘된다.👍🏻

이제 레포에 배포 주소도 넣고 README도 수정해야겠다!

다음 미션은요... 🚀

<앞으로 계속 수정해나가야 할 것들>

• 유저가 지정한 프로필 이미지가 없는 경우, 기본 이미지를 띄우기
• access_token이 만료되었을 때, 다시 로그인이 필요하다는 팝업을 띄워서 로그인 페이지로 리다이렉트시키기

<리팩토링이 필요한 부분>

• 버튼을 클릭해 아티스트, 트랙, 기간 별 정보 값 다르게 주는 로직 최적화