Docker环境下Express无法加载静态文件夹问题排查

问题描述 #

在Docker环境中使用Webpack构建客户端、Express作为服务端，服务端可正常运行，但Express无法加载静态文件。怀疑是Docker未复制Webpack运行后生成的public文件夹，想了解还有哪些可能的原因。

相关配置信息 #

文件夹结构 #

client
 docker
  Dockerfile
 src
  css
  js
 public


server
 docker
  Dockerfile
 src
  views

Client Dockerfile #

FROM node:19-bullseye

WORKDIR /usr/src/app

RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm

COPY  package*.json ./

RUN pnpm install

COPY . .

EXPOSE 8080

CMD ["pnpm", "start"]

Server Dockerfile #

FROM node:19-bullseye

WORKDIR /usr/src/app

RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm

COPY  package*.json ./

RUN pnpm install

COPY . .

EXPOSE 8081

CMD ["pnpm", "start"]

Docker Compose #

version: '3.8'
services:
  api:
    image: server
    ports:
      - "8081:8081"
    volumes:
      - ./server/:/usr/src/app
      - /usr/src/app/node_modules

  client:
    image: client
    stdin_open: true
    ports:
      - "8080:8080"
    volumes:
      - ./client/:/usr/src/app
      - /usr/src/app/node_modules

Express代码 #

import path from 'path'
import { fileURLToPath } from 'url'
import express from 'express'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

const app = express()
const port = 8081

// view engine
app.set("views", path.join(__dirname, 'views'));
app.set("view engine", "pug");
app.locals.basedir = app.get('views')

// Middlewares
app.use(express.static(path.resolve(__dirname, '../../client/public/')))

app.get('/', (req, res) => {
  res.render('pages/home')
})

app.listen(port)

其他可能的原因 #

• 容器文件系统隔离：Express配置的../../client/public/是server容器内的路径，但client和server是两个独立容器，server容器无法直接访问client容器内的文件，这是核心问题之一。
• Webpack开发模式的内存存储：如果client用的是webpack-dev-server这类开发服务，它会把构建产物放在内存中，不会实际生成到public文件夹，导致容器内没有可读取的静态文件。
• 静态路径解析错误：ES模块中__dirname的计算可能存在偏差，导致最终解析的静态文件路径在server容器内不存在，可以在代码中打印path.resolve(__dirname, '../../client/public/')确认实际路径。
• 卷挂载覆盖问题：client容器挂载了本地./client/目录到容器内/usr/src/app，如果本地目录没有public文件夹（仅在容器内生成），挂载后容器内的public会被本地空目录覆盖或无法生成。
• 文件权限不足：容器内public文件夹或静态文件的权限设置不正确，Express进程没有读取权限，导致无法加载资源。
• 前端请求路径错误：如果前端页面中引用静态资源的路径是指向client服务的8080端口，浏览器的跨域限制会导致资源加载失败，这种情况并非Express无法读取文件，而是前端请求层面的问题。

内容的提问来源于stack exchange，提问作者Taste of Leaving