헤로쿠 백엔드, Netlify 프론트엔드 배포

1. 백엔드

헤로쿠에 백엔드를 배포할 경우 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해 라이브러리를 설치해야 합니다. Koa로 작업할 경우 'koa2-cors' 를 설치해주면 됩니다.

그리고 라우팅 설정 부분에서 아래의 구문을 추가해줍니다.

import cors from 'koa2-cors';

app.use(cors());

 

2. 프론트엔드

Github의 소스를 자동으로 배포해주는 Netlify의 경우에도 일부 수정할 부분이 필요합니다. Local에서 작업할 경우에는 같은 localhost에서 데이터를 주고 받아서 몰랐었는데, 이제 헤로쿠의 백엔드 데이터를 받아와야 하기 때문에 조금 달라져야 합니다. 그래서 필요한 것이 _redirects파일 입니다. /public 폴더에 _redirects라는 이름의 파일을 생성한 후 아래와 같이 작성해줍니다. 

/*  /index.html 200
/api/* https://헤로쿠앱이름.herokuapp.com/api/:splat  200

프론트엔드 화면에서 버튼이나 페이지 이동에 의해 서버 요청이 발생할 경우, url에 해당하는 경로를 적고, 그에 대응하는 실제 주소를 적어주면 됩니다. 뒤의 :splat은 *과 동일한 의미라고 합니다. 그리고 뒤의 숫자 200은 아직 잘 모르겠습니다. 정상 접속을 의미하는 200이라면 굳이 붙여야 하는지도 잘 모르겠고... 다른 숫자를 붙일 수도 있는데, 301은 url을 영구적으로 옮겼을 때 사용하고, 검색엔진 최적화에 좋다고 합니다. 302 일시적으로 옮겼을 때 사용한다고 합니다.

 

~끝~