Angular部署AWS负载均衡+Nginx环境MIME类型拒绝及JS解析错误问题

核心是请求路径和静态资源存放路径不匹配，以及Angular配置不一致两个问题：

1. AWS ALB默认转发/admin*规则的请求时不会去掉/admin前缀，请求会带着该前缀发送到Nginx服务。你当前Nginx配置的静态资源根目录是/usr/share/nginx/html，当收到/admin/xxx.js的请求时，会尝试查找/usr/share/nginx/html/admin/xxx.js，但你构建出来的Angular静态资源都直接存放在根目录下，没有admin子文件夹，触发try_files规则返回了index.html内容，所以请求JS/CSS资源拿到的都是HTML代码，才会出现Unexpected token '<'语法错误、非CSS MIME类型报错。
2. Angular配置不统一：你设置了APP_BASE_HREF为/admin/app，deployUrl为/admin，同时打包出来的index.html里base href还是默认的/，三者路径不匹配也会导致路由和资源加载异常。

• 进入运行中的ECS容器内部，执行ls /usr/share/nginx/html确认静态资源的存放路径，确认所有JS、CSS文件都直接在根目录，没有admin子文件夹
• 容器内本地测试请求：执行curl 127.0.0.1/scripts.20a5fef0ca071d6f938f.js，确认能拿到正确的JS内容；再执行curl 127.0.0.1/admin/scripts.20a5fef0ca071d6f938f.js，确认返回的是index.html内容，验证路径前缀问题
• 检查AWS ALB的转发规则，确认没有配置路径重写，/admin前缀会保留发送到后端服务

1. 调整Nginx配置 #

修改你的Nginx配置，添加路径重写规则去掉/admin前缀：

events{}

http {

    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name _;
        root /usr/share/nginx/html;
        index index.html;

        location /admin {
            # 去掉请求中的/admin前缀
            rewrite ^/admin(/.*)$ $1 break;
            try_files $uri $uri/ /index.html;
        }

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

2. 统一Angular配置 #

无需单独配置APP_BASE_HREF和deployUrl，直接修改angular.json中build > options的配置：

{
  "build": {
    "options": {
      "baseHref": "/admin/",
      // 删掉之前加的deployUrl配置
      ...
    }
  }
}

该配置会在打包时自动修改index.html中的base href为/admin/，同时所有静态资源的引用路径也会自动带上/admin前缀，避免路径不一致问题。
另外删除你Angular模块中配置APP_BASE_HREF的代码行，避免冲突。

3. 验证生效 #

重新构建Angular项目、打包Docker镜像推送到ECR，更新ECS服务后，访问http://[aws-lb-url]/admin/即可正常加载应用。

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