서버 혼합 패널 대안이 없습니다.섹션 1: 이벤트 수집 및 표시

이것은 사용Cube.js으로 웹 응용 프로그램을 분석하는 시리즈 강좌의 첫 번째 부분이다.그것은 독자들이 Javascript, Node에 익숙해지기를 바란다.js, React 및 SQL에 대한 기본 지식The final source code is available here 및 the live demo is here.예제 응용 프로그램은 서버가 없고 AWS Lambda에서 실행됩니다.그것은 자신의 사용 상황에 대한 데이터를 표시한다.

Mixpanel이나 Amplitude 같은 분석 도구는 이벤트 데이터를 처리하는 데 뛰어나다.이 도구는 깔때기 활성화 또는 보존과 같은 제품 또는 참여도 지표를 평가하는 데 이상적인 도구입니다.그것들은 A/B 테스트를 측정하는 데도 매우 유용하다.
비록 이 모든 도구들이 역할을 발휘할 수 있지만, 그것들은 모두 전유적이고 구름에 기초한 것이다.프라이버시가 주목받을 때, 이것은 문제가 될 수 있다.또는 누군가가 플러그를 맞춤형으로 만들거나 엔진 뚜껑 아래에 유지하는 작업 방식을 원한다면.전통적인 BI 도구(예를 들어 Tableau나 Power BI)는 같은 분석을 실행하는 데 사용될 수 있지만 같은 수준의 사용자 체험을 제공할 수 없다.문제는 이들이 플러그, 보존, A/B 테스트 등에 사용되지 않고 통용되는 비즈니스 스마트 도구로 설계되었다는 것이다.
전단 개발의 최신 진전에 따라 복잡한 사용자 인터페이스를 신속하게 개발하는 것이 가능해졌다.5년 전에 일주일이 걸려서 만든 물건을 지금은 오후에 지을 수 있다.백엔드와 인프라 시설에서 클라우드 기반의 MPP 데이터베이스, 예를 들어 BigQuery와Athena는 국면을 현저하게 바꾸고 있다.데이터가 데이터베이스에서 변환될 때 ELT 방법은 점점 유행하고 전통적인 ETL을 대체하고 있다.서버 구조가 없어서 응용 프로그램을 쉽게 배치하고 확장할 수 있다.
이 모든 것들은 Mixpanel, Amplitude, Kissmetrics 등 이미 만들어진 서비스를 대체하기 위해 내부 대체 방안을 구축하는 것을 가능하게 한다.이 시리즈의 강좌에서 우리는 기능이 완비된 개원 이벤트 분석 시스템을 구축할 것이다.
다음과 같은 기능이 포함됩니다.

데이터 수집;

계기판;

조회 생성기를 사용하여 특별 분석을 한다.

누두 분석;

보존 분석;

서버 배포 없음;

A/B 테스트;

실시간 사건 모니터링;

다음 그림은 응용 프로그램의 구조를 보여 줍니다.

본 강좌의 첫 부분에서 우리는 어떻게 데이터를 수집하고 저장하는지에 더욱 관심을 기울일 것이다.이 데이터에 근거하여 간단한 도표를 만드는 방법을 간략하게 소개한다.다음 부분은 데이터 조회와 각종 분석 보고 기능 구축에 더욱 중심을 두었다.

이벤트 수집

Snowplow Cloudfront 컬렉터와 Javascript 추적기를 사용할 것입니다.Amazon CloudFront CDN에 추적 픽셀을 업로드해야 합니다.쟁기 추적기는 픽셀에 GET 요청을 보내고 데이터를 검색 문자열 매개 변수로 수집기에 전달하여 데이터를 수집기에 보냅니다.CloudFront 컬렉터는 CloudFront 로깅을 사용하여 요청 (쿼리 문자열 포함) 을 S3 스토리지 통에 기록합니다.
이제 Javascript 추적기를 설치해야 합니다.Here is the full guide .
그러나 간단히 말하면 구글이 분석한 추적 코드나 Mixpanel과 유사하기 때문에 HTML 페이지에 끼워넣기만 하면 된다.

