이번 포스팅에서는 여러분과 공유하겠습니다. Cloudflare Workers를 사용하여 나만의 사용자 지정 도메인 URL 단축기를 만드는 방법. 벨트에 다른 도구를 추가하려는 웹 개발자, 큰 가격표 없이 링크를 브랜드화하려는 사업주 또는 웹 기술을 다루는 것을 좋아하는 사람이든 이 단계별 가이드는 다음을 위한 것입니다. 너.
웹 개발자이자 기술 애호가로서 저는 항상 인터넷을 더욱 효율적이고 사용자 친화적으로 만드는 작은 것들에 매료되어 왔습니다. 어느 날 유난히 길고 다루기 힘든 URL을 동료와 공유하던 중 링크를 단축하는 간단하고 개인화된 방법이 필요하다는 사실을 깨달았습니다. 물론, URL 단축 서비스가 많이 있지만 저는 좀 더 "나"처럼 느껴지는 서비스, 즉 내가 맞춤화하고 제어할 수 있는 서비스를 원했습니다.
그때 Cloudflare Workers를 사용하여 나만의 사용자 지정 URL 단축기를 만드는 아이디어를 우연히 발견했습니다.. 마치 웹 기술의 광활한 바다 속에서 숨겨진 보물을 찾는 것과 같았습니다. URL을 단축할 수 있을 뿐만 아니라 내 도메인 이름으로 무료로 단축할 수 있습니다! 이 발견에 대한 흥분은 제가 처음으로 웹 사이트를 배포했을 때의 힘찬 힘과 무한한 가능성을 떠올렸습니다.
이 발견을 더욱 흥미롭게 만든 것은 사용자 정의 도메인에서 브랜드의 짧은 링크를 생성하기 위해 Bit.ly 또는 TinyURL과 같은 인기 있는 서비스에 대한 환상적이고 무료 대안이 될 수 있다는 사실을 깨달았습니다. 많은 기업과 개인이 이런 종류의 기능을 사용하기 위해 많은 비용을 지불하지만 여기에는 한 푼도 쓰지 않고도 동일한 결과를 얻을 수 있는 방법이 있습니다.
1단계: 도메인 이름 등록(짧은 도메인 사용)
맞춤 URL 단축기를 만드는 첫 번째 단계는 도메인 이름을 등록하는 것입니다. 이는 귀하의 브랜드 짧은 링크의 기초가 될 것이므로 현명하게 선택하십시오!
완벽한 도메인을 선택하는 데 도움이 되는 몇 가지 팁은 다음과 같습니다.
- 짧게 지켜라.: URL 단축기의 핵심은 간결한 링크를 만드는 것입니다. 가능하다면 3~5자로 구성된 도메인 이름을 찾으세요. 이는 약어, 두문자어 또는 눈길을 끄는 단어일 수 있습니다.
- 기억에 남을 수 있도록: 기억하기 쉬운 것을 선택하여 입력하세요. 이렇게 하면 귀하와 다른 사람들이 단축 링크를 더 쉽게 사용할 수 있습니다.
- 귀하의 브랜드를 고려하십시오: 비즈니스 또는 개인 브랜드에 사용하는 경우 도메인을 기존 브랜드 아이덴티티에 맞춰보세요.
- 확인하기: 짧고 눈길을 끄는 도메인에 대한 수요가 높습니다. 첫 번째 선택 항목을 사용할 수 없는 경우 창의성을 발휘하거나 .io, .co 또는 .me와 같은 대체 최상위 도메인(TLD)을 고려해야 할 수 있습니다.
- TLD에 대해 생각해 보세요: .com이 인기가 있지만 다른 TLD를 피하지 마십시오. .link 또는 .click과 같은 일부는 URL 단축기에 특히 적합할 수 있습니다.
다음은 여러분에게 영감을 줄 수 있는 몇 가지 예입니다.
- abc.link
- go.io
- shrt.co
- zap.me
도메인을 선택한 후에는 도메인 등록 기관에서 구입해야 합니다. 인기 있는 옵션은 다음과 같습니다.
- Namecheap
- 에서 GoDaddy
- Cloudflare (권장 – Cloudflare Workers를 사용할 예정이므로 매우 편리합니다)
도메인은 비용이 들지만 1년에 한 번만 구매하면 되며 나머지 URL 단축기 설정은 Cloudflare Workers를 사용하여 무료로 제공됩니다.
전문가 팁: 구매를 완료하기 전에 도메인이 스팸이나 악의적인 활동과 연결되어 있지 않은지 확인하세요. Domain Tools 또는 Wayback Machine과 같은 도구를 사용하여 기록을 확인할 수 있습니다.
빛나는 새 도메인을 손에 넣었다면 다음 단계인 도메인에 Cloudflare 설정으로 넘어갈 준비가 된 것입니다. 하지만 이에 대해서는 다음 섹션에서 다루겠습니다.
2단계: 도메인에 대한 DNS 레코드 구성
이제 도메인이 준비되었으므로 DNS 구성을 설정할 차례입니다. 이 단계는 Cloudflare 작업자가 새로 등록된 도메인에서 올바르게 작동하는지 확인하는 데 중요합니다.
프로세스를 살펴보겠습니다.
1. Cloudflare에 도메인 추가
- 아직 그렇게하지 않았다면, 무료 Cloudflare 계정을 만드세요.
- Cloudflare 대시보드에서 "사이트 추가"를 클릭하고 도메인 이름을 입력하세요.
- Cloudflare는 기존 DNS 레코드를 검색합니다. 발견된 모든 기록을 삭제합니다(이메일이나 기타 중요한 서비스에 도메인을 사용하지 않는 한 해당 도메인을 유지하세요).
2. 네임서버 업데이트(도메인이 Cloudflare에 등록된 경우 이 단계를 무시하세요)
- Cloudflare는 일련의 이름 서버를 제공합니다.
- 도메인 등록 기관의 웹사이트로 이동하여 기존 이름 서버를 Cloudflare에서 제공하는 이름 서버로 교체하세요.
- 이 단계가 전 세계적으로 적용되는 데 최대 24시간이 걸릴 수 있습니다.
3. DNS 레코드 구성
- Cloudflare DNS 설정에 두 개의 새로운 A 레코드를 추가하겠습니다.
- 다음을 추가하십시오.
유형: A
이름: @
콘텐츠 : 192.0.2.1
TTL : 자동차
프록시 상태: 프록시됨 (주황색 구름 - 매우 중요)
유형: A
이름: WWW
콘텐츠 : 192.0.2.1
TTL : 자동차
프록시 상태: 프록시됨 (주황색 구름 - 매우 중요)
이 192.0.2.1 IP는 특별한 "더미" 주소입니다. 문서화 및 테스트용으로 예약되어 있어 우리의 요구에 완벽하게 맞습니다.
4. Cloudflare 프록시 활성화
- DNS 레코드에 대해 프록시 상태(주황색 구름 아이콘)가 활성화되어 있는지 확인하세요.
- 이를 통해 Cloudflare가 트래픽을 프록시할 수 있으며 Cloudflare 작업자가 작동하는 데 필요합니다.
5. 구성 확인
- 이름 서버 변경 사항이 전파되면 Cloudflare는 도메인을 "활성"으로 표시합니다.
- Cloudflare 대시보드에서 이를 확인할 수 있습니다.
여기서 중요한 점은 귀하의 도메인이 실제 웹 호스팅을 가리키지 않는다는 것입니다. 192.0.2.1 주소는 단지 자리 표시자일 뿐입니다.. 다음에 설정할 Cloudflare 작업자는 도메인에 대한 모든 요청을 가로채고 URL 단축 논리를 처리합니다.
전문가 팁: 이 설정은 웹 호스팅 비용을 지불하거나 관리할 필요가 없음을 의미합니다. Cloudflare Workers가 모든 무거운 작업을 처리하므로 이 솔루션은 무료일 뿐만 아니라 놀라울 정도로 가볍고 유지 관리가 쉽습니다.
DNS가 올바르게 구성되었으면 이제 흥미로운 부분인 URL 단축을 처리하도록 Cloudflare Worker를 설정하는 단계로 넘어갈 준비가 되었습니다.
3단계: Cloudflare 작업자 생성
이제 Cloudflare에 도메인을 구성했으므로 리디렉션을 처리할 작업자를 생성할 차례입니다. Cloudflare Workers는 최적의 성능을 위해 사용자와 가까운 에지에서 코드를 실행할 수 있는 서버리스 실행 환경을 제공합니다.
1. Cloudflare 작업자 생성
- 작업자 섹션에 액세스:
- Cloudflare 대시보드에 로그인합니다.
- 사이드바에서 '작업자' 섹션으로 이동합니다.
- 첫 번째 작업자인 경우 "서비스 만들기"를 클릭하고, 기존 작업자가 이미 있는 경우 "작업자 만들기"를 클릭하세요.
- 직원 이름:
- "bulk-redirects-handler"와 같이 작업자를 설명하는 이름을 선택합니다.
- “서비스 생성”을 클릭하여 편집기로 이동하세요.
- 작업자 스크립트 작성:
- 편집기에서 기본 코드를 리디렉션 처리기 스크립트로 바꿉니다.
기본 내보내기 {
비동기 페치(요청) {
const 리다이렉트맵 = 새로운 맵([
["google", "https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// 필요에 따라 여기에 더 많은 리디렉션을 추가합니다.
]);
const url = 새 URL(request.url);
console.log("전체 URL:", url.toString());
console.log("호스트 이름:", url.hostname);
console.log("경로명:", url.pathname);
let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
경로 = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("처리된 경로:", path);
const 위치 = 리디렉션Map.get(경로);
console.log("리디렉션 위치:", location);
// 영구 리디렉션을 위해 301로 변경
if (위치) {
return Response.redirect(location, 302);
}
// 요청이 맵에 없으면 404 또는 선호하는 폴백을 반환합니다.
return new Response(`찾을 수 없음: ${path}`, { status: 404 });
},
};
- 스크립트 이해:
- 우리는 리디렉션지도 여기에는 짧은 경로와 해당 전체 URL이 포함됩니다.
["google", "https://www.google.com?subId1=google"],
yourshorturl.com/google -> https://www로 리디렉션됩니다.google.com?subId1=google
["bing", "https://www.bing.com?subId1=bing"],
yourshorturl.com/bing은 -> https://www.bing.com?subId1=bing으로 리디렉션됩니다.
- 스크립트는 들어오는 요청을 처리하고, 경로를 추출하고, 정의된 리디렉션과 일치하는지 확인합니다.
- 일치하는 항목이 발견되면 해당 URL에 302(임시 리디렉션)를 반환합니다.
- 일치하는 항목이 없으면 404 Not Found 응답을 반환합니다.
- 작업자 테스트:
- Cloudflare 대시보드의 "빠른 편집" 기능을 사용하여 작업자를 변경하고 테스트하세요.
- 제공된 HTTP 테스트 도구를 사용하여 요청을 시뮬레이션하고 작업자가 어떻게 응답하는지 확인할 수 있습니다.
- 작업자 배포:
- 테스트가 만족스러우면 '저장 및 배포'를 클릭하여 작업자를 활성화하세요.
- 작업자 경로 설정:
- 배포 후 작업자의 "트리거" 탭으로 이동합니다.
- 다음과 같이 도메인과 일치하는 경로를 추가하세요. *recommends.link/*.
- 이렇게 하면 도메인에 대한 모든 요청이 이 작업자에 의해 처리됩니다.
- 설정 확인:
- 몇 가지 리디렉션 경로에 액세스해 보세요(예: https://recommends.link/url-shortener-guide) 예상대로 작동하는지 확인합니다.
- Cloudflare 대시보드의 작업자 로그를 확인하여 콘솔 출력을 확인하고 경로가 올바르게 처리되고 있는지 확인하세요.
4단계: 추가 사용자 정의(선택 사항)
Cloudflare KV를 사용한 동적 리디렉션
리디렉션 시스템을 더욱 유연하고 쉽게 관리할 수 있도록 Cloudflare KV(키-값) 스토리지를 사용하여 리디렉션을 저장할 수 있습니다.
KV 네임스페이스를 생성합니다:
- Cloudflare 대시보드에서 작업자 > KV로 이동합니다. "네임스페이스 생성"을 클릭하고 이름을 지정합니다(예: "REDIRECT_MAP").
- 작업자 설정으로 이동합니다. "KV 네임스페이스 바인딩"에서 새 바인딩을 추가합니다. KV 네임스페이스를 선택하고 변수 이름(예: REDIRECTS)을 지정합니다.
기본 내보내기 {
비동기 페치(요청, 환경) {
const url = 새 URL(request.url);
const 경로 = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const 위치 = env.REDIRECTS.get(path)을 기다립니다;
if (위치) {
return Response.redirect(location, 301);
}
return new Response(`찾을 수 없음: ${path}`, { status: 404 });
},
};
이제 작업자 코드를 변경하지 않고도 KV 스토어를 수정하여 리디렉션을 추가, 업데이트 또는 제거할 수 있습니다.
매개변수화된 리디렉션
리디렉션에 동적 매개변수를 허용합니다.
기본 내보내기 {
비동기 페치(요청, 환경) {
const url = 새 URL(request.url);
const [경로, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
위치 = 대기 env.REDIRECTS.get(경로);
if (위치) {
// 자리표시자를 실제 매개변수로 대체합니다.
params.forEach((param, index) => {
위치 = location.replace(`{${index}}`, param);
});
return Response.redirect(location, 301);
}
return new Response(`찾을 수 없음: ${path}`, { status: 404 });
},
};
이 설정을 사용하면 "product": "https://mystore.com/item/{0}/details"와 같은 KV 항목이 있고 이를 다음과 같이 사용할 수 있습니다. yourshortlink.com/product/12345.
클릭 추적 및 분석
리디렉션 이벤트를 기록하여 기본 분석을 구현합니다.
기본 내보내기 {
비동기 페치(요청, 환경) {
const url = 새 URL(request.url);
const 경로 = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const 위치 = env.REDIRECTS.get(path)을 기다립니다;
if (위치) {
// 리디렉션 이벤트를 기록합니다.
wait env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
return Response.redirect(location, 301);
}
return new Response(`찾을 수 없음: ${path}`, { status: 404 });
},
};
사용자 정의 오류 페이지
일반 텍스트 404 응답 대신 사용자 정의 HTML 페이지를 반환합니다.
const notFoundPage = `
링크를 찾을 수 없습니다
body { 글꼴 계열: Arial, sans-serif; 텍스트 정렬: 중앙; 패딩 상단: 50px; }
이런! 링크를 찾을 수 없습니다
찾고 있는 짧은 링크가 존재하지 않습니다.
`;
// 가져오기 함수에서:
새 응답 반환(notFoundPage, {
상태: 404,
헤더: { '콘텐츠 유형': 'text/html' }
});
속도 제한
남용을 방지하기 위해 기본 속도 제한을 구현합니다.
기본 내보내기 {
비동기 페치(요청, 환경) {
const ip = request.headers.get('CF-Connecting-IP');
const rateLimitKey = `ratelimit:${ip}`;
const currentRequests = parsInt(await env.REDIRECTS.get(rateLimitKey) || '0');
if (currentRequests > 100) { // 분당 요청 100개 제한
return new Response('속도 제한 초과', { status: 429 });
}
wait env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
// 리디렉션 로직의 나머지 부분은 여기에 있습니다.
},
};
A / B 테스트
리디렉션에 대한 간단한 A/B 테스트를 구현합니다.
기본 내보내기 {
비동기 페치(요청, 환경) {
const url = 새 URL(request.url);
const 경로 = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const locationA = env.REDIRECTS.get(`${path}_A`)를 기다립니다.
const locationB = env.REDIRECTS.get(`${path}_B`)을 기다립니다.
if (위치A && 위치B) {
const 위치 = Math.random() < 0.5 ? 위치A : 위치B;
return Response.redirect(location, 301);
}
// A/B 테스트가 설정되지 않은 경우 일반 리디렉션으로 대체
const 위치 = env.REDIRECTS.get(path)을 기다립니다;
if (위치) {
return Response.redirect(location, 301);
}
return new Response(`찾을 수 없음: ${path}`, { status: 404 });
},
};
이러한 사용자 정의 및 확장은 대량 리디렉션 시스템에 중요한 기능을 추가하여 시스템을 더욱 유연하고 강력하며 유익하게 만듭니다. 이러한 각 기능은 특정 요구 사항과 사용 사례에 따라 더욱 구체화되고 확장될 수 있습니다.
요약: Cloudflare Workers를 사용하여 사용자 지정 링크 단축기 만들기
이 블로그 게시물 전반에 걸쳐 우리는 Cloudflare Workers를 사용하여 강력하고 유연한 사용자 지정 URL 단축기를 만드는 방법을 살펴보았습니다. 이 솔루션은 대규모로 짧은 링크를 생성하는 무료이고 효율적인 접근 방식을 제공합니다.
TL; DR :
- Cloudflare Workers는 전역 배포 및 짧은 대기 시간으로 사용자 지정 리디렉션 논리를 구현하기 위한 서버리스 플랫폼을 제공합니다.
- 적절한 DNS 구성과 작업자 경로 설정은 사용자 지정 도메인을 작업자에 연결하는 데 중요합니다.
- 간단한 JavaScript 기반 작업자는 복잡한 리디렉션 시나리오를 효율적으로 처리할 수 있습니다.
- Cloudflare의 키-값(KV) 저장소를 활용하여 동적이고 쉽게 관리할 수 있는 리디렉션 맵을 생성할 수 있습니다.
- 매개변수화된 리디렉션, 클릭 추적, 사용자 정의 오류 페이지, 속도 제한, A/B 테스트와 같은 고급 기능을 Worker 생태계 내에서 구현할 수 있습니다.
- 이 시스템은 기존 시스템에 비해 상당한 이점을 제공합니다. 리디렉션 방법, 향상된 성능, 간편한 관리 및 향상된 유연성을 포함합니다.
우리가 구축한 솔루션은 다음과 같은 여러 가지 이점을 제공합니다.
- 확장성: 성능 저하 없이 수백만 건의 리디렉션을 처리합니다.
- 유연성: 핵심 로직을 변경하지 않고도 리디렉션을 쉽게 추가, 수정, 제거할 수 있습니다.
- 퍼포먼스: 전 세계적으로 빠른 리디렉션을 위해 Cloudflare의 글로벌 네트워크를 활용합니다.
- 맞춤설정으로 들어간다: 분석 및 A/B 테스트와 같은 고급 기능을 허용합니다.
- 비용 효율성: 서버리스 아키텍처를 활용하여 잠재적으로 호스팅 비용을 절감합니다.
- 무료 대안 Bit.ly와 같은 인기 있는 서비스나 너의 사용자 정의 도메인에 브랜드 짧은 링크를 생성합니다.
이제 Cloudflare Worker 기반 리디렉션 시스템의 성능과 유연성을 이해했으므로 이를 실행에 옮길 차례입니다.
- 아직 가입하지 않았다면 Cloudflare 계정에 가입하고 Workers 플랫폼을 숙지하세요.
- 귀하의 브랜드 짧은 링크 또는 대량 리디렉션을 위해 이 시스템을 구현하십시오.
- 귀하의 특정 요구 사항에 맞게 시스템을 맞춤화하기 위해 논의한 고급 기능을 실험해 보십시오.
- 아래 댓글 섹션에서 경험을 공유하거나 질문하십시오. 귀하의 통찰력은 커뮤니티의 다른 사람들에게 도움이 될 수 있습니다!
- 고급 사용 사례나 사용자 지정 구현을 원하시면 Cloudflare Workers 전문가에게 문의하거나 컨설팅 서비스를 이용해 보세요.
호기심을 갖고, 계속 학습하고, 주저하지 말고 Cloudflare Workers와 같은 도구를 사용하여 가능한 것의 한계를 뛰어넘으세요.
