Angular+Nginx部署Docker/EC2仅加载index.html，静态文件404求助

核心原因分析 #

本地开发正常但所有部署方式都出现静态资源404，说明问题出在Angular的构建配置而非服务器（Nginx/Apache/S3）配置。本地npm run start会自动处理base路径，但生产构建时需要明确配置资源根路径。

具体修复步骤 #

1. 构建时指定正确的base href #

执行构建命令时，添加--base-href参数指定根路径（如果部署在EC2实例的根域名/IP下，直接用/）：

npm run build -- --base-href /

如果你的应用部署在子路径下（比如http://your-ec2-ip/app），则改为对应路径：

npm run build -- --base-href /app/

2. 永久配置base href（可选） #

如果不想每次构建都加参数，可以修改angular.json文件，找到对应项目的构建配置，添加baseHref选项：

"projects": {
  "front-app": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/",
          // 其他配置...
        }
      }
    }
  }
}

3. 验证构建产物的资源路径 #

构建完成后，打开dist/front-app/browser/index.html，检查静态资源的引用路径是否以/开头，例如：

<!-- 正确的绝对路径 -->
<script src="/runtime.abc123.js"></script>
<link rel="stylesheet" href="/styles.def456.css">

<!-- 错误的相对路径（会导致404） -->
<script src="runtime.abc123.js"></script>

如果是相对路径，说明base href配置未生效，重新执行带参数的构建命令即可。

4. 额外Nginx检查（可选） #

虽然服务器配置不是核心问题，但可以确保Nginx配置完整：

• 确认nginx.conf中补充default_type application/octet-stream;（避免部分资源无法识别）
• 检查容器内Nginx日志，执行docker exec <容器ID> tail -f /var/log/nginx/error.log，看是否有权限或路径错误提示

测试验证 #

重新构建镜像并运行：

sudo docker build -t fe-app .
sudo docker run -d -p 80:80 fe-app

访问EC2实例的IP，检查静态资源是否正常加载。

内容的提问来源于stack exchange，提问作者jérôme C