Arcane 프로젝트 - netlify.toml

Arcane프로젝트 - netlify.toml

프로젝트 배포시에 서버는 AWS, 클라이언트는 netlify를 통해 배포했는데, 어려울 것만 같던 AWS배포는 오히려 생각보다 간단했고, 간단할 줄 알았던 netlify배포가 엄청나게 애를 먹였습니다.

원인은 proxy에 있었습니다. 기존에 localhost 에서 작업할 땐, cors오류를 해결하기 위해 proxy-middle-ware를 통해

// setupproxy.js
const  {  createProxyMiddleware  }  =  require("http-proxy-middleware");

module.exports  =  (app)  =>  {
    app.use(
        "/api/summoners",
        createProxyMiddleware({
        //도메인 api로 호출
        target:  "http://localhost:서버포트번호",  //통신할 서버의 도메인주소
        changeOrigin:  true,
    })
);
    app.use(
        "/auth",
        createProxyMiddleware({
        //도메인 api로 호출
        target:  "http://localhost:서버포트번호",  //통신할 서버의 도메인주소
        changeOrigin:  true,
    })
);

이런식으로 클라이언트가 요청할 도메인이 올바르게 도착해야할 서버의 도메인주소로 갈 수 있도록 proxy 라이브러리를 통해서 설정해놨습니다. netlify를 통해 배포할땐 저 타겟 url만 서버의 url로 바꿔주었죠.
그런데, 아무리 해도 클라이언트에서 서버로 보내는 요청이 404를 반환하는겁니다. 아예 서버로 요청이 가지 않는거죠.
그러다가 netlify.toml이라는 것을 사람들이 사용하는 것을 보고 똑같이 해봤습니다.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

다들 이렇게 사용하더라구요. 근데 다른 사용방법은 찾아봐도 안나오고, 다들 딱 저렇게만 사용하고 사용하는 이유에 대해서도 다 같은 말만 써있어서 헤매던 와중이었습니다.
그러다가 문득 redirects의 형태가 proxy 라이브러리의 사용법과 비슷해보여서 netlify.toml에 다음과 같이 추가했습니다.

  [[redirects]]
  from = "/auth/*"
  to = "http://aws배포IP주소/auth/:splat"
  status = 200
  force = true

  [[redirects]]
  from = "/api/summoners/*"
  to = "http://aws배포IP주소/api/summoners/:splat"
  status = 200
  force = true

...

/:splat은 /*처럼 어떤것이 오든 다 받으라는 의미입니다.
이렇게 하니까, 클라이언트에서 서버로 요청이 갔습니다.
왜 proxy가 마치 작동하지 않는것처럼 따로 redirects를 해줘야하는지 이유는 밝혀내지 못했습니다.
알고있기론, proxy라는거 자체가 redirects의 역할을 하는 것으로 알고있었는데, 로컬에서 작업하다 netlify 배포환경에서 작업을 하려면, 바꿔줄 환경변수라던가 node package 설정이 더 있었던 것인지는 모르겠습니다.
어쨌든, netlify 배포환경에서 다른 배포서버 url로 요청을 보내고 싶다면, netlify.toml이라는 파일에 redirects를 정의해줘야 하는것으로 결론냈습니다.