djangoデプロイメント：ASGIアプリケーションは静的ファイルをロードしません

Question

WhiteNoiseそれ自体を紹介します：whitenoiseはany-WSGI互換アプリで動作します。
次に、私はのASGIアプリにどのパッケージを使用しますか？

URL /chatting/がindex.htmlによってレンダリングされたとします。

初めてアクセスする場合は/chatting/となります。 html liタグをクリックすると、このコードが実行されます。

// Room join/leave 
$("li.room-link").click(function() { 
    roomId = $(this).attr("data-room-id"); 
    if (inRoom(roomId)) { 
     // Leave room 
     $(this).removeClass("joined"); 
     webSocketBridge.send({ 
      "command": "leave", 
      "room": roomId 
     }); 
    } else { 
     // Join room 
     $(this).addClass("joined"); 
     webSocketBridge.send({ 
      "command": "join", 
      "room": roomId 
     }); 
    } 
}); 

正常に追加クラスに参加しました！

ただし、その後（クリックイベント）何も起こりません。
ログを見ると、websocket接続がまだ動作しているようです。

は現在、私のプロジェクトでは、ASGIアプリはjQueryの静的ファイルのロードに失敗しました。
ASGIアプリケーションでjquery静的ファイルをロードするにはどうすればよいですか。

私はHerokuに私のdjangoプロジェクトを配備しました。だから私は実稼働環境で修正したいと思います（開発環境では正常に動作しています）。

以下は私のheroku Procfileの設定です。

web: gunicorn multichat.wsgi --log-file - 
web2: daphne multichat.asgi:channel_layer --port $PORT --bind 0.0.0.0 -v2 
worker: python manage.py runworker -v2 

です。index.htmlフルコードです。

{% extends "base.html" %} 

{% block title %}MultiChat Example{% endblock %} 
{% block header_text %}MultiChat Example{% endblock %} 

{% block content %} 

    <ul class="rooms"> 
     {% for room in rooms %} 
      <li class="room-link" data-room-id="{{ room.id }}">{{ room }}</li> 
     {% empty %} 
      <p class="empty">No chat rooms defined. Maybe make some in the <a href="{% url 'admin:index' %}">admin</a>?</p> 
     {% endfor %} 
    </ul> 

    <div id="chats"> 
    </div> 

{% endblock %} 


{% block extra_body %} 
    <script> 
     $(function() { 
      // Correctly decide between ws:// and wss:// 
      var ws_path = "/chat/stream/"; 
      console.log("Connecting to " + ws_path); 
      var webSocketBridge = new channels.WebSocketBridge(); 
      webSocketBridge.connect(ws_path); 
      // Handle incoming messages 
      webSocketBridge.listen(function(data) { 
       // Decode the JSON 
       console.log("Got websocket message", data); 
       // Handle errors 
       if (data.error) { 
        alert(data.error); 
        return; 
       } 
       // Handle joining 
       if (data.join) { 
        console.log("Joining room " + data.join); 
        var roomdiv = $(
          "<div class='room' id='room-" + data.join + "'>" + 
          "<h2>" + data.title + "</h2>" + 
          "<div class='messages'></div>" + 
          "<form><input><button>Send</button></form>" + 
          "</div>" 
        ); 
        // Hook up send button to send a message 
        roomdiv.find("form").on("submit", function() { 
         webSocketBridge.send({ 
          "command": "send", 
          "room": data.join, 
          "message": roomdiv.find("input").val() 
         }); 
         roomdiv.find("input").val(""); 
         return false; 
        }); 
        $("#chats").append(roomdiv); 
        // Handle leaving 
       } else if (data.leave) { 
        console.log("Leaving room " + data.leave); 
        $("#room-" + data.leave).remove(); 
        // Handle getting a message 
       } else if (data.message || data.msg_type != 0) { 
        var msgdiv = $("#room-" + data.room + " .messages"); 
        var ok_msg = ""; 
        // msg types are defined in chat/settings.py 
        // Only for demo purposes is hardcoded, in production scenarios, consider call a service. 
        switch (data.msg_type) { 
         case 0: 
          // Message 
          ok_msg = "<div class='message'>" + 
            "<span class='username'>" + data.username + "</span>" + 
            "<span class='body'>" + data.message + "</span>" + 
            "</div>"; 
          break; 
         case 1: 
          // Warning/Advice messages 
          ok_msg = "<div class='contextual-message text-warning'>" + data.message + 
            "</div>"; 
          break; 
         case 2: 
          // Alert/Danger messages 
          ok_msg = "<div class='contextual-message text-danger'>" + data.message + 
            "</div>"; 
          break; 
         case 3: 
          // "Muted" messages 
          ok_msg = "<div class='contextual-message text-muted'>" + data.message + 
            "</div>"; 
          break; 
         case 4: 
          // User joined room 
          ok_msg = "<div class='contextual-message text-muted'>" + data.username + 
            " joined the room!" + 
            "</div>"; 
          break; 
         case 5: 
          // User left room 
          ok_msg = "<div class='contextual-message text-muted'>" + data.username + 
            " left the room!" + 
            "</div>"; 
          break; 
         default: 
          console.log("Unsupported message type!"); 
          return; 
        } 
        msgdiv.append(ok_msg); 
        msgdiv.scrollTop(msgdiv.prop("scrollHeight")); 
       } else { 
        console.log("Cannot handle message!"); 
       } 
      }); 
      // Says if we joined a room or not by if there's a div for it 
      inRoom = function (roomId) { 
       return $("#room-" + roomId).length > 0; 
      }; 
      // Room join/leave 
      $("li.room-link").click(function() { 
       roomId = $(this).attr("data-room-id"); 
       if (inRoom(roomId)) { 
        // Leave room 
        $(this).removeClass("joined"); 
        webSocketBridge.send({ 
         "command": "leave", 
         "room": roomId 
        }); 
       } else { 
        // Join room 
        $(this).addClass("joined"); 
        webSocketBridge.send({ 
         "command": "join", 
         "room": roomId 
        }); 
       } 
      }); 
      // Helpful debugging 
      webSocketBridge.socket.onopen = function() { 
       console.log("Connected to chat socket"); 
      }; 
      webSocketBridge.socket.onclose = function() { 
       console.log("Disconnected from chat socket"); 
      } 
     }); 
    </script> 
{% endblock %} 

私はあなたの助けに感謝したい。このproject
を参照。

Answer 1

ホワイトノイズはちょうどsettings.pyでミドルウェア・リストに追加し、チャンネルで動作します： http://whitenoise.evans.io/en/stable/django.html#enable-whitenoise