Netlify 삽질기

Netlify

Netilfy는 static site를 배포하기에 최적화 되어 있는 서비스이다. github과 같은 git repository와 연결시켜 놓으면 별도의 작업 없이 git push로 code를 저장하는 것만으로 site가 업데이트 된다.

private repo에서도 서비스가 가능하다는 점, build 결과를 관리할 필요가 없다는 점이 github-page에서 보다 유리하다.

하지만 Netlify 역시 세세한 설정이 있으니, 여기에 그 삽질의 경과를 기록해 둔다.

Page Reload 때 “Page Not Found” 문제

Vue project를 Netilfy로 배포한 뒤에 페이지를 reload 하면 “Page Not Found”라는 메시지가 나타날 수 있다. Vue Router에서 HTML5 history mode를 적용했을 때이다. history mode는 주소에 #이 생기지 않지만 이런 문제가 생겨난다. 문제의 원인은 Vue Router/HTML5 History Mode를 보라.

위 글에 해결 방법이 나와 있는데, 궁극적으로는 서버 설정을 바꾸어 주라는 것이다.

Netlify를 이용한다면 어떻게 해야 할까. 서비스를 하고 있는 Netlify 설정을 바꾸어 주어야 한다. 해결 방법은 여기와 Netlify Doc를 보라.

요약하면 해당 Netlify instance의 서버 설정을 변경시켜 주어야 한다. 이를 위해 project root folder에 netlify.toml를 만들어 아래 내용을 넣어준다. 이를 통해 서버 설정을 할 수 있다.

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

이때 Vue Router에도 page not found로 넘겨주는 route를 아래와 같이 만들어 주어야 한다.

// src/router/index.js
  {
    path: '/404',
    name: 'NotFound',
    component: NotFound
  },
  {
    path: '*',
    redirect: to => { return {'name': 'NotFound'} }
  }

데이터 파일의 전송

때때로 많은 데이터를 전송하여 front-end에서 처리해야 하는 경우가 있을 수 있다. 데이터를 Vue project의 public folder에 넣으면 Netlify에서 직접 배포할 수 있다. 그러나 파일 크기가 1MB 이상이라면 페이지 로딩이 잘 되지 않을 정도로 전송 속도 문제가 생겨난다. 아마도 무료 plan의 경우 전송 속도 제한이 있는 듯하다. 이런 경우에는 덩치가 큰 파일은 별도의 CDN server를 이용하는 편이 좋다.

하지만 External CDN을 사용할 때 front-end의 주소와 cdn의 주소가 달라 CORS의 문제로 데이터를 받아오지 못하는 경우가 빈번히 발생한다. External CDN server를 내가 직접 운영하는 경우에는 server 설정 변경을 통해 해결할 수 있지만, 그렇지 않은 경우에는 방법이 없다. 예전에도 CORS issue로 골머리 앓았던 적이 있다.

가장 간단한 방법은 원하는 파일을 github에 넣고 githack 서비스를 이용해 우회하여 접근하는 방법이다. 물론 이런 경우에 해당 github repo는 public으로 공개해 놓아야 한다.

... ... ... ...
Back