{"id":20136043,"url":"https://github.com/zkfmapf123/clickstream","last_synced_at":"2025-03-02T22:42:15.228Z","repository":{"id":237694029,"uuid":"795050768","full_name":"zkfmapf123/ClickStream","owner":"zkfmapf123","description":"ClickStream 인데 Queue를 곁들인...","archived":false,"fork":false,"pushed_at":"2024-05-11T05:14:13.000Z","size":1891,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T09:38:21.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkfmapf123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-02T13:40:47.000Z","updated_at":"2024-05-11T05:21:38.000Z","dependencies_parsed_at":"2024-05-04T16:35:08.188Z","dependency_job_id":"92e6479a-bbb1-437e-ad4c-9f856a6923d7","html_url":"https://github.com/zkfmapf123/ClickStream","commit_stats":null,"previous_names":["zkfmapf123/clickstream"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkfmapf123%2FClickStream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkfmapf123%2FClickStream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkfmapf123%2FClickStream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkfmapf123%2FClickStream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkfmapf123","download_url":"https://codeload.github.com/zkfmapf123/ClickStream/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241582519,"owners_count":19985846,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T21:17:32.425Z","updated_at":"2025-03-02T22:42:15.206Z","avatar_url":"https://github.com/zkfmapf123.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ClickStream made with Terraform\n\n![1](./public/1.png)\n\n## Todo\n\n- [x] Front ECS\n- [x] Lambda Functions\n- [x] Connect Lambda ALB\n- [x] SQS\n- [x] SQS SendMessage\n- [x] SQS PollingMessage\n- [ ] Ingest S3\n- [ ] Module\n\n## 구성 방법\n\n```sh\n    ## front build \u0026\u0026 docker push\n    make upload-fe\n\n    ## lambda build \n    make lambda-build\n\n    ## Infra Settings\n    make setting\n\n```\n\n## ClickStream\n\n- Lambda -\u003e s3 Ingestion 시, Put 비용이슈를 줄이기 위해 Queue를 Batch성으로 Put\n- SQS -\u003e Kinesis DataStream으로 진행해도 좋을듯\n\n## Frontend Unique Id\n\n### 브라우저내의 진입한 유저 Unique ID 설정\n\n```ts\n// index.js\n\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { Provider as RTKProvider } from \"react-redux\";\nimport App from \"./App\";\nimport GlobalStyle from \"./styles/globalStyles\";\nimport store from \"./redux/store/store\";\nimport { v4 as uuid4 } from \"uuid\";\n\n// added\nconst generateAndSaveUniqueId = () =\u003e {\n  const uniqId = uuid4();\n  sessionStorage.setItem(\"userId\", uniqId);\n};\n\n// added\nif (!sessionStorage.getItem(\"userId\")) {\n  generateAndSaveUniqueId();\n}\n\nconst root = ReactDOM.createRoot(\n  document.getElementById(\"root\") as HTMLElement\n);\nroot.render(\n  \u003cRTKProvider store={store}\u003e\n    \u003cGlobalStyle /\u003e\n    \u003cApp /\u003e\n  \u003c/RTKProvider\u003e\n);\n```\n\n### Event 기반 함수호출\n\n```ts\nimport axios from \"axios\";\nimport dayjs from 'dayjs'\n\ninterface Props {\n  clickEvent: string;\n  userId: string;\n  userAgent: string;\n  platform: string;\n  language: string;\n}\n\nexport const useClickEvent = async (props: Props) =\u003e {\n  try {\n    const res = await axios.post(process.env.REACT_CLICK_STREAM_URL, {\n      headers : {\n        \"Content-Type\" : \"application/json\"\n      },\n      body: {\n        clickEvent: props.clickEvent,\n        userId: props.userId,\n        userAgent: props.userAgent,\n        platform: props.platform,\n        language: props.language,\n        eventCreatedAt: dayjs().unix()\n      }\n    });\n\n    console.log(\"Response:\", res.data);\n  } catch (error) {\n\n    console.error(\"Error:\", error);\n  }\n};\n```\n\n## 추가작업) API Gateway 설정\n\n![2](./public/2.png)\n\n- API Gateway 경로에 Lambda 생성\n\n## 추가작업) Event Bridge Pipe 설정\n\n![3](./public/3.png)\n\n- BatchSize를 조절하자...\n\n## Lambda 함수 배포시, 자동으로 업데이트 \n\n```terraform\nresource \"random_uuid\" \"random\" {\n\n  keepers = {\n    always_generate = \"${timestamp()}\"\n  }\n}\n```\n\n\n## Reference \n\n- \u003ca href=\"https://registry.terraform.io/modules/zkfmapf123/vpc3tier/lee/latest\"\u003e terraform vpc3tier module \u003c/a\u003e\n- \u003ca href=\"https://registry.terraform.io/modules/zkfmapf123/ecs-fargate/lee/latest\"\u003e terraform ecs module \u003c/a\u003e\n- \u003ca href=\"https://aws.amazon.com/ko/blogs/korea/new-solution-clickstream-analytics-on-aws-for-mobile-and-web-applications/\"\u003e ClickStream  Documents \u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkfmapf123%2Fclickstream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkfmapf123%2Fclickstream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkfmapf123%2Fclickstream/lists"}