실제 사용 이미지

navidrome official site navidrome docker docs

navidrome은 오픈소스 음악 서버 및 스트리머 서비스 입니다 설치를 하게 되면 웹플레이어로서 동작을 하는 그런 친구입니다

물론 서버로도 동작하기 때문에 third-party 어플리케이션에서 url를 입력하게 되면 해당 리소스를 가져와서 사용도 가능 합니다

navidrome은 저에게 익숙한 docker를 활용 합니다

제가 셋팅 한 docker compose는 아래와 같아요

services:
  navidrome:
    image: deluan/navidrome:latest
    ports:
    # 포워딩 할 포트는 자유롭게 변경
    # 뒤에 있는 포트는 변경 X
    # 포워딩 포트로 web 접근
      - "4533:4533"
    restart: unless-stopped
    volumes:
      - "설정파일 위치:/data"
      - "음악이 있는 위치:/music:ro"

Custom configuration은 navidrome.toml을 통해 configuration 설정을 해줄 수 있는데 저의 경우엔 transcoding cache size나 Scanner schedule 설정은 추후 적용 예정이라 별도로 주지않았습니다

이걸 실행 후 해당 포트로 접속하면 계정을 생성하라고 합니다 초기화면에서 계정 생성 후 본 페이지로 들어가면 요런 페이지가 나오면 성공 입니다 음원의 경우 navidrome이 볼륨 마운트를 시킨 위치의 곡들을 전부 자동으로 읽습니다

이제 앱과 서버를 연결 해줄 차례인데 앱으로는 amperfy 라는걸 채택 했습니다 앱스토어에서 무료이기도 하고 ui가 깔끔한게 마음에 들어서..

amperfy github

저는 사용중인 proxy manager와 domain이 있어서 navidrome의 포트와 domain을 연결 해주었습니다

URL은 navidrome이 설치 된 서버의 ip 또는 도메인을 넣어주면 되고 계정의 경우 navidrome 초기화면에서 생성했던 계정을 입력하면 됩니다

로그인이 성공되면 amperfy가 navidrome 서버와 통신하면서 곡을 읽어옵니다

이후엔 스트리밍 앱 사용하는 것 처럼 쓰시면 됩니다!

홈페이지 : Bestdori

현재 BanGDream! Girls Band Party 라는 게임의 대부분의 정보를 제공해주고 있는 사이트 입니다. 캐릭터며, 카드며, 의상이며, 곡이며 전부 다 열람이 가능합니다.

BestdoriAPI?

앞서 설명드린 Bestdori의 개발자가 제공하는 API가 있습니다.

해당 API는 Bestdori-Github 로 소스코드가 공개 되어있고 Github Pages를 사용하여 docs를 퍼블리싱까지 해둔 것으로 확인 됩니다. Bestdori-api docs

사용방법

해당 api는 python 모듈을 설치하여 사용하게 됩니다.

# pip 모듈 설치
pip3 install bestdori-api

# 해당 모듈을 사용하려면
from bestdori.post import Post # 또는 bands ... char ... events 등등

# post의 데이터를 불러오는 예제
def main() -> None:
    # 게시판 id를 Post 함수로 넘겨서 값을 받음
    p = Post(id='111533')
    # 받은 값의 디테일은 get_details()를 호출하여 추출
    info = p.get_details()
    print(info)

main()

# https://docs.bestdori.winsov8.win/fast-start

이걸 어떻게 사용 할 것인가?

기존에는 Swagger api docs에서 찾은 BanGDream database unofficial api (링크) 를 활용하여 게임 데이터를 다루고 있었는데 Bestdori 데이터 형식을 파악한 이후 방향성을 잡을 계획 입니다.

+) NestJS로 API서버를 구성했으나 해당 api 이용을 위해 FastAPI로 변경 할 계획 입니다...ㅠㅠ 게임 정보쪽 백엔드와 뱅드림 관련 정보쪽 백엔드가 분리 되어있어서 그나마 다행인가 싶은 순간이네요

집 안에서까지 광고를 봐야할까

adguard Home

광고차단 application으로 유명한 adguard의 오픈소스 소프트웨어 입니다 관심을 갖게 된 계기는 adguard 유료의 기기 제한이 3대여서 입니다... 너무 적어요 계속 구입하자니 adguard 홈페이지에서 계정을 변경해가며 기기 등록 및 관리하는게 귀찮기도 하고 해서 docker image가 있으면 컨테이너로 돌리면 되지않을까? 싶은 생각에 적용을 하게 되었습니다

docker

Docker와 Docker compose가 설치 되어있다는 전제하에 읽어주세요

해당 오픈소스 소프트웨어는 docker image가 있습니다 [Docker hub - Adguard Home] (https://hub.docker.com/r/adguard/adguardhome) 에서 해당 image를 확인 할 수 있어요 저같은 경우 해당 image를 docker-compose에 넣어서 latest로 pull 받고 컨테이너를 만들게끔 해두었습니다

아래는 해당 yml 파일 이에요

# docker-compose.yml
services:
    adguardhome:
        image: adguard/adguardhome
        container_name: adguardhome
        # always와 unless-stopped는 사용성에 맞게 적용합시다
        restart: unless-stopped
        volumes:
          # 각종 설정값을 백업하기 위한 볼륨 마운트
          # 장비 경로 : docker container 내부 경로 입니다
          - /~~/work:/opt/adguradhome/work
          - /~~/conf:/opt/adguardhome/conf
        ports:
          - "53:53/tcp"
          - "53:53/udp"
          - "853:853/tcp"
          # ???? <-- 본인이 적용하고자 하는 port 입력
          - "????:9393/tcp" # adguard home의 컨트롤 패널 접속 port
          - "????:3000/tcp" # 초기 셋업 port

docker compose up -d

사용법

해당 docker container가 돌아갈 장비의 로컬 ip는 static하게

장비에 별다른 네트워크 수정을 하지 않았다면 대부분의 장비는 사설 ip를 AP의 DHCP 서버로부터 할당받게 됩니다 이 경우 adguard home이 돌아갈 장비의 ip가 변경될 경우 작동하지 않는 상황이 발생하기 때문에 해당 장비의 ip는 꼭 정적할당을 해줘야 합니다

adguard home 공유기 적용 순서

1. adguard Home이 돌아가는 장비의 IP를 고정 시킨다
2. 본인이 사용하는 공유기의 웹 설정에 들어간다
3. 고정시킨 IP를 공유기의 인터넷 설정 정보에서 기본 DNS 주소에 넣어준다 << 이 부분 때문에 정적할당을 해야합니다
4. 1 (선택)공유기를 재시작 해준다

이와 같이 순서를 지키게 된다면 해당 container를 통해 adguard 필터가 공유기를 사용하는 모든 장비에 적용됩니다

adguard home 설정

container를 정상적으로 올리고 dns를 설정 한 이후에는 해당 application에 접근하여 광고차단 filter를 적용해줄 시간 인데요 링크에 장비ip:초기셋업 port를 입력해서 접속 해줍니다

본인이 사용할 계정을 입력해주고 간단한 셋업을 하고나면 아래와 같이 adguard 패널 사이트가 나오게 됩니다 여기서 필터 - DNS 차단 목록을 누른 다음 차단 목록 추가를 눌러서 원하는 항목을 추가해주면 자동으로 적용되며 설정이 됩니다

설정이 끝나면

이제 해당 공유기에 연결된 장비는 모두 광고차단이 될 것 입니다 이걸 활용하면 공유기에 따라 vpn을 설정하여 집 네트워크에 연결한다면 밖에서도 사용 가능하니 굉장히 유용하게 사용할 수 있겠습니다 저의 경우 iptime을 사용중이라 wireGuard를 이용하여 해당 dns를 사용하고 있는데 정말 편리합니다 관리 할 걱정을 덜어내서 만족스러워요 :)

resource 폴더 밑에 있는 공통 어플리케이션 속성들을 지정하는 파일인 application.properties 내부 속성에 커스텀하고자 하는 property를 지정하는 전략 입니다

사용하면 어떤 부분이 좋을까?

custom property는 두번째로 사용하게 되었는데요 사용하면서 느낀 바로는 ** 상수값들의 관리 용이성 ** 이라고 생각 합니다 처음 써봤을 때 '학생 때 이걸 적용 해볼 생각을 왜 못했을까..' 하며 과거 회상을 했었습니다

지금은 신규 Spring 프로젝트를 진행하게 된다면 경우에 따라 선적용 할 거 같습니다

이 프로젝트에 어떻게 활용 하고 있냐면

webConfig 규칙 중 cors에 allow-origins을 대입할 때 prod, dev properties를 구분하여 값을 가져오게 적용 하고 있습니다 dev에선 전체 허용, prod에선 NginX만 허용하도록 하는 방식으로 말이죠

Code

Kotlin 기준 아래와 같이 작성해서 사용 중 입니다

/**
* PropertyValue
* Allow 해줄 Origins를 application.properties로 부터 가져와야 합니다
*/
@Getter
@Setter
class AllowOrigins {
    // origins는 1 또는 n개가 될 수 있으니 List타입으로 지정 해줍니다
    var allowedOrigis: List<String> = emptyList()

