Docker部署Nginx无法加载CSS问题求助

核心问题 #

你的Dockerfile配置错误，导致静态资源（style.css、pic.jpg）没有被放在Nginx能访问的目录下：

• 你先把index.html复制到Nginx默认网页根目录/usr/share/nginx/html，然后切换工作目录到/app，并把所有文件复制到/app
• Nginx默认从/usr/share/nginx/html加载网页资源，而你的CSS和图片都在/app目录，浏览器自然无法请求到这些资源

修正后的Dockerfile #

直接将所有项目文件复制到Nginx的默认网页根目录即可：

FROM nginx
# 将所有项目文件复制到Nginx默认网页根目录
COPY . /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

额外检查点 #

确保index.html中引用静态资源的路径是正确的相对路径，比如：

<!-- 引用CSS -->
<link rel="stylesheet" href="./style.css">
<!-- 引用图片 -->
<img src="./pic.jpg" alt="生日图片">

重新部署步骤 #

1. 删除旧镜像（可选）：docker rmi birthday-app
2. 构建新镜像：docker build -t birthday-app .
3. 启动容器：docker run -d -p 8080:80 birthday-app
4. 访问http://localhost:8080即可看到正常加载的页面

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