<script type="text/javascript">      
  ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
   p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
   };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
   n.src=w;g.parentNode.insertBefore(n,g)}} .  (window,document,"script","//d1fc8wv8zag5ca.cloudfront.net/2.10.2/sp.js","snowplow"));

  window.snowplow('newTracker', 'cf', '<YOUR_CLOUDFRONT_DISTRIBUTION_URL>’, { post: false });
</script>

Here you can find how it is embedded into our example application.
일단 S3 저장소에 데이터, 즉 CloudFront 로그가 생기면 Athena로 조회할 수 있습니다.우리가 해야 할 일은 CloudFront 로그를 위한 표를 만드는 것이다.
다음 DDL 문을 Athena 콘솔에 복사하여 붙여넣습니다.로그가 저장된 S3 스토리지 통의 위치를 수정합니다.

CREATE EXTERNAL TABLE IF NOT EXISTS default.cloudfront_logs (
  `date` DATE,
  time STRING,
  location STRING,
  bytes BIGINT,
  requestip STRING,
  method STRING,
  host STRING,
  uri STRING,
  status INT,
  referrer STRING,
  useragent STRING,
  querystring STRING,
  cookie STRING,
  resulttype STRING,
  requestid STRING,
  hostheader STRING,
  requestprotocol STRING,
  requestbytes BIGINT,
  timetaken FLOAT,
  xforwardedfor STRING,
  sslprotocol STRING,
  sslcipher STRING,
  responseresulttype STRING,
  httpversion STRING,
  filestatus STRING,
  encryptedfields INT
)
ROW FORMAT DELIMITED 
FIELDS TERMINATED BY '\t'
LOCATION 's3://CloudFront_bucket_name/AWSLogs/Account_ID/'
TBLPROPERTIES ( 'skip.header.line.count'='2' )

이제 우리는 다차원 데이터 집합을 연결할 준비가 되었다.아테나에 연결하여 우리의 첫 번째 계기판을 구축하기 시작하다.

우리의 첫 번째 도표를 세우다

우선, 다차원 데이터 집합을 설치한다.js CLI.그것은 각종 입방체에 쓰인다.js 워크플로우.

$ npm install -g cubejs-cli

다음은 새 입방체를 만듭니다.js 서비스, 다음 명령을 실행합니다.주의, 우리는 여기서 아테나를 데이터베이스 (-d 아테나) 로 지정하고, 템플릿을 서버 없음 (-t 서버less) 으로 지정합니다.입방체js는 서로 다른 설정을 지원하지만, 본 강좌에서 서버 설정이 없습니다.

$ cubejs create event-analytics-backend -d athena -t serverless

실행 후, create 명령은 새로운 다차원 데이터 집합을 포함하는 비계를 만드는 새 프로젝트 디렉터리를 만들 것입니다.js 프로젝트.여기에는 입방체를 회전하는 데 필요한 모든 파일이 포함됩니다.js 백엔드, 다차원 데이터 집합 결과를 표시하는 데 사용되는 전단 코드 예시.js는 다차원 데이터 집합의 형식을 강조하기 위해 React 응용 프로그램에서 조회하고 예시 모드 파일을 보여 줍니다.js 데이터 모드층.
이 프로젝트 디렉터리의 .env 파일에는 관련 데이터베이스 인증서의 자리 표시자가 포함되어 있습니다.Athena의 경우 access necessary to run Athena queries 를 사용하여 AWS 액세스 및 키를 지정하고 질의 결과를 저장할 대상 AWS 영역 및 S3 output location 을 지정해야 합니다.

CUBEJS_DB_TYPE=athena
CUBEJS_AWS_KEY=<YOUR ATHENA AWS KEY HERE>
CUBEJS_AWS_SECRET=<YOUR ATHENA SECRET KEY HERE>
CUBEJS_AWS_REGION=<AWS REGION STRING, e.g. us-east-1>
# You can find the Athena S3 Output location here: https://docs.aws.amazon.com/athena/latest/ug/querying.html
CUBEJS_AWS_S3_OUTPUT_LOCATION=<S3 OUTPUT LOCATION>

이제 기본 입방체를 만듭니다.이벤트 모델의 js 모드입니다.입방체js는 데이터 모드를 사용하여 SQL을 생성하고 실행합니다.you can read more about it here.
다음 내용을 포함하는 schema/Events.js 파일을 만듭니다.

const regexp = (key) => `&${key}=([^&]+)`;
const parameters = {
  event: regexp('e'),
  event_id: regexp('eid'),
  page_title: regexp('page')
}

cube(`Events`, {
  sql:
    `SELECT
      from_iso8601_timestamp(to_iso8601(date) || 'T' || "time") as time,
      ${Object.keys(parameters).map((key) => ( `url_decode(url_decode(regexp_extract(querystring, '${parameters[key]}', 1))) as ${key}` )).join(", ")}
    FROM cloudfront_logs
    WHERE length(querystring) > 1
    `,

  measures: {
    pageView: {
      type: `count`,
      filters: [
        { sql: `${CUBE}.event = 'pv'` }
      ]
    },
  },

  dimensions: {
    pageTitle: {
      sql: `page_title`,
      type: `string`
    }
  }
});

패턴 파일에서 우리는 이벤트 다차원 데이터 집합을 만들었다.그것은 우리의 활동에 관한 모든 정보를 포함할 것이다.기본 SQL 문장에서 우리는 regexp 함수를 사용하여 추적기에서 보낸 검색 문자열에서 값을 추출합니다.입방체js는 이러한 전환을 실행하는 데 뛰어나며, 그 중의 일부 전환을 구체화하여 성능을 최적화할 수 있다.우리는 이 강좌의 다음 부분에서 그것을 토론할 것이다.
이 모델이 있으면 우리는 우리의 개발 서버를 실행하고 첫 번째 도표를 구축할 수 있다.
다음 명령을 실행하여 개발 서버를 시작합니다.

$ npm dev

액세스 http://localhost:4000 예시가 있는 CodeSandbox를 열어야 합니다.renderChart 함수와 query 변수를 다음과 같이 변경합니다.

const renderChart = resultSet => (
  <Chart height={400} data={resultSet.chartPivot()} forceFit>
    <Coord type="theta" radius={0.75} />
    <Axis name="Events.pageView" />
    <Legend position="right" name="category" />
    <Tooltip showTitle={false} />
    <Geom type="intervalStack" position="Events.pageView" color="x" />
  </Chart>
);

const query = {
  measures: ["Events.pageView"],
  dimensions: ["Events.pageTitle"]
};

이제 케이크 그림을 볼 수 있을 것입니다. 이것은 S3의 데이터에 달려 있습니다.

다음 부분에서 Mixpanel이나 Amplitude의 계기판과 동적 조회 생성기를 구축하는 방법을 소개할 것입니다.세 번째 섹션에서는 깔때기와 네 번째 섹션 - 유지를 구축하는 방법에 대해 설명합니다.마지막 부분에서 우리는 서버 없는 모드에서 전체 응용 프로그램을 AWS Lambda에 배치하는 방법을 토론할 것이다.
You can check out the full source code of the application here.
And the live demo is available here.