사진을 추가하면 게임 목록이나 주소만으로 전달하지 못한 오락실의 모습을 보여줄 수 있다. 한편 사진은 보관할 때뿐 아니라 이용자에게 전송할 때도 자원을 쓴다. 예를 들어 등록한 사진 수가 같아도 파일 하나가 크면 화면을 여는 데 필요한 전송량도 늘어난다.

지금은 무료 호스팅의 사용량을 줄이기 위해 이미지를 선별하고 화질을 낮추고 있다. 이 방법만으로 사진을 계속 늘리기는 어려워 Next.js와 PocketBase를 VPS로 옮길 준비를 시작했다.

이미지의 저장 공간과 전송량

저장 공간은 서버에 파일을 보관하는 데 필요한 용량이고, 전송량은 그 자료를 이용자에게 보내는 데이터의 양이다. 사진이 늘면 두 항목이 함께 영향을 받는다. 작은 이름이나 주소 데이터와 같은 규모로 생각해서는 앞으로의 사용량을 가늠하기 어렵다.

Vercel의 무료 사용량에도 여유가 줄었고, 무료 백엔드의 5GB 저장 한도 중 약 3.5GB를 넘겨 사용하고 있다. 이는 현시점의 상황이다. 아직 빈 공간이 있어도 사진을 추가할 때마다 같은 방식으로 늘어난다면 그 이후의 보관 방법을 검토해야 한다.

flowchart TD
    accTitle: 사진 증가와 무료 한도의 충돌
    accDescr: 저장과 전송 사용량의 증가는 이미지 선별과 화질 축소로 이어졌다.
    A["오락실 사진 증가"] --> B
    B["저장과 전송 사용량 증가"] --> C
    C["이미지 선별과 화질 축소"]

이미지 압축과 이전 대상의 검토

당장 할 수 있는 대응은 남길 사진을 고르고 파일을 작게 만드는 것이다. 저장과 전송 부담을 함께 줄일 수 있지만, 입구나 기체 배치를 보여주는 사진이 흐려지면 사진을 마련한 효과도 작아진다.

그래서 압축에만 의존하지 않고 서버를 직접 운영하는 방법을 조사하기로 했다. 대상은 화면을 제공하는 Next.js와 데이터를 다루는 PocketBase다. 현재는 이전할 곳과 구성을 검토하는 단계이며, 이전을 마친 상태는 아니다.

flowchart TD
    accTitle: VPS 이전의 조사 대상
    accDescr: 공통 진입점에서 화면 요청과 데이터 요청을 나누는 구상을 조사한다.
    A["외부 요청"] --> B
    B["리버스 프록시 구상"] --> C
    C["Next.js와 PocketBase"]

VPS와 리버스 프록시

VPS는 가상으로 나눈 서버를 빌려 필요한 프로그램을 실행하는 방식이다. 관리형 호스팅보다 서비스 배치를 직접 고르기 쉬워지지만, 요청이 어디에 도착하고 어떤 프로그램으로 전달되는지도 이해해야 한다. IP와 TCP를 공부하고 있는 이유다.

검토 중인 구성은 공통 진입점에서 요청을 받아 화면 요청은 Next.js로, 데이터 요청은 PocketBase로 보내는 방식이다. 이 입구에서 요청을 전달하는 장치를 리버스 프록시라고 부른다. 도식은 이 구상을 정리한 것이며 확정한 배포 구성이나 주소를 뜻하지 않는다.

flowchart TD
    accTitle: 선택권과 책임
    accDescr: 자원 선택권을 얻으려면 실행과 연결 및 장애 대응 책임도 준비해야 한다.
    A["VPS 운영 검토"] --> B
    B["자원과 서비스 배치 선택"] --> C
    C["실행과 연결 및 장애 대응 준비"]

서버 운영의 준비

자원을 직접 선택하면 사진의 양과 화질을 조절할 여지가 커진다. 그렇지만 VPS에도 저장과 전송의 제약이 있으므로, 서버를 빌렸다고 이미지 비용이 사라지는 것은 아니다.

프로그램의 실행 상태와 연결, 장애가 났을 때 확인할 지점도 직접 관리하게 된다. 지금 하는 일은 그 운영 범위를 알아보고 준비하는 것이다. 사용량 문제를 해결하려고 옮기는 만큼 파일의 위치와 계속 제공할 수 있는 구성을 함께 검토하려 한다.

참고: 뮤즈캣 엔지니어링 기록.