Аудиофайл не воспроизводится из другого контейнера docker - PullRequest
0 голосов
/ 06 мая 2020

Я пытаюсь разработать небольшое приложение musi c, используя Flask и Docker. У меня есть две службы docker, каждая из которых работает Flask.

Первая называется загрузчик :

@app.route("/get_song/<string:filename>/", methods=["GET"])
def get_song(filename):
    path = os.path.join(flask.current_app.instance_path, flask.current_app.config["UPLOAD_FOLDER"])
    return flask.send_from_directory(path, filename, as_attachment=True)

Второй отображает Шаблон Jinja, который пытается воспроизвести файл, возвращаемый этим API:

<audio controls="controls" autoplay="autoplay"></audio>

<a href="javascript:void(0);" onclick="playSong('{{song}}')">{{song}}</a>`

<script type="text/javascript">
    function playSong(song){
        $('audio').attr('src', 'http://uploader:5000/get_song/'+song);
    }
</script>

По отдельности эти компоненты работают нормально. Но при совместном использовании файл не воспроизводится. Я перепробовал почти все, что нашел в Интернете, и, похоже, ничего не работает. Любая помощь будет очень признательна. Спасибо!

Edit : Добавлен файл docker -compose. Оба образа docker создаются локально.

version: "3"
services:
  uploader:
    image: project_uploader:latest
    ports:
      - "4000:5000"
    networks:
      - upload
  frontend_server:
    image: project_frontend_server:latest
    ports:
      - "5000:5000"
    networks:
      - upload

networks:
  upload:

1 Ответ

1 голос
/ 06 мая 2020

Показанный вами фрагмент HTML в конечном итоге выполняется в браузере; но браузер работает за пределами пространства Docker и не знает о внутренних именах хостов Docker.

<!-- browser doesn't know about a host named "uploader" -->
<audio src="http://uploader:5000/get_song/..." />

Когда вы создаете этот фрагмент HTML, вам необходимо указать имя хост, на котором работает сервер, и опубликованный номер ports: другого контейнера. Если браузер и контейнеры работают в одной системе (и не использует Docker Toolbox), вы можете использовать localhost в качестве имени хоста.

$('audio').attr('src', 'http://localhost:4000/get_song/'+song);

Вероятно, самый надежный способ справиться с этим - для настройки обратного прокси, например Nginx. Браузерные приложения будут указывать на прокси-сервер, и он будет пересылать данные в один или другой контейнер. Если вы можете это сделать, вы можете использовать URL-адрес только для пути и позволить имени хоста быть таким же, как на главной странице.

$('audio').attr('src', '/uploader/get_song/'+song);
...