muc

muc

음악 URL 변환기

다양한 음악 스트리밍 서비스에서 URL을 취하고 다른 스트리밍 서비스에서 동일한 트랙을 보여줄 간단한 응용 프로그램. 라이브 데모 @ https://muc.anirbanmu.com/?queries]를 볼 수 있습니다 .? Queries ]=spotify:track:2hyr8lzrljkefmbigt0365

쿼리 매개 변수

• queries[]=spotify:track:2HYr8LZRlJKEfMbIgT0365

지원되는 서비스

현재 Spotify, YouTube, iTunes/Apple Music & Deezer를 지원합니다.

설정

• Node & NPM이 설치되어 있는지 확인하십시오
• 레포를 복제하십시오
• Repo 디렉토리로 cd
• npm install

프론트 엔드

백엔드가 앱을 성공적으로 제공하기 전에 프론트 엔드를 구축하고 준비해야합니다.

개발을 위해 (Will Build, Changes 및 Rebuild vue.js Frontend) :

 npm run build-watch

생산의 경우 (만 빌드 만) :

 npm run build

내장 된 파일은 ./dist 디렉토리에 배치됩니다.

백엔드

백엔드는 각 API를 사용할 수 있도록 API 키를 설정해야합니다.

 SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> [OPTIONAL]

환경 변수를 설정 한 후에는 다음과 같이 백엔드 서버를 로컬로 시작할 수 있습니다.

 npm run express

이제 로컬로 응용 프로그램에 액세스 할 수 있어야 @ http : // localhost : 8081

fly.io

응용 프로그램은 Fly.io에 배포 될 준비가되었습니다. flyctl로 앱을 만들고 fly.toml에서 <APP-NAME> 교체하십시오. 앱을 만들고 fly.toml에서 이름을 대체 한 후 :

• flyctl secrets set SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
• flyctl secrets set SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
• flyctl secrets set YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
• flyctl deploy --build-secret GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> 페이지에서 Google 사이트 확인 코드를 원하시면 flyctl deploy .

세부

프론트 엔드

응용 프로그램 코드의 대부분은 vue.js 앱인 클라이언트 측입니다. 이것은 모든 렌더링, URL의 구문 분석 및 다른 서비스로 변환합니다.

백엔드

백엔드는 초기 서버 측 데이터 (API 토큰)를 얻고 단일 페이지 vue.js 앱을 템플릿하여 백엔드와 독립적으로 실행할 수있는 매우 사소한 Express 서버로 구성됩니다. 또한 API를 사용하여 API 토큰을 스스로 얻지 못하면 프론트 엔드가 주기적으로 토큰을 새로 고칠 수 있습니다.