在OpenShift非根路径部署Angular 15+Nginx遇问题求方案

一、正确配置Angular项目的baseHref #

• 构建时必须通过命令指定baseHref（末尾斜杠不能省略），确保所有资源路径自动带上非根前缀：

  ng build --base-href /myApp/
  

• 若要在angular.json中固化配置，在projects -> 你的项目名 -> architect -> build -> options里添加：

  "baseHref": "/myApp/"
  

• 无需额外配置APP_BASE_HREF提供者，Angular会基于baseHref自动处理路由，多余配置可能引发冲突。

二、修复Nginx配置，解决MIME类型与路由 fallback 问题 #

MIME类型报错的核心是Nginx误将静态资源请求当成路由请求，返回index.html（text/html类型）而非对应js文件。修改Nginx配置文件如下：

server {
    listen 8080;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # 处理非根路径的请求
    location /myApp/ {
        # 优先匹配实际文件，不存在则 fallback 到Angular入口文件
        try_files $uri $uri/ /myApp/index.html;
    }

    # 确保静态资源返回正确MIME类型
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /usr/share/nginx/html;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

关键说明：

• try_files规则既保证静态资源能被正确定位，又支持Angular的单页路由跳转。
• 单独的静态资源location块强制Nginx为js、css等文件返回正确的MIME类型，避免误返回text/html。

三、OpenShift部署细节 #

• 构建后的dist文件夹内容需直接复制到Nginx的/usr/share/nginx/html目录，不要嵌套在/usr/share/nginx/html/myApp下。
• Dockerfile示例：

  FROM nginx:alpine
  COPY dist/你的项目名 /usr/share/nginx/html
  COPY nginx.conf /etc/nginx/conf.d/default.conf
  

• OpenShift路由配置时，将路径设置为/myApp，与Angular的baseHref保持一致。

四、验证步骤 #

1. 本地构建后，检查dist目录下的index.html，确认所有js、css引用路径为/myApp/xxx.js格式。
2. 本地启动Nginx测试配置，访问http://localhost:8080/myApp，确认无资源加载错误、页面正常显示。
3. 部署到OpenShift后，访问www.example.com/myApp，验证路由跳转与资源加载均正常。

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