Angular를, 고기능 호스팅 서비스 「Netlify」로 사용해 고속화/Lighthouse 고득점 취하기 위한 빌드 파일을 공개했습니다

rdlabo/netlify_build_angular 을 공개했습니다. 제목대로 Angular를 Netlify라는 고기능 호스팅 서비스에서 사용하기 위한 빌드 파일입니다.

할 일은 다음 네 가지입니다.

robot.txt를 생성합니다.

www를 URL로 자동 리디렉션하기위한 _redirects를 생성합니다

ServerPush를위한 _headers를 생성합니다.

CSS 인라인

Angular는 빌드 시 빌드 파일을 생성하는 폴더를 재생성합니다. 또, --prod 가 붙으면(자), 파일명에 난수가 붙게 됩니다. ( main.js 가 main.f1ec16ef52a78f4177f7.js 가 되는 등)
따라서 자동 배포의 경우 Netlify에서 이러한 파일을 동적으로 생성해야합니다.

어떻게 사용합니까?

리포지토리에 있는 netlify.build.js을 다운로드하여 프로젝트 폴더의 최상위 디렉토리에 설치합니다. package.json 이나 angular.json 와 같은 계층입니다.

그런 다음 L19-L26까지을 환경으로 변경하십시오. 예를 들어, Ionic v4라면 publicDir 는 www/ 가 되고 appDomain 는 자신의 도메인으로 변경하십시오.debug = true는 확인 파일을 생성합니다. _redirects , _headers 는 Netlify에서 액세스 할 수 없으므로 동일한 내용의 파일을 각각 redirects.txt, _headers.txt로 생성합니다. false 하면 생성하지 않습니다.

설정이 완료되면 Netlify를 빌드할 때 설정합니다.



이런 식으로 node netlify.build.js를 추가하십시오. 이 상태에서 자동 빌드를 실행시키면 자동으로 Angular를 빌드한 후 이 설정 파일에 따라 빌드를 해줍니다.

이러한 설정의 효과

1. robot.txt를 생성합니다.

Lighthouse 점수가 높아집니다. Google bot에, 이 사이트는 색인해도 좋다고 가르쳐 주는 내용입니다.

If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed.

htps //w w. rd ぁ보. jp / 로보 ts. txt 같은 파일이 생성됩니다.

2. www가 URL로 자동 리디렉션되는 _redirects를 생성합니다.

Netlify에서는 www가 없는 도메인도 사용할 수 있지만, www 사용을 강력히 권장합니다. www를 붙이면 Netlify’s powerful CDN를 사용할 수 있습니다.
htps //w w. 네 tぃfy. 코 m / 도 cs / 구 s와 m 도마이 s /

htps : // 앙구 ぁ r로 보는 lt- mp ぇ. 네 tぃfy. 이 m/레아레cts. txt 가 생성됩니다.

3. ServerPush에 대한 _headers를 생성합니다.

HTTP/2의 새로운 기능 "서버 푸시"는 다음 요청이 오기 전에 필요한 콘텐츠를 클라이언트에 보낼 수 있습니다.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m/우ぇb/푼다 멘타 ls/페르후르만세/htp2/? hl=그럼 #_7

htps : // 앙구 ぁ r로 보는 lt- mp ぇ. 네 tぃfy. 이 m/헤아데 rs. txt 같은 파일이 생성됩니다.

4. CSS를 인라인화합니다.

페이지 로딩 속도가 빨라지면 사용자 참여도, 페이지뷰, 전환율이 높아집니다. 페이지를 빠르게 로드하려면 처음 페인트할 때 필요한 스크립트와 링크를 인라인하여 다른 요소를 뒤집습니다.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 이 m / ぇ b / 와 ls / ぃgh 쇼세 / ぢ ts / b ぉ c 킨 굉장한 r s? hl = 그럼

결론

덧붙여 저희 사이트에서는 PHP로 조용했습니다만, 공개하기 위해 Node.js로 재작성했습니다. Angular를 공개하기 위한 빌드 파일이므로, 이쪽이 확실히 오는군요 w

Ionic 프로젝트를 위한 것은 Ionic-sub CLI에 직접 통합될 예정입니다.

rdlabo/netlify_build_angular

그럼, 또.