그래서 지난번 자력 Prerendering편 다음에 Netlify 편입니다. 이번은 원래 prerendering 이외의 방법을 쓰려고 하고 있었습니다만, Netlify 하지만 몹시 간단하게 prerendering 할 수 있는 것 같았으므로 시험해 보고 싶어져 버렸습니다.

Netlify란?

Netlify 은 프런트 엔드의 소스 코드를 GitHub 등의 git 리포지토리에 push 하는 것만으로 빌드·배포·CDN 첨부 전달해 주는 서비스입니다.

절차

이전과 마찬가지로 create-react-app로 만듭니다.

yarn create react-app netlify-demo

필요한 패키지 추가

이번에는 자력으로 prerender는 하지 않으므로 react-router-dom과 react-helmet만 사용합니다.

yarn add react-router-dom react-helmet

Route 만들기

전회와 거의 같은 내용이고 소스는 여기 에 놓았으므로 생략합니다만, Home와 About의 2개의 루트를 만듭니다.

_redirects 만들기

공식 문서에 있는 거리 SPA라면 잘 route를 취할 수 없기 때문에 아래와 같은 _redirects라는 파일을 만듭니다.

_redirects

/*    /index.html   200

그리고 package.json의 build 섹션에서 빌드 할 때 build 디렉토리에 포함되도록합니다.

package.json

    "build": "react-scripts build && cp _redirects build/",

Netlify 설정

배포 설정

계정을 만들고 GitHub의 리포지토리를 선택하고 아래와 같이 배포를 지정해 드리기 때문에 자세한 단계는 생략합니다.

prerendering 설정

prerendering 의 페이지에 쓰여진 대로 settings에서 활성화하는 것만으로 prerendering됩니다. 매우 간단합니다 ...
그러나 불행히도 프리 플랜에서는 사용할 수 없으므로 최소 월 9 달러의 플랜에 들어가야합니다. 덧붙여서 위의 페이지에 있는 대로 Netlify의 prerendering 이외에도 Prerender.io나 그 외의 서비스를 사용한 prerendering도 할 수 있습니다.

배포

설정이 끝나면 리포지토리에 push 하는 것만으로 매회 자동으로 빌드·배포되어 최신판이 전달됩니다.

이런 식으로 배포의 이력이 남아 있습니다. 또한 자동으로 netlify의 도메인하에서 전달되지만, 독자 도메인(SSL 첨부)에서도 전달할 수 있습니다.

확인

에서 Slack에서 결과를 확인하면 이대로 route별로 별도의 정보를 얻을 수 있습니다.

마지막으로

그래서 Netlify의 prerendering을 사용해 보았습니다.
자력 prerendering도 간단했습니다만, 이쪽은 더 간단하고 기존 코드에는 아무것도 손을 넣지 않고 할 수 버렸습니다.
엄청 간단했기 때문에 이번 신규 프로젝트에서 사용하고 싶은 곳입니다.
단지 현재의 프로젝트는 아마 현재의 S3+CloudFront 전송으로 갈 것이므로, 다음은 prerendering 이외의 방법을 소개하고 싶습니다. . . 어쩌면.