티스토리 뷰
Background
엄브렐을 이용하면 간단하게 셀프호스팅 멤풀을 구축할 수 있다. 셀프 호스팅 멤풀인 만큼 UI 를 내 맘데로 바꿔보고 싶은 마음이 들어 ui 코드를 수정하려고 봤더니 도무지 어떤 파일을 수정해야 하는지 찾을 수 없었다. 엄브렐로 호스팅되는 멤풀은 아마도 바이너리 형태로 도커에 올려져서 서비스가 되는 듯 하다.
결국 멤풀 저장소를 직접 내려받아서 멤풀 프론트엔드를 직접 구축하고 로고까지 바꿔본 경험을 공유한다.
1. mempool 저장소 다운로드
https://github.com/mempool/mempool
멤풀 코드를 로컬에 직접 내려받는다. 멤풀은 프론트엔드와 백엔드가 나눠져 있는데, 나는 ui 만 바꿀 것이므로 멤풀 프론트엔드만 로컬에서 작업을 진행하면 된다.
백엔드는 엄브렐 멤풀 서버를 그대로 이용할 수 있다.
2. api 서버 변경
멤풀 프론트는 기본적으로 셀프 호스팅 멤풀 백엔드를 바라보도록 되어 있기 때문에, 멤풀 프론트가 바라보는 api 서버 경로를 수동으로 수정해 주어야 한다. 정식으로 하자면 멤풀 백엔드도 별도로 준비를 해야하지만 이미 엄브렐 기반 백엔드가 있으므로 해당 백엔드 서버를 그대로 활용할 수 있다.
관련 코드 수정이 필요한 곳은 아래 3곳.
먼저 src/app/hosts.ts 파일 추가
src/app/services/api.service.ts 의 33 라인
src/app/services/electrs-api.service.ts 의 21 라인
src/app/services/websocket.service.ts 의 24 라인
3. 로고변경
로고 변경 코드의 위치는 아래와 같다.
4. 빌드
그리고 해당 프로젝트를 빌드한다.
npm run build
5. 서버시작
빌드가 끝나면 dist 폴더가 만들어지는데, browser 폴더를 웹루트, ko/index.html 파일을 fallback 파일로 지정하여 시작한다.
cd dist/mempool/browser
http-server-spa . ko/index.html 8080 &멤풀 프론트엔드는 앵귤러를 기반의 spa 프로젝트이기 때문에 라우팅 경로가 없을 때 fallback 파일을 읽을 수 있는 기능이 반드시 필요하다. 해당 기능을 기본적으로 지원하는 http-server-spa 를 이용하면 간편하게 서버를 시작할 수 있다.
6. 끝~
Ref.
아래 영상은 별로 도움이 되진 않았지만 혹시 필요하신 분 참고.
https://www.youtube.com/watch?v=0ctD99DvWa8