    override fun toString(): String {
        // 여기서는 xxx.yyy=~~~ 중 yyy에 해당하는 부분을 작성합니다
        return "AllowOrigins(allowedOrigins=$allowedOrigins)"
    }
}

위와 같이 Property Value를 작성한 것을 토대로 CustomProperty Component를 제작 합니다

@Component
class CustomProperty {
    // prefix는 xxx.yyy=~~ 중 xxx에 해당되는 부분을 작성 합니다
    @Bean
    @ConfigurationProperties(prefix = "[custom name]")

    // allowedOrigins는 위에서 생성한 객체를 반환 해줍니다
    fun allowedOrigins(): AllowOrigins {
        return AllowOrigins()
      }
}

제작이 되고나면 아래와 같이 활용 해볼 수 있습니다

// Spring boot WebConfig에서의 활용법
@Configuration
@EnableWebFlux
class WebConfig: WebFluxConfigurer {
    // allowedOrigins를 가져와서 변수에 주입
    private val allowedOrigins: String = AllowOrigins().allowedOrigins.toString()

    override fun addCorsMappings(reg: CorsRegistry) {
        registry.allowedOrigins(allowedOrigins)
                .allowedOriginPatterns("*")
                // 그 외 여러 CORS 매핑 옵션을 추가 합니다
    }
}

해당 값들은 application.properties 내부에 xxx.yyy="~" 이런식으로 작성된 값을 가져오기 때문에 ConfigurationProperties(prefix = "xxx") 그리고 yyy에 해당하는 PropertyValue 두 값의 매칭에 신경을 써주면 좋습니다

일치하지 않는다면 IDE에서 경고를 띄워주기 때문에 큰 문제는 아니지만, 한번에 되면 기분이 좋으니까요 👀

한마디

이 프로젝트를 진행하며 느낀 CustomProperty가 가지는 이점으로는 Develop, Production에서 다르게 쓰여야 할 상수값들의 관리 라고 생각합니다 처음 사용했을 때 보다 조금 더 친숙해지려고 이런저런 검색을 하다보니 응용을 어떻게 하면 좋을까 하는 고민도 하게 되네요 :)

뱅드림 걸즈밴드 파티의 각종 정보를 제공해주는 사이트 입니다

글을 작성하는 2025-06-30 기준 뱅드림은 벌써 10년을 넘어가고 있는 일본회사인 부시로드의 미디어 믹스 프로젝트 입니다 한국에서는 모 기업이 운영을 했지만 ..... 결국 게임이 섭종을 맞이한 ... 하지만 여전히 즐기는 사람이 많은, 그런 IP 라고 할 수 있겠습니다

최근 1~2년간 MyGO!!!!!, Ave Mujica를 선보이며 다시금 입지를 다지려는 행보를 보이는 부시로드 입니다 한국에서 애니를 보고 관심을 가져주는 분들이 조금씩 생기고 즐기는걸 공유 하는 사람들이 생기니 덩달아 저도 재밌게 즐기는 요즘 입니다

그래서 이걸 왜 만드는데?

앞서 얘기했듯 이 IP로 제작된 게임은 한국서버가 없습니다 그말인 즉슨, 일본어를 하지 못하면 접근하기 어렵다는 뜻이 되겠지요 저 또한 일본어에 강하지 않고 저와 비슷한 사람들이 많을거라 생각이 들어서

'그러면.. 여러 정보를 제공해주는 정보 제공 팬 사이트를 한국어로 개발 하면 되는거 아니야?'

에 도달하게 되어 개발하자! 마음 먹고 진행하고 있습니다

그러면 개발일지 주기는?

비정기적으로 업로드 할 예정입니다 회사에서의 개발 업무랑 병행 하면서 진행 하고 있기때문에 제약이 있는 상황 입니다 ^^;

무슨 기술스택을 쓰고 있는지 알려줘

게시글 작성 전 부터 개발은 이미 하고 있었습니다 👀 사용하고 있는 기술스택은 아래와 같아요

Front-end

• Vue3 w.typescript
• Vite + Quasar

Back-end

• NestJS w.typescript : BanGDream! DB API
• Spring WebFlux w.Kotlin : Main API

DB

• MongoDB

etc..

• Docker w.Portainer : Docker-network 활용
• NginX : Front-end 배포용

끝으로 ...

뱅드림 노래들 좋으니까 한번씩 검색해서 들어주세요 밴드 사운드 좋아하면 괜찮을거에요