部署后单页网站无法加载的技术排查求助

问题回顾 #

本地IntelliJ中运行单页应用正常，可通过http://0.0.0.0:8080访问，日志显示所有静态资源路由匹配成功；但执行./gradlew distTar打包部署到生产VM后，应用启动正常，网络连通性无问题，访问http://vmip:8080仅出现首页路由匹配日志，页面无法加载，且jar包内静态资源完整。

本地运行关键日志：

2023-11-17 16:41:04.791 [main] INFO  Application - Autoreload is disabled because the development mode is off.
2023-11-17 16:41:05.490 [DefaultDispatcher-worker-1] INFO  Application - Responding at http://0.0.0.0:8080
...（所有静态资源路由匹配SUCCESS日志）

部署后运行日志：

com.hazaqames.consulting-0.0.1/bin/com.hazaqames.consulting
2023-11-17 16:35:57.218 [main] INFO  Application - Autoreload is disabled because the development mode is off.
2023-11-17 16:35:58.741 [DefaultDispatcher-worker-1] INFO  Application - Responding at http://192.168.1.13:8080
2023-11-17 16:36:02.629 [eventLoopGroupProxy-4-1] TRACE io.ktor.routing.Routing - Trace for []
/, segment:0 -> SUCCESS @ /
  /, segment:0 -> SUCCESS @ /
    /{...}, segment:0 -> SUCCESS; Parameters [static-content-path-parameter=[]] @ /{...}
      /{...}/(method:GET), segment:0 -> SUCCESS @ /{...}/(method:GET)
Matched routes:
  "" -> "<slash>" -> "{...}" -> "(method:GET)"
Route resolve result:
  SUCCESS; Parameters [static-content-path-parameter=[]] @ /{...}/(method:GET)

排查步骤 #

• 检查浏览器端资源请求状态：打开浏览器开发者工具（F12）切换到Network标签，刷新页面后查看css、js、图片等静态资源的请求URL和状态码。如果是404，说明资源路径配置或请求路径存在问题；如果是其他状态码，根据对应信息分析原因。
• 验证静态资源路径配置：确认Ktor代码中staticFiles的配置逻辑，比如是否指定了正确的资源目录。打包解压后，检查应用运行时的工作目录与静态资源实际存放路径是否匹配——比如运行./com.hazaqames.consulting时，当前目录下是否存在预期的静态资源文件夹，或是否需要使用绝对路径加载资源。
• 开启详细日志定位问题：修改生产环境的日志配置（如logback.xml），将io.ktor.server.static的日志级别设为DEBUG，重启应用后再次访问页面，查看日志中关于静态资源查找的具体路径和错误信息，定位资源加载失败的根源。
• 检查index.html资源引用：对比本地和打包后的index.html内容，确认其中的css、js等资源引用是相对路径还是绝对路径。若使用相对路径，可能因路由匹配规则导致资源请求路径错误；若为绝对路径，需确认路径前缀是否与生产环境的部署路径一致。
• 直接测试静态资源访问：在浏览器中直接访问具体静态资源的URL（如http://vmip:8080/css/main.css），判断是否能正常返回资源内容。若无法返回，说明静态资源路由配置或资源读取存在问题；若能返回，则需排查前端路由或页面渲染逻辑。

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