Netlify 배포과정
Netlify에 접속해 로그인 후 화면 우측의 Add new site를 클릭하여 깃허브에 연동한다. 레퍼지토리를 검색하여 배포할 레퍼지토리를 선택한다.
이후 Build settings 단계에서 Build command와 Publish directory를 정확히 입력해줘야 배포시 에러가 발생하지 않는다.
npm을 사용하면 CI = npm run build
yarn을 사용하면 CI= yarn build를 입력해준다.
Build command는 package.json 에서 확인하고 Publish directory는 빌드시 생성되는 dist 폴더의 경로를 입력해준다.
마지막으로 설정한 환경변수가 있다면 .env파일에 선언한 값을 입력한 뒤 Deploy를 눌러 배포를 시작한다.
나의 경우에는 kakao Map API를 사용했기 때문에 해당 key값을 입력해주었다.
Netlify 배포시 설정파일
위 과정으로 배포하기 전에 필수적으로 설정해야 할 파일 두가지가 있다.
프로젝트 경로에 해당 파일들을 따로 설정하지 않는다면 배포가 성공하더라도 다음과 같은 에러페이지를 보게된다.
Netlify 404Error 지원 가이드
위 지원가이드에 따르면 프로젝트 경로에 netlify.toml과 _redirects 파일을 생성하여 설정해줘야 하는데
netlify.toml은 배포관련 설정을 정의하는 파일로 기본적으로는 다음과 같이 설정하며 public폴더 내부에 위치하도록 한다.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
_redirects 파일은 리디렉션 규칙을 정의하는 파일로 싱글 페이지 애플리케이션(SPA)의 경우 모든 경로를 index.html로 리디렉션하여 클라이언트 측 라우팅을 지원해야 한다.
다음과 같이 index.html파일과 동일 경로에 위치하도록 한다.
/* /index.html 200
파일 설정 후 다시 배포를 시도하면 정상적으로 배포가 완료되는 것을 확인 할 수가 있다.
마지막으로 kakao developers에서 플랫폼 사이트 도메인을 Netlify로 배포한 도메인으로 추가해줘야 kakao Map API가 정상적으로 동작하게 된다.
