Dockerfile配置问题：仅能提供index.html，无法加载CSS/JS文件

问题原因 #

你的Dockerfile中的COPY指令将js/app.js和css/style.css直接复制到了/usr/share/nginx/html/根目录下，导致容器内的文件结构变为：

/usr/share/nginx/html/
├─ index.html
├─ app.js
├─ style.css

但你的index.html里应该是按照/css/style.css和/js/app.js的路径引用资源的，Nginx在这些路径下找不到对应文件，因此CSS和JS无法加载。

解决办法 #

有两种可行的修复方式：

方式1：复制整个目录结构到容器 #

修改Dockerfile的COPY指令，直接复制css和js目录到Nginx的html目录下，保留原有的子目录结构：

# Use an official Nginx runtime as a parent image
FROM nginx:stable

# 复制整个css和js目录，保留目录结构
COPY index.html /usr/share/nginx/html/
COPY css/ /usr/share/nginx/html/css/
COPY js/ /usr/share/nginx/html/js/

# Expose port 80 for the Nginx server
EXPOSE 80

# Start Nginx when the container starts
CMD ["nginx", "-g", "daemon off;"]

这样容器内的文件结构会和本地一致，index.html里的资源引用路径就能正确匹配。

方式2：指定目标子目录复制特定文件 #

如果只需要复制特定文件（比如不需要jquery.min.js），可以在COPY时明确指定目标子目录，Docker会自动创建不存在的目录：

# Use an official Nginx runtime as a parent image
FROM nginx:stable

# 复制文件到对应子目录，确保路径匹配
COPY index.html /usr/share/nginx/html/
COPY js/app.js /usr/share/nginx/html/js/
COPY css/style.css /usr/share/nginx/html/css/

# Expose port 80 for the Nginx server
EXPOSE 80

# Start Nginx when the container starts
CMD ["nginx", "-g", "daemon off;"]

这种方式会将文件放到对应的js和css子目录中，匹配index.html里的引用路径。

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