Netlify는 빌드 및 배포 워크플로우를 간소화하고 애플리케이션을 더 쉽게 확장할 수 있도록 함으로써, 개발자가 더 빠르게 앱을 출시할 수 있도록 지원합니다. 개발자들에게 역량을 제공하고 개발 작업을 더 쉽게 만드는 것이 목표인 뉴렐릭은 Netlify의 열렬한 팬입니다.
얼마 전에 뉴렐릭 Browser Agent로 Netlify 포스트 프로세싱(post-processing)을 사용해 Jamstack 애플리케이션의 성능을 모니터링하는 것에 대해 글을 올린 적이 있습니다. 이제 뉴렐릭 Netlify 플러그인과 뉴렐릭 Netlify 퀵스타트로 이러한 작업이 훨씬 더 쉬워졌습니다.
이 플러그인은 배포가 사용자 사이트의 성능에 어떤 영향을 미치는지 알고 싶은 개발자를 위해 만든 것입니다. 플러그인을 사용하면:
- 자동으로 브라우저 모니터링 에이전트를 설치하고, Netlify에서 빌드 이벤트가 발생할 때마다 New Relic One에 알림을 전송할 수 있습니다. New Relic One에서 실제 사용자 모니터링(RUM)을 통해 Jamstack 애플리케이션의 성능에 대한 중요한 인사이트를 얻을 수 있습니다.
- 각 배포가 운영 환경에서 사이트의 성능 메트릭에 미치는 영향을 이해할 수 있습니다.
- 사이트에서 가장 큰 콘텐츠풀 페인트(CP), 최초 입력 지연, 누적 레이아웃 이동 등 Google 코어 웹 바이탈(Core Web Vitals)을 측정할 수 있습니다.
- 사용자에게 영향을 미치기 전에 오류를 빠르게 발견하고 수정할 수 있습니다.
- 맞춤형 대시보드를 사용해 데이터를 탐색하고 Netlify 사이트에 문제가 있을 때 알림을 받을 수 있습니다.
뉴렐릭 Netlify 플러그인 설치 방법
플러그인을 설치하려면, 뉴렐릭 계정에 로그인하여(무료 계정 가입) 뉴렐릭 인제스트 라이선스 키와 뉴렐릭 브라우저 인제스트 라이선스 키를 생성합니다.
Netlify UI에서 설치하는 방법
Netlify 계정에서 plugins directory로 이동한 다음, New Relic을 검색합니다. Install을 클릭한 후, 플러그인을 사용할 Netlify 사이트를 선택합니다.
다음으로 환경 변수를 사용해 플러그인을 설정합니다. 사이트의 Settings > Build and deploy > Environment로 이동한 후, 아래의 환경 변수를 생성합니다.
사용 가능한 모든 설정 변수와 값이 포함된 목록은 플러그인 문서를 참조하시기 바랍니다.
netlify.toml 파일을 통해 설치하는 방법
귀하의 netlify.toml 파일에 아래 코드를 추가해서 Netlify 플러그인을 설치할 수도 있습니다. 파일:
[[plugins]]
package = "@newrelic/netlify-plugin"
[plugins.inputs]
newrelicAccountId = "123456"
newrelicLicenseKey = "12345678901234567890"
newrelicBrowserLicenseKey = "ABCD-0987654321"
newrelicAppId = "123456789"
enableBrowserMonitoring = true
newrelicAccountId, newrelicLicenseKey, newrelicBrowserLicenseKey, newrelicAppId 값을 귀하의 뉴렐릭 계정 ID, 앞서 생성한 인제스트 라이선스 , 브라우저 인제스트 라이선스 키, 뉴렐릭 브라우저 앱 ID로 교체합니다.
netlify.toml에 어느 플러그인을 사용할지 지정하길 원하지만 라이선스 키를 노출하고 싶지 않은 경우가 있습니다. (예를 들어 GitHub에 개인 키를 노출해서는 안 됩니다.) 이 경우에도 플러그인을 netlify.toml 파일에 포함시키고, 이전 섹션에서 설명한 대로 환경 변수와 Netlify UI를 사용해 설정할 수 있습니다.
사용 가능한 모든 설정 변수와 값이 포함된 목록은 플러그인 문서를 참조하시기 바랍니다.
New Relic One에서 Netlify 성능에 대한 알림 확인 및 설정
뉴렐릭 계정에 로그인한 후 Instant Observability quickstarts directory로 이동합니다. Netlify를 검색하고 Netlify 로고를 클릭하여 퀵스타트 개요 페이지를 확인한 다음, Install quickstart를 선택합니다. 화면의 지시에 따라 설치 절차를 완료합니다.
퀵스타트는 다양한 알림을 생성해줍니다. 이러한 알림은 기본적으로 비활성화되어 있습니다. Alerts & AI > Alert Conditions 내에서 Netlify Quickstart alert policy 페이지로 이동하여 사용하려는 알림을 활성화합니다.
간단합니다. 뉴렐릭 Netlify 플러그인과 뉴렐릭 Netlify 퀵스타트의 설치와 설정이 완료되었습니다. 이제 새로운 Netlify 대시보드와 알림을 확인하고, 필요에 따라 원하는 대로 맞춤화할 수 있습니다.
이 포스트에서 언급되지 않은 추가적인 기능이나 설정 옵션은 플러그인 문서를 확인하시기 바랍니다.
다음 단계
아직 New Relic One 계정이 없으시다면, 지금 가입하십시오. 무료 계정에는 매월 100GB의 무료 데이터 수집과 1명의 무료 전체 액세스 사용자 및 무제한 무료 기본 사용자가 포함됩니다.
이 블로그에 표현된 견해는 저자의 견해이며 반드시 New Relic의 견해를 반영하는 것은 아닙니다. 저자가 제공하는 모든 솔루션은 환경에 따라 다르며 New Relic에서 제공하는 상용 솔루션이나 지원의 일부가 아닙니다. 이 블로그 게시물과 관련된 질문 및 지원이 필요한 경우 Explorers Hub(discuss.newrelic.com)에서만 참여하십시오. 이 블로그에는 타사 사이트의 콘텐츠에 대한 링크가 포함될 수 있습니다. 이러한 링크를 제공함으로써 New Relic은 해당 사이트에서 사용할 수 있는 정보, 보기 또는 제품을 채택, 보증, 승인 또는 보증하지 않습니다.
