재시민

배경

오랜만에 쭈꾸미 집을 들려 안부 인사를 묻고 웹사이트는 문제 없냐 물어봤다. 그런데 직원 핸드폰에서는 접속이 잘되는데 가끔 외국인 핸드폰에서는 404 에러가 뜬다고 한다. 아니 이런.. 그게 무슨 말이야?! 왜지 왤까.. 집에가면서 계속 생각을 해봤고 아무래도 vercel 에서 해외 IP 차단을 한 것 일 수도 있다고 생각이 들었다.

부랴부랴 집에 와서 vercel 에서의 내 프로젝트를 확인해 오류 로그를 보려고 하니 아뿔싸 분석기는 따로 import 해서 layout.tsx 에 넣어야 작동을 한다는 것!?

바로 설치해.

Step 1 : npm 설치

npm i @vercel/analytics

위 명령어를 실행하면 자동으로 패키지가 설치된다.

무이스~! 아주 잘 설치가 됐군요

Step 2 : Layout.tsx 에 컴포넌트를 넣는다.

Layout.tsx 에 위처럼 Analytics 를 불러온다.

이후에 body 태그 안에 예쁘게 붙여 넣는다.

Step 3 : Publish

git에 저장하면 자동으로 deploy!

https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app

위 사진처럼 이제 방문객을 확인할 수 있다.

그런데..

이제 해외 IP 에서 웹 사이트를 접속해보려고 VPN 을 이용해 접속해보았다. 그런데 오류가 시뮬레이션이 되지 않았다...

도대체 무엇이 문제일까..

지속적인 로그 확인을 통해 지켜보아야겠다.

오픈톡방에 눈에 띄는 한 채팅

What? 나의 쭈꾸미 메뉴 사이트는 vercel 로 배포가 되어있는데 링크를 타고 들어가보았다.

대충 알고보니 LG uplus 가 해당 도메인을 차단한듯 보인다. 그간 무슨 문제가 많았던 vercel .. 차단 엔딩이라니.. 언제 복구가 되려나? 당장 서비스가 완성되면 바로 사용해야하는데..

https://www.youtube.com/shorts/yWdFwIlsIqc

제로초님이 설명해주신 영상 참고해보자

나에게 선택지는 두 가지가 있다.

1. 도메인 구입 후 적용
2. 새로운 사이트에서 배포

도메인 구입

일단 나의 서비스도 아닐 뿐 더러 AWS 로 이것저것 귀찮게 해야하는게 싫었다. 또, 도메인 구입비용도 드는게 좀 그래서 선택하지 않았다.

새로운 사이트 배포

결국, 새로운 사이트에 배포를 하기로 결정했고, 저번에 한 번 이용한 적이 있는 Netlify에 배포하기로 결정했다.

vercel 과 비슷하게 깃헙과 연동 후 배포를 원하는 리파지터리를 선택하면 알아서 배포가 된다.

배포완료