- 서버리스(Serverless)는 실제로 서버가 없다는 것을 의미하지 않으며, 단지 다른 사람의 서버를 사용한다는 것을 의미함
- ServerFree 아키텍처는 백엔드 서버, 컨테이너, 가상 머신 없이도 코드를 실행할 수 있는 개념을 제안
- 이 아키텍처에서는 브라우저 내에서 코드를 실행하며, 정적 파일을 제공하는 서버만 필요함
- 웹 어플리케이션을 브라우저에서 실행할 수 있도록 패키징하는 방법을 시연
- 프론트엔드 코드는 평소와 같이 빌드되며, 백엔드는 패키징되어 웹 워커에서 실행되고, 데이터베이스는 WebAssembly로 컴파일된 SQLite를 사용함
아이디어
- 콘텐츠 마케팅을 통해 데모 프로젝트를 만들기로 결정하고, 해커 뉴스에서 영감을 받아 개인 정보 보호 측면에서 주목받는 잡 신청 추적기를 만들기로 함
- 이 프로젝트는 웹 워커, 문서 불일치, 누락된 문서 등의 문제를 해결하면서 새로운 아키텍처를 개발하는 과정으로 발전함.
클래식 아키텍처로 첫 시도 (쉬운 부분)
- SubZero CLI를 사용하여 데이터베이스 스키마를 변경하고 권한을 설정하여 앱을 구축함.
- CRUD 및 필터링 기능을 제공하지만, 데모보다는 제품에 가까운 UI 사용자 정의를 진행함.
- 왼쪽에 낭비되는 공간을 줄이기 위해 사이드바를 상단으로 이동함.
- "Opportunities" 페이지에 Show, Create, Edit, List 컴포넌트를 추가함.
- 백엔드 코드를 건드리지 않고도 복잡한 필터링 흐름을 구현함.
- 대시보드를 개선하여 "열린 기회", "평균 진행률 / 신청", "신청 후 평균 일수" 등의 관련 데이터를 표시함.
- 프로덕션 배포를 위해 도커 이미지를 빌드하고 데이터베이스를 시드하며 컨테이너를 실행함.
- SQLite 데이터베이스 파일을 컨테이너 외부에 유지하여 데이터를 지속적으로 보존함.
- Turso DB를 사용하여 SQLite 데이터베이스의 지속성과 백업 문제를 해결함.
ServerFree 아키텍처로 전환 (재미있는 부분)
- SQLite를 WebAssembly로 컴파일하여 데이터베이스로 사용함.
- OPFS(Origin-Private FileSystem)를 사용하여 데이터를 저장함.
- 백엔드 코드를 웹 워커에서 실행하여 UI 스레드의 차단을 방지함.
- Express를 itty-router로 대체하여 브라우저 호환성을 확보함.
- 서비스 워커를 사용하여 UI와 백엔드 간의 요청을 가로채고 처리함.
- 메인 스레드를 통해 서비스 워커와 웹 워커 간의 안정적인 통신을 구현함.
- 메인 스레드(UI)에서 인증 관련 코드를 제거함.
- 사용자의 컴퓨터에서 데이터를 저장하고, 서버로 전송되지 않음.
결론
- 이 아키텍처는 특히 고객 데이터가 독립적이고 사용자 간에 공유할 필요가 없는 경우에 유용함.
- 백엔드 서버가 없어 호스팅 비용이 절감되고, 데이터 프라이버시가 강화되며, 보안이 향상됨.
-
Electric 과 같은 도구를 사용하여 클라이언트에 데이터베이스의 일부를 동기화하고 일부 요청/쿼리를 브라우저에서 처리할 수 있음