muc

MUC

音楽URLコンバーター

さまざまな音楽ストリーミングサービスからURLを取り入れ、他のストリーミングサービスから同じトラック（利用可能な場合）を表示する簡単なアプリケーション。ライブデモ @ https://muc.anirbanmu.com/?queries [] = spotify：2hyr8lzrlljkefmbigt0365を見ることができます

クエリパラメーション

• queries[]=spotify:track:2HYr8LZRlJKEfMbIgT0365アプリの最初のクエリとして渡すことができる配列タイプクエリparam（複数を持つことができます）。

サポートされているサービス

現在、Spotify、YouTube、iTunes/Apple Music＆Deezerをサポートしています。

設定

• Node＆NPMがインストールされていることを確認してください
• レポをクローンします
• cd into repoディレクトリ
• npm install

フロントエンド

フロントエンドは、バックエンドがアプリを正常に提供できるようになる前に、構築し、準備ができている必要があります。

開発のために（構築し、変更を監視し、vue.js frontendを再構築します）：

 npm run build-watch

生産用（構築のみ）：

 npm run build

構築されたファイルは./dist 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アプリをテンプレートして、バックエンドから独立して実行できるようにすることです。また、フロントエンドが定期的にトークンを更新できるように、APIトークンを自分でAPIトークンを取得するためにAPIを提供します。