# 세션 레코딩 및 재생 브라우저 세션 레코딩 및 재생은 디버깅, 감사 또는 훈련 목적으로 포괄적인 관찰성을 제공합니다. 세션 레코딩이 활성화된 브라우저를 생성하면 Amazon Bedrock AgentCore는 브라우저 상호 작용을 자동으로 캡처하여 나중에 분석할 수 있도록 지정된 Amazon S3 버킷에 저장합니다. 세션 재생은 재생을 보고 브라우저 세션 중에 발생한 작업을 이해할 수 있는 포괄적인 브라우저 상호 작용 데이터를 캡처합니다. 이 기능은 브라우저 동작에 대한 자세한 인사이트를 제공하여 오류를 해결하고 향후 호출을 개선하는 데 도움이 됩니다. 세션 재생 중에 수집되는 정보는 다음과 같습니다. + 세션 DOM 변경 및 변형 + 클릭, 스크롤 및 양식 상호 작용을 포함한 사용자 작업 + 콘솔 로그 및 오류 메시지 + Chrome DevTools 프로토콜(CDP) 이벤트 + 네트워크 이벤트 및 HTTP 요청 ## 세션 기록을 위한 사전 조건 세션 기록을 활성화하려면 다음이 필요합니다. + 레코딩 데이터를 저장할 Amazon S3 버킷 + Amazon S3 버킷에 쓸 수 있는 권한이 있는 IAM 실행 역할 + 레코딩이 활성화된 상태로 구성된 사용자 지정 브라우저 도구 ## 레코딩을 위한 IAM 역할 구성 세션 레코딩을 활성화하려면 Amazon S3에 레코딩 데이터를 쓰고 CloudWatch에 활동을 기록할 수 있는 권한이 있는 IAM 실행 역할이 필요합니다. 권한 설정에 대한 자세한 지침은 [권한을 참조하세요](browser-resource-session-management.md#browser-permissions). 실행 역할에는 표준 브라우저 권한 이외의 추가 권한이 필요합니다. ``` { "Sid": "S3Permissions", "Effect": "Allow", "Action": [ "s3:PutObject", "s3:GetObject", "s3:ListBucket", "s3:ListMultipartUploadParts", "s3:AbortMultipartUpload" ], "Resource": [ "arn:aws:s3:::your-recording-bucket", "arn:aws:s3:::your-recording-bucket/*" ] }, { "Sid": "CloudWatchLogsPermissions", "Effect": "Allow", "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream", "logs:PutLogEvents", "logs:DescribeLogStreams" ], "Resource": "*" } ``` `your-recording-bucket`를 실제 Amazon S3 버킷 이름으로 바꿉니다. ## 1단계: 레코딩을 사용하여 브라우저 도구 생성 녹음이 활성화된 사용자 지정 브라우저 도구를 생성합니다. 브라우저 도구 생성에 대한 자세한 지침은 [ AgentCore 브라우저 생성을 참조하세요](browser-using-tool.md#browser-create). 브라우저 도구를 생성할 때 다음을 확인하세요. + 구성에서 세션 레코딩 활성화 + 레코딩 저장을 위한 Amazon S3 버킷 및 접두사 지정 + 1단계의 IAM 실행 역할 사용 Python SDK 사용 예제: ``` import boto3 import uuid region = "us-west-2" bucket = "your-recording-bucket" client = boto3.client("bedrock-agentcore-control", region_name=region) response = client.create_browser( name="MyRecordingBrowser", description="Browser with session recording enabled", networkConfiguration={"networkMode": "PUBLIC"}, executionRoleArn="arn:aws:iam::123456789012:role/AgentCoreBrowserRecordingRole", clientToken=str(uuid.uuid4()), recording={ "enabled": True, "s3Location": { "bucket": bucket, "prefix": "browser-recordings" } } ) browser_identifier = response.get("browserId") or response.get("browserIdentifier") print(f"Created browser with recording: {browser_identifier}") print(f"Recordings will be stored at: s3://{bucket}/browser-recordings/") ``` ## 2단계: 레코딩 지원 브라우저 사용 모든 자동화 프레임워크에서 레코딩이 활성화된 브라우저를 사용합니다. 모든 브라우저 상호 작용이 자동으로 기록됩니다. Strands 사용 예제: ``` from strands import Agent from strands_tools.browser import AgentCoreBrowser # Use the browser created with recording browser_identifier = "your-browser-identifier" region = "us-west-2" browser_tool = AgentCoreBrowser(region=region, identifier=browser_identifier) agent = Agent(tools=[browser_tool.browser]) prompt = ( "Navigate to https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/what-is-bedrock-agentcore.html " "and summarize the key features of AgentCore." ) response = agent(prompt) print("Agent Response:") print(response.message["content"][0]["text"]) ``` 이 세션 중 모든 상호 작용은 세션이 종료될 때 자동으로 기록되고 Amazon S3 버킷에 업로드됩니다. ## 3단계: 라이브 세션 모니터링 및 레코딩 재생 AWS 콘솔은 실시간 모니터링과 기록된 세션 분석을 위한 포괄적인 도구를 제공합니다. ### 라이브 뷰 모니터링 브라우저 세션을 실시간으로 모니터링하고 활성 세션과 상호 작용합니다. **콘솔에서 라이브 뷰에 액세스하려면** 1. Amazon Bedrock AgentCore 콘솔을 열고 **기본 제공 도구로 이동합니다.** 1. 목록에서 브라우저 도구를 선택합니다(예: `MyRecordingBrowser` ). 1. **브라우저 세션** 섹션에서 **준비**됨 또는 **진행 중** 상태인 활성 세션을 찾습니다. 1. **라이브 뷰/레코**딩 열에서 제공된 "라이브 세션 보기" URL을 클릭합니다. 1. 라이브 보기가 새 브라우저 창에서 열리고 실시간 브라우저 세션이 표시됩니다. 라이브 뷰 인터페이스는 다음을 제공합니다. + 브라우저 세션의 실시간 비디오 스트림 + 자동화에서 제어를 인계하거나 해제하기 위한 대화형 제어 + 세션 상태 표시기 및 연결 정보 + 제어가 활성화된 경우 브라우저와 직접 상호 작용하는 기능 ### 세션 재생 및 분석 콘솔 재생 인터페이스를 통해 세부 세션 레코딩 및 분석에 액세스합니다. **콘솔에서 세션 재생에 액세스하려면** 1. 브라우저 도구로 이동하여 **종료됨** 상태의 완료된 세션을 선택합니다. 1. 분석하려는 세션의 **레코딩 보기를** 클릭합니다. 1. 세션 재생 페이지가 포괄적인 분석 도구와 함께 표시됩니다. **세션 분석 기능** 콘솔은 다음과 같은 여러 분석 도구를 제공합니다. + **비디오 플레이어**: 탐색을 위한 타임라인 스크러버를 사용한 대화형 재생 + **페이지 탐색**: 시간 범위가 있는 방문한 모든 페이지를 보여주는 패널 + **사용자 작업**: 타임스탬프, 메서드 및 세부 정보와의 모든 사용자 상호 작용 + **페이지 DOM**: 각 페이지의 DOM 구조 및 HTML 콘텐츠 + **콘솔 로그**: 브라우저 콘솔 출력, 오류 및 로그 메시지 + **CDP 이벤트**: 파라미터 및 결과가 포함된 Chrome DevTools 프로토콜 이벤트 + **네트워크 이벤트**: HTTP 요청, 응답, 상태 코드 및 타이밍 **레코딩 탐색** 다음 방법을 사용하여 녹음을 탐색합니다. + 페이지 패널의 페이지를 클릭하여 특정 순간으로 이동합니다. + 사용자 작업을 클릭하여 타임라인에서 발생한 위치를 확인합니다. + 비디오 타임라인 스크러버를 사용하여 정확한 탐색 + 작업 테이블에서 **레코딩 링크 보기를** 선택하여 특정 상호 작용으로 이동합니다. ## 4단계: 프로그래밍 방식으로 레코딩에 액세스 사용자 지정 통합 및 자동 분석을 위해 Amazon Bedrock AgentCore SDK 및 APIs에 액세스합니다. ### 프로그래밍 방식의 라이브 뷰 액세스 브라우저 클라이언트 및 뷰어 서버를 사용하여 라이브 브라우저 세션에 연결합니다. ``` import time from rich.console import Console from bedrock_agentcore.tools.browser_client import browser_session from browser_viewer import BrowserViewerServer console = Console() def main(): try: # Create browser session with browser_session('us-west-2') as client: print("✅ Browser ready!") ws_url, headers = client.generate_ws_headers() # Start viewer server console.print("[cyan]Starting viewer server...[/cyan]") viewer = BrowserViewerServer(client, port=8005) viewer_url = viewer.start(open_browser=True) # Keep running while True: time.sleep(1) except KeyboardInterrupt: console.print("[yellow]Shutting down...[/yellow]") if 'client' in locals(): client.stop() console.print("✅ Browser session terminated") if __name__ == "__main__": main() ``` ### 프로그래밍 방식 레코딩 액세스 사용자 지정 분석 워크플로를 위해 Amazon S3에서 직접 기록 데이터에 액세스합니다. ``` import boto3 s3_client = boto3.client('s3', region_name='us-west-2') # List recordings in your bucket bucket_name = "your-recording-bucket" prefix = "browser-recordings/" response = s3_client.list_objects_v2(Bucket=bucket_name, Prefix=prefix) print(f"Recordings in s3://{bucket_name}/{prefix}:") for obj in response.get('Contents', []): print(f" {obj['Key']} ({obj['Size']} bytes)") print(f" Last Modified: {obj['LastModified']}") print() ``` 데이터 구조 기록: ``` s3://your-recording-bucket/browser-recordings/ └── session-id/ ├── batch_1.ndjson.gz ├── batch_2.ndjson.gz └── batch_3.ndjson.gz ``` 각 세션은 세션 ID로 폴더를 생성하고 세션이 진행됨에 따라 기록 데이터가 청크로 업로드됩니다. ## 세션 재생 프로그래밍 방식 예제 고급 사용 사례의 경우 사용자 지정 세션 재생 뷰어를 구축하고 기록 데이터를 자체 분석 워크플로에 통합할 수 있습니다. 다음 GitHub 예제에서는 독립 실행형 세션 재생 뷰어와 브라우저 세션 재생 기능을 사용할 때의 전체 브라우저 환경을 보여줍니다. 추가 예제는 [ GitHub의 AgentCore 브라우저 예제를 참조하세요](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/). ### 독립 실행형 세션 재생 뷰어 독립 실행형 세션 재생 뷰어는 새 브라우저를 생성하지 않고 Amazon S3에서 직접 기록된 브라우저 세션을 볼 수 있는 별도의 도구입니다. + S3에 직접 연결하여 레코딩 보기 + 세션 ID를 지정하여 과거 레코딩 보기 + 세션 ID별 콘솔 재생 URLs을 사용하여 S3에서 아티팩트가 누락된 경우 오류 메시지 표시 + 타임라인 탐색이 포함된 대화형 비디오 재생 인터페이스 + 양식 채우기, 클릭 및 탐색 이벤트를 보여주는 타임라인의 작업 마커 + 기간 및 URL 세부 정보와 함께 이동한 페이지를 표시하는 관찰성 테이블 + 각 페이지 상호 작용에 대한 콘솔 이벤트, CDP 로그 및 네트워크 로그 + 페이지 수준에서 통합된 세션 기간 추적 + 비디오와 작업 데이터 간의 시각적 상관 관계가 포함된 실시간 작업 확인 ``` # View the latest recording in a bucket python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data # View a specific recording python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data --session 01JZVDG02M8MXZY2N7P3PKDQ74 # Use a specific AWS profile python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data --profile my-profile ``` 자세한 내용은 [ GitHub의 독립 실행형 세션 재생 뷰어](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/live_view_sessionreplay/view_recordings.py)를 참조하세요. ### 레코딩 및 재생으로 브라우저 경험 완성 레코딩 기능 및 고급 재생 기능을 사용하여 브라우저 세션을 생성하기 위한 포괄적인 도구입니다. + S3에 자동 레코딩을 사용하여 브라우저 세션 생성 + 대화형 컨트롤을 사용한 라이브 뷰(테이크/릴리스) + 즉시 디스플레이 해상도 조정 + S3에 자동 세션 레코딩 + 비디오 플레이어 인터페이스가 있는 통합 세션 재생 뷰어 + 정확한 작업 위치 추적을 통한 타임라인 스크러빙 + 탐색 타임라인 및 URL 복사를 사용한 Page-by-page 분석 + 클릭 위치 세부 정보를 사용한 양식 채우기 작업 확인 + 페이지 수준에서 통합된 세션 기간 추적 + 비디오와 작업 데이터 간의 시각적 상관 관계가 포함된 실시간 작업 확인 ``` # View the latest recording in a bucket python -m live_view_sessionreplay.browser_interactive_session ``` 자세한 내용은 [ GitHub의 대화형 브라우저 세션을](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/live_view_sessionreplay/browser_interactive_session.py) 참조하세요.