정적 WEB via CloudFront에 RUM을 넣고 모니터링을 해보세요.

6165 단어 CloudWatchnext.jsWebAWSCloudFront
TL;DR
re: Invent 2021에 발표된 클라우드워치의 새로운 기능「CloudWatch RUM(Real-User Monitoring)」을 사용하여 클라우드 프론트에 발표된 Next.js제 WEB를 감시해 봤습니다.
CloudWatch RUM is란 무엇입니까?
다음은 공식 문서에서 인용한 것이다.
CloudWatch RUM을 사용하여 실제 사용자 모니터링을 수행할 수 있습니다.실제 사용자 세션에서 웹 응용 성능과 관련된 클라이언트 데이터를 거의 실시간으로 수집하고 표시할 수 있습니다.페이지 읽기 시간, 클라이언트 오류, 사용자 활동 등 데이터를 시각화하고 분석할 수 있습니다.이 디스플레이 기능은 모든 데이터를 집중적으로 볼 수 있을 뿐만 아니라 고객이 사용하는 브라우저와 장치의 세부 사항도 확인할 수 있다.
예, WEB 액세스 확인 서비스입니다.
다른 회사의 서비스는 Google Analytics와 Adobe Analytics가 있다.액세스 해석 서비스로서 다른 회사에 비해 후발적이지만 이 기능의 등장으로 AWS는 호스트부터 액세스 해석까지 단숨에 실현할 수 있다."WEB는 AWS의 호스트지만 방문 해석은 다른 회사의 서비스를 이용하는 것"이라며 이렇게 울면서 이별하는 것도 해소할 수 있을 것 같다고 덧붙였다.
Next.js제 WEB로 가져오기
전체 구성

CloudWatch RUM에서 RUM을 JavaScript로 S3에 저장된 정적 내용에 미리 넣고 고객이 요청할 때 추적용 스크립트로 불이 나서 CloudWatch RUM에 데이터를 투입한다.
1. 애플리케이션 모니터 추가
CloudWatch 콘솔에서 RUM을 설정합니다.변형 설정 상태에서 추적할 수 있습니다.부드럽다.




여러 구성 항목 선택
- 데이터 저장소
- 공식 문서에 "CloudWatch RUM에서 수집한 터미널 사용자 데이터는 저장한 지 30일 후에 자동으로 삭제됩니다."30일 이상 이전 데이터로 거슬러 올라가 분석하려면 이 검사를 ON으로 설정하십시오.CloudWatchLogs에 데이터를 저장합니다.(CWLogs 측의 기간 설정도 잊지 마세요)
- 약속
- 일본어 번역이 좀 어색하지만 원문은 Authorization입니다.Comgnito ID 풀을 사용하여 고객이 데이터를 전송할 수 있습니다.Cognito에서 인증되지 않은 ID 지원 이 기능을 사용하면 CloudWatch RUM에 데이터를 전송할 수 있는 IAM 스크롤(※)을 클라이언트 측에서 받을 수 있습니다."새 IDEA 수영장 만들기"를 선택하면 OK.
- (※) rum:PutRumEvents의Allow 권한 부여
- 활동 추적
-X Ray 추적을 사용할 수 있습니다.RUM 대시보드, CloudWatch ServiceLens 콘솔, X-Ray 콘솔에서 추적 가능한 세션XMLHttpRequest 및 fetch 요청을 활성화하여 확인할 수 있습니다.이번에는 설정을 ON으로 변경한다.프로젝트 '세션 샘플' 설정에 100% 지정되어 있기 때문에 이번 상황에서는 모두 추적됩니다.
2. 순조롭게 획득
필요한 항목을 입력하면 코드 기호가 표시됩니다.그 전에 정적 내용에 붙여넣습니다.(제어를 잊은 후에도 다시 확인할 수 있다)

3. 부드럽게 포함
솔직히 이게 제일 힘들어요.
Next.js_app.tsx에 모든 페이지가 공통된 항목을 기록하고 <Head> 탭에 스크립트를 삽입하면 여러 오류가 발생합니다.
SyntaxError: '}' expected.라Cannot find name 'sessionSampleRate'.ts라 하는 등 오류를 토해내며 SSG를 진행할 수 없었다.
결과적으로 정적 내용을 생성한 원시 HTML 파일에 아까 주석을 붙여 디자인한 후 문제없이 작동했다.(정면강자, 좋은 방법 꼭 알려주세요.)
Script 태그를 사용하여 아래 이미지에 삽입하면 구성할 수 있습니다.

계기판을 보고 히죽거리다
대시보드에 표시할 게 너무 많아서 다 소개할 수 없으니 재미있는 것 몇 가지를 골라보겠습니다.
성능 > 자원 요청
다양한 자원을 가져오는 데 필요한 불러오는 시간을 표시할 수 있습니다.
웹 페이지가 매우 느리게 나타난다.이럴 때는 어디가 병목인지 확인할 수 있다.
(이번 모드라면 RUM 실행용 스크립트를 가져오는 데 가장 시간이 걸린다.)

성능 > 시간 자원 요청
요청한 수량을 표시할 수 있습니다.이번 예는 클라우드 프론트+S3이기 때문에 크게 고려할 필요는 없지만, EC2와 ECS에서 WEB hosting을 진행하면 요구량이 많은 시간대에 미리 규모화하는 자원 전략을 실현할 수 있다.

사용자 운동
페이지 마이그레이션을 매핑하고 드롭다운(=WEB 오프셋)을 확인할 수 있습니다.
예를 들어 여러 페이지를 뛰어넘는 형식을 설치할 때 어느 페이지에서 벗어났습니까?페이지 설정을 최적화하는 알림으로 전환율을 높일 수 있습니다.

브라우저 및 장치
WEB에 액세스한 브라우저의 내역을 확인할 수 있습니다.
고객이 날아오는 UserAgent를 기준으로 통계를 집계합니다.
엔터프라이즈 시스템의 경우 터미널 사용자에 대해 동작 보증 브라우저를 설정하지만 이때 보증 브라우저는×버전을 선택하는 데 도움이 될 것 같습니다.IE 대응해야죠!이런 사람이 이 화면을 볼 수 있다.

총결산
드디어 AWS의 순수한 WEB 액세스 해석 서비스가 등장해서 사용해 보았습니다.
타사 제품에 비해 활용할 수 있는 기능도 손색이 없어 마침내 AWS만으로 WEB 감시와 추적을 완료할 수 있게 됐다.
물론 AWS의 다른 서비스와 협력해 RUM의 양도를 감시할 수도 있고, 클라우드워치 Alarm이 한도값을 초과하도록 훈련하면 람바다와 슬랙 등 연계 방법을 사용할 수도 있다.외형감시의 클라우드워치 Synthetics 등도 조합하면 신뢰성이 높은 WEB 활용이 가능하지 않겠나.
시험을 준비하다
Google Analythics에 대한 조사에 대해 닛케이 뉴스에 이런 보도가 있었다.
미국에 Google Andrics 메시지를 보내는 프랑스 당국의 "불법"
전방 부근의 제3자 쿠키도 제한을 받았는데 그 중에서 WEB 접근 해석 도구도 제한을 받았나요...!?
함수 역할 영역, 블록 급 역할 영역 과 품사 역할 영역
Swift study - Collection Types

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage