运行Docker+Express.js服务时客户端Bootstrap样式失效问题求助

• HTML文件存在重复且错误的CSS引入规则：login.html的head标签内两次引入signin.css，其中第二次使用相对路径<link href="signin.css" rel="stylesheet" />，匹配不到静态资源时Express会返回MIME类型为text/html的404页面，触发X-Content-Type-Options: nosniff规则被浏览器拦截
• Express静态资源挂载规则错误：当前将/css目录直接挂载到站点根路径，因此/css/signin.css的请求无法匹配到文件，只有/signin.css才能访问到css目录下的资源
• Dockerfile缺失本地文件拷贝逻辑：当前Dockerfile仅安装了依赖，没有将本地的css、img、pages目录拷贝到镜像内的/app工作目录，容器运行时不存在对应的静态资源文件
• Docker端口配置不统一：server.js监听的是8000端口，但Dockerfile里EXPOSE的是8080，端口映射错误也会导致访问异常

1. 修复login.html的CSS引入 #

删除head里重复的signin.css引入，仅保留一条路径正确的规则即可：

<!-- 保留该引入即可，删除末尾冗余的 <link href="signin.css" rel="stylesheet" /> -->
<link href="/css/signin.css" rel="stylesheet" type="text/css"/>

2. 修复Express静态资源挂载规则 #

修改server.js中的静态资源配置，给静态资源加上统一的路径前缀，避免路径冲突：

// 给css资源添加/css访问前缀，请求/css/xxx.css会匹配css目录下的对应文件
app.use('/css', express.static(__dirname + "/css", {
  index: false,
  immutable: true,
  cacheControl: true,
  maxAge: "30d" 
}));
// 给img资源添加/img访问前缀
app.use('/img', express.static(__dirname + "/img", {
  index: false,
  immutable: true,
  cacheControl: true,
  maxAge: "30d"
}));

修改后HTML中原有的/css/signin.css、/img/globe.png路径都可以正常访问。

3. 修复Dockerfile配置 #

添加文件拷贝指令，同步端口配置：

FROM node:latest

WORKDIR /app

# 拷贝本地所有项目文件到镜像的/app工作目录
COPY . .

EXPOSE 8000

RUN npm init -y

RUN npm install express body-parser mysql nodemon cors bootstrap

4. 使用正确的端口映射启动容器 #

构建镜像后启动容器时，将本地端口映射到容器的8000端口，示例命令：

docker build -t node-web .
docker run -p 8000:8000 node-web

启动后访问http://localhost:8000 即可正常加载所有样式。

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