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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
