Nuxt로 만든 블로그를 netlify로 마이그레이션하려고했습니다.

아티팩트: htps : // 닳았다. 메

최근에는 nuxt에서만 1에서 블로그를 만들고 있습니다.
지금까지는 수중에서 빌드하고 GitHub Pages에 push-dir로 배포하고 있었다.
그러나, 수중 빌드가 달라져 온 것과, 약간의 수정·추기는 GitHub상에서 직접 markdown 만지기를 원하기 때문에 CD를 검토.
처음에는 베타에 Circle CI라든지 생각했지만, 들으면 Netlify는 무료로 독자 도메인에 대응해 CD도 할 수 있다고 하는 것으로, 이것으로 어쩔 수 없는 감이 없었기 때문에 이행해 보았다.

프로젝트 개요

npm run generate를 두드리면 dist 디렉토리에 정적 파일이 출력된다.
dist를 통째로 어딘가에 올리면 단순한 nginx라든지라도 움직이는 구성.

Netlify 관리 화면에서 작업

위 리포지토리 선택

빌드 명령과 출력 디렉토리 입력

netlify.toml로 지정하는 경우 필요 없음

맞춤 도메인 설정

도메인 구매

netlify DNS 설정을 포치 포치 진행하면 네 개의 Nameservers 호스트 이름이 만들어지므로 도메인 등록 기관에서 설정

Amazon Route 53에서 구입했기 때문에 Route 53 매니콘의 Registered domains> (구매 도메인)의 Name servers 설정 다시 작성

HTTPS 설정

Verify DNS configuration 누르기만 하면 Let's Encrypt를 설정합니다.

이 위의 DNS 설정 후 약 1 시간이므로 작업 중단

위의 작업이 성공하면 Force HTTPS 설정 사용

이상.
하고 싶다면 스마트 폰만으로 할 수있을 정도의 편함

결과

배포가 자동화되어 당초의 목적을 달성할 수 있었다.



점수적으로는 GitHub Pages 때와 변함없이. CSS를 거의 쓰지 않았기 때문에 당연히 당연히.

덤: Netlify 캐시 설정

상기에 세세하게 쓰여져 있지만 max-age=0, must-revalidate, public가 되어 있다.
must-revalidate는 캐시가 만료되면 반드시 서버에 문의하여 변경이 없는지 확인하고, 변경이 없으면 캐시를 사용해도 좋다는 directive.
Netlify는 자동으로 ETag를 추가하고 max-age = 0이므로,
어쨌든 "항상 서버에 문의하여 업데이트가없는 한 캐시를 사용할 수있다"라는 설정.

위의 블로그에는 「항상 문의해 무겁지 않아?」에 대한 대답도 써 있고,
"우리의 CDN이 폭속으로 변화 없이 돌려주고 http/2에서 리퀘스트도 병렬이 되기 때문에 일순간이야"
라는 것.

하지만 Cache Busting 용으로 해시 된 JS, CSS는 아까울까라고 생각해 Cache-Controll 만나 보았지만, htps : // 닳았다. 메 에 대해서는 service worker 로 캐쉬해 주기 때문에 거의 의미 없었다

이 기사의 영어 번역