> 웹 프론트엔드 > JS 튜토리얼 > Cloudflare에서 실행되는 전체 스택 웹 보관 도구를 구축했습니다.

Cloudflare에서 실행되는 전체 스택 웹 보관 도구를 구축했습니다.

Susan Sarandon
풀어 주다: 2024-11-12 04:39:01
원래의
400명이 탐색했습니다.

I built a full-stack web archive tool running on Cloudflare

프로젝트 주소: https://github.com/ray-d-song/web-archive

이 도구를 구축하는 이유

저는 오랫동안 ArchiveBox를 애용해 왔습니다. ArchiveBox는 매우 훌륭한 웹 보관 도구이지만 자체 호스팅이 필요하고 서버 요구 사항이 높습니다(헤드리스 브라우저 필요). 이전에 라즈베리파이를 사용했는데 성능이 좋지 않았습니다.

그리고 로그인이 필요한 x 및 Medium과 같은 웹사이트의 경우 ArchiveBox가 토큰이나 쿠키를 수동으로 구성해야 하는데 이는 번거로운 작업입니다.

그래서 셀프 호스팅, 헤드리스 브라우저, 서버 요구 사항이 없고 크로스 플랫폼이 가능한 웹 보관 도구가 있을 수 있을까? 그런 다음 언제 어디서나 모든 기기에서 보관된 페이지에 액세스할 수 있습니다.

Cloudflare를 사용해야 하는 이유

Cloudflare의 Workers 서비스는 매우 강력하고 무료이며, D1 데이터베이스와 R2 스토리지 버킷이 풍부하여 이 도구를 구축하는 데 매우 적합합니다.

더 중요한 것은 Cloudflare의 에코시스템이 완벽하고 원클릭 배포와 데이터 마이그레이션을 지원한다는 것입니다. Cloudflare의 글로벌 CDN 서비스도 이용 가능합니다.

이 도구는 무엇을 할 수 있나요?

  • [x] 폴더 분류
  • [x] 페이지 미리보기 이미지
  • [x] 제목 키워드 검색
  • [x] 쇼케이스, 캡쳐한 페이지를 공유하세요
  • [x] 모바일 지원
  • [x] 태그 분류 시스템
  • [x] 읽기 모드

작동 원리

웹 아카이브는 다음과 같은 부분으로 구성됩니다.

  • 브라우저 확장: 페이지를 웹페이지 스냅샷으로 저장하고 서버에 업로드합니다.
  • 서버: 브라우저 확장 프로그램이 업로드한 스냅샷과 메타데이터를 받아 데이터베이스와 스토리지 버킷에 저장합니다.
  • 웹 클라이언트: 스냅샷을 쿼리하고 표시합니다.

SingleFile의 오픈 소스 코드를 사용하여 페이지를 단일 HTML 파일(이미지 및 비디오 포함)로 저장했습니다.

서버는 메타데이터 저장을 위한 D1 데이터베이스와 스냅샷 저장을 위한 R2 스토리지 버킷을 갖춘 Cloudflare의 Workers 서비스를 완전히 기반으로 합니다.

인터페이스 수가 적지는 않지만 ORM은 사용하지 않았으나 실제로 프리즈마와 드리즐을 사용해보았는데 배포에 많은 문제를 일으키기 때문에 결국 사용하지 않게 되었습니다.

웹 클라이언트는 React, Vite, TailwindCSS, shadcn/ui로 구축되었으며 패키지 크기는 1.5MB로 놀라울 정도로 작습니다. 패키징된 제품은 서버의 자산 폴더에 내장되므로 서버 배포 시 별도로 배포할 필요가 없습니다.

제한사항

저는 Cloudflare의 무료 서비스를 정말 좋아하지만 몇 가지 제한 사항이 있습니다.

  • 단일 요청의 CPU 계산 시간은 10밀리초를 초과할 수 없으며, 그렇지 않으면 강제 종료됩니다. (유료계정이 30초라니 깜짝 놀랐어요?)
  • 메모리 사용량은 256MB를 초과할 수 없으며, 초과할 경우 강제 종료됩니다.

이러한 제한은 크롤링 중 ssr이나 dom 구문 분석 등 웹사이트 구축에 어느 정도 영향을 미쳤습니다.

그래도 어찌됐든 감사합니다, Cloudflare!

위 내용은 Cloudflare에서 실행되는 전체 스택 웹 보관 도구를 구축했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