Phoenix 1.6集成Liveview构建Docker镜像并通过Release部署时静态资源加载异常问题

我帮你梳理下这个问题的核心原因和对应的修复方案，结合你的Docker配置和ESBuild编译场景，应该能快速解决静态资源加载失败的问题：

1. 确认Phoenix Endpoint生产环境配置 #

首先检查config/prod.exs中的Endpoint配置，确保静态资源服务和Release模式的关键配置正确：

config :acompanhante, AcompanhanteWeb.Endpoint,
  # Release模式下必须手动开启服务，mix phx.server会自动处理但Release不会
  server: true,
  # 启用静态资源服务，指向mix assets.deploy生成的缓存清单
  serve_static: true,
  cache_static_manifest: "priv/static/cache_manifest.json",
  # 静态资源根路径保持默认即可，若有自定义路径需调整
  static_url: [path: "/"]

同时在config/runtime.exs中确保HTTP服务允许外部访问：

config :acompanhante, AcompanhanteWeb.Endpoint,
  http: [ip: {0, 0, 0, 0}, port: String.to_integer(System.get_env("PORT") || "4000")]

2. 修复Docker构建阶段的静态资源权限问题 #

你的Dockerfile使用了非特权用户elixir运行应用，但构建阶段生成的priv/static目录默认是root权限，导致运行时应用无法读取这些资源。在build阶段添加权限修正步骤：

修改Dockerfile的build部分：

COPY assets assets
RUN mix assets.deploy
# 添加这行，确保静态资源目录权限允许普通用户读取
RUN chmod -R 755 priv/static

3. 验证LiveView相关静态资源与CSRF配置 #

确保根模板（比如lib/acompanhante_web/templates/layout/root.html.heex）正确加载静态资源和CSRF Token——这是LiveView正常工作的必要条件：

<!-- 加载编译后的CSS，phx-track-static用于缓存优化 -->
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
<!-- 加载编译后的JS，包含LiveSocket初始化逻辑 -->
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
<!-- LiveSocket需要的CSRF Token -->
<meta name="csrf-token" content={get_csrf_token()}/>

同时检查assets/js/app.js中的LiveSocket初始化代码是否正确：

import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})

liveSocket.connect()
window.liveSocket = liveSocket

4. 确认Release包包含静态资源 #

你的Dockerfile中已经通过COPY --from=build ... /app/_build/${MIX_ENV}/rel/acompanhante ./复制了完整的Release包，Phoenix的Release会自动包含priv/static目录，所以这部分无需额外调整，只要前面的权限修正到位即可。

完成以上修改后，重新构建Docker镜像并运行，静态资源应该就能正常加载了。

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