일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- Setting
- Kaikas
- 공연티켓
- nodejs
- 배포
- 라라벨
- netfunnel
- Remix
- exceljs
- Ai
- 발행
- 블록체인
- Python
- node
- 회고
- metamask
- polygon
- NextJS
- threejs
- nft
- CSS
- miniconda
- git
- Laravel
- chatGPT
- nginx
- PM2
- React
- pagination
- jquery
- Today
- Total
박주니 개발 정리
nextjs에서 netfunnel 기본제어 방법 본문
netfunnel 트래픽 제어 공식문서
설명전)
기본 제어는 주로 메인페이지에다가 적용하는데 이유는 index가 첫 도입부분인데 여기에 NFStart로 시작을 걸어두고 실제거기에서 진입수 허용 범위에 해당되는 사람들만 메인페이지에 들어올 수 있게 한다면 그것이 곧 구간제어와 비슷한 원리로 적용이 됩니다.
기본제어를 그외 다른 페이지에도 적용이 되지만 메뉴를 클릭해서 이동하는 게 아닌 링크를 수정해서 다이렉트로 들어오는 것은 막을 수가 없기 때문입니다.
기초 지식)
지금 제가 설명하는 부분은 netfunnel을 적용하는 방법이므로 최소한 nextjs component 및 page 적용은 하실 줄 아셔야합니다.
세그먼트 생성전)
기본제어 세그먼트 생성할 때 NFStart를 적용하는 url을 넣으시면 됩니다.
1. netfunnel>프로젝트>기본제어 들어가셔서 세그먼트를 생성합니다. 그리고 project key, 세그먼트 key를 확인합니다.
설명)
상단 이미지는 예시이고 project key는 좌측 상단 project name 밑에 있는 service_.. 이부분 project key이고
세그먼트 key는 우측 하단에 세그먼트 키에 적혀있습니다.
2. index component에 확보한 project key, segmentKey를 넣고 NFStart를 적용합니다. 그리고 조정한 진입수에 허용된 유저가 가는 메인페이지 url을 넣습니다.
index component
useEffect(() => {
setTimeout(() => {
NFStart(
{
projectKey: "(projectKey)",
segmentKey: "(segmentKey)",
},
function (response) {
window.location.href = "(실제 메인페이지 url)";
}
);
}, 1000);
}, []);
설명)
useEffect에 1초 설정한 이유는 조건은 맞으나 현재 NFStart로 요청하는 시간도 있어서 별도 시간을 설정하지 않으면 NFStart를 찾지 못하는 이슈가 발생됩니다. 사용해본 결과 동시접속자 10000명까지는 1초로도 충분했던 것 같은데 더 많은 경우에는 별도 설정이 필요할 것 같습니다.
3. 메인페이지 이동시 NFStop을 설정합니다.
main component
useEffect(() => {
setTimeout(() => {
NFStop(
{
projectKey: "(projectKey)",
segmentKey: "(segmentKey)",
},
function (response) {
}
);
}, 1000);
}, []);
정상 연결 확인)
정상적으로 연결이 되었으면 본인이 설정한 동시 접속자가 넘어갔을 경우에 허용된 사람 외에 다른 유저가 접속할려고 하면 하단에 이미지처럼 나올 것입니다. 그리고 현재 메인페이지 접속했을 때 세그먼트가 변동이 되면 정상적으로 연결이 된 것입니다.
기본제어 진입량 체크 원리)
NFStart를 할 때 진입 허용수 내에 해당되는 유저는 key를 받게 되고 진입량에 체크가 됩니다.
NFStop을 거치게 되면 다시 key를 반납함으로써 key 갯수는 곧 진입 허용 수에 해당되고 반납을 해야지만 대기자수가 차감되어 그 다음 차례에 있는 유저가 접속이 가능합니다.