部署在AWS Lambda上的Dash应用无限加载，求排查方案

环境与代码 #

参考仓库代码在AWS Lambda部署Dash应用，代码如下：

from dash import html, dcc, Output, Input, Dash
import json
import os
import awsgi


app = Dash(__name__, assets_folder ="/tmp")

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', type='text'),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


def lambda_handler(event, context):
    event2 = json.loads('{"headers": {}, "path":"/", "body": {}, "httpMethod": "GET", "queryStringParameters": null}')
    return awsgi.response(app.server, event2, context)

问题现象 #

• 为Lambda函数配置Function URL后，访问网页始终显示"Loading..."，处于无限加载状态
• 已配置充足内存与超时时间，添加依赖包Layer后CloudWatch无报错记录
• 手动测试Lambda函数，返回正常的200响应，内容为完整的Dash HTML页面：

{
  "statusCode": "200",
  "headers": {
    "Content-Type": "text/html; charset=utf-8",
    "Content-Length": "3799"
  },
  "isBase64Encoded": false,
  "body": "<!DOCTYPE html>\n<html>\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n      <meta charset=\"UTF-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <title>Dash</title>\n        <link rel=\"icon\" type=\"image/x-icon\" href=\"/_favicon.ico?v=2.10.2\">\n        \n    </head>\n    <body>\n        <!--[if IE]><script>\n        alert(\"Dash v2.7+ does not support Internet Explorer. Please use a newer browser.\");\n        </script><![endif]-->\n        \n<div id=\"react-entry-point\">\n    <div class=\"_dash-loading\">\n        Loading...\n    </div>\n</div>\n\n        <footer>\n            <script id=\"_dash-config\" type=\"application/json\">{\"url_base_pathname\":null,\"requests_pathname_prefix\":\"\\u002f\",\"ui\":false,\"props_check\":false,\"show_undo_redo\":false,\"suppress_callback_exceptions\":false,\"update_title\":\"Updating...\",\"children_props\":{\"dash_core_components\":{\"Checklist\":[\"options[].label\"],\"Clipboard\":[],\"ConfirmDialog\":[],\"ConfirmDialogProvider\":[],\"DatePickerRange\":[],\"DatePickerSingle\":[],\"Download\":[],\"Dropdown\":[\"options[].label\"],\"Geolocation\":[],\"Graph\":[],\"Input\":[],\"Interval\":[],\"Link\":[],\"Loading\":[],\"Location\":[],\"LogoutButton\":[],\"Markdown\":[],\"RadioItems\":[\"options[].label\"],\"RangeSlider\":[],\"Slider\":[],\"Store\":[],\"Tab\":[],\"Tabs\":[],\"Textarea\":[],\"Tooltip\":[],\"Upload\":[]},\"dash_html_components\":{\"A\":[],\"Abbr\":[],\"Acronym\":[],\"Address\":[],\"Area\":[],\"Article\":[],\"Aside\":[],\"Audio\":[],\"B\":[],\"Base\":[],\"Basefont\":[],\"Bdi\":[],\"Bdo\":[],\"Big\":[],\"Blink\":[],\"Blockquote\":[],\"Br\":[],\"Button\":[],\"Canvas\":[],\"Caption\":[],\"Center\":[],\"Cite\":[],\"Code\":[],\"Col\":[],\"Colgroup\":[],\"Content\":[],\"Data\":[],\"Datalist\":[],\"Dd\":[],\"Del\":[],\"Details\":[],\"Dfn\":[],\"Dialog\":[],\"Div\":[],\"Dl\":[],\"Dt\":[],\"Em\":[],\"Embed\":[],\"Fieldset\":[],\"Figcaption\":[],\"Figure\":[],\"Font\":[],\"Footer\":[],\"Form\":[],\"Frame\":[],\"Frameset\":[],\"H1\":[],\"H2\":[],\"H3\":[],\"H4\":[],\"H5\":[],\"H6\":[],\"Header\":[],\"Hgroup\":[],\"Hr\":[],\"I\":[],\"Iframe\":[],\"Img\":[],\"Ins\":[],\"Kbd\":[],\"Keygen\":[],\"Label\":[],\"Legend\":[],\"Li\":[],\"Link\":[],\"Main\":[],\"MapEl\":[],\"Mark\":[],\"Marquee\":[],\"Meta\":[],\"Meter\":[],\"Nav\":[],\"Nobr\":[],\"Noscript\":[],\"ObjectEl\":[],\"Ol\":[],\"Optgroup\":[],\"Option\":[],\"Output\":[],\"P\":[],\"Param\":[],\"Picture\":[],\"Plaintext\":[],\"Pre\":[],\"Progress\":[],\"Q\":[],\"Rb\":[],\"Rp\":[],\"Rt\":[],\"Rtc\":[],\"Ruby\":[],\"S\":[],\"Samp\":[],\"Script\":[],\"Section\":[],\"Select\":[],\"Shadow\":[],\"Slot\":[],\"Small\":[],\"Source\":[],\"Spacer\":[],\"Span\":[],\"Strike\":[],\"Strong\":[],\"Sub\":[],\"Summary\":[],\"Sup\":[],\"Table\":[],\"Tbody\":[],\"Td\":[],\"Template\":[],\"Textarea\":[],\"Tfoot\":[],\"Th\":[],\"Thead\":[],\"Time\":[],\"Title\":[],\"Tr\":[],\"Track\":[],\"U\":[],\"Ul\":[],\"Var\":[],\"Video\":[],\"Wbr\":[],\"Xmp\":[]},\"dash_table\":{\"DataTable\":[]}}}</script>\n            <script src=\"/_dash-component-suites/dash/deps/polyfill@7.v2_10_2m1686788704.12.1.min.js\"></script>\n<script src=\"/_dash-component-suites/dash/deps/react@16.v2_10_2m1686788704.14.0.min.js\"></script>\n<script src=\"/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1686788704.14.0.min.js\"></script>\n<script src=\"/_dash-component-suites/dash/deps/prop-types@15.v2_10_2m1686788704.8.1.min.js\"></script>\n<script src=\"/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1686788704.min.js\"></script>\n<script src=\"/_dash-component-suites/dash/dcc/dash_core_components.v2_10_0m1686788704.js\"></script>\n<script src=\"/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_10_0m1686788704.js\"></script>\n<script src=\"/_dash-component-suites/dash/html/dash_html_components.v2_0_12m1686788704.min.js\"></script>\n<script src=\"/_dash-component-suites/dash/dash_table/bundle.v5_2_5m1686788704.js\"></script>\n            <script id=\"_dash-renderer\" type=\"application/javascript\">var renderer = new DashRenderer();</script>\n        </footer>\n    </body>\n</html>"
}

已尝试的解决方案 #

• 查阅Dash与AWS Lambda官方文档
• 更换不同浏览器访问
• 改用Flask服务器替代Dash内置服务器
• 调整Lambda内存与超时配置至充足水平
• 为Lambda添加包含所有依赖包的Layer

需求 #

应用逻辑简单，不想使用Docker或其他额外AWS服务，求解决网页无限加载的问题。

内容的提问来源于stack exchange，提问作者adnlpz