根目录与子目录多SPA应用Nginx路由配置问题求助

核心问题定位 #

1. Nginx路径配置错误：你的root设置为/var/www/page.com，但/cms/fr等location的alias却指向/var/www/html/page.com/cms/fr，路径多了/html层级，导致Nginx无法正确找到静态文件，最终请求被 fallback 到根目录的base应用路由，触发404。
2. 冗余配置与匹配逻辑：每个语言单独写location和@命名location，不仅冗余还容易出错；同时缓存配置未统一应用到所有cms子应用。

修正后的Nginx配置 #

server{
    server_name page.com;
    root /var/www/page.com;

    # 统一匹配所有/cms/{lang}路径，避免重复配置
    location ~^/cms/([a-z]{2}) {
        # 动态匹配对应语言的静态文件目录
        alias /var/www/page.com/cms/$1;
        try_files $uri $uri/ /cms/$1/index.html;

        # 禁用缓存，确保静态资源实时更新
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
    }

    location / {
        proxy_pass http://127.0.0.1:4811;
        proxy_set_header Host $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;

        # 禁用缓存
        proxy_no_cache 1;
        proxy_cache_bypass 1;
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
    }
}

额外必要检查 #

1. Angular CMS应用构建配置：每个语言版本构建时必须指定正确的base-href，否则Angular路由会出现路径错误：

   # 构建法语版本示例
   ng build --base-href /cms/fr/
   # 构建英语版本示例
   ng build --base-href /cms/en/
   

2. 清除客户端缓存：由于之前可能存在缓存残留，需强制清除浏览器缓存（Ctrl+Shift+R），依赖Angular默认构建的静态资源哈希特性避免旧缓存干扰。
3. 文件目录权限：确保/var/www/page.com/cms/下的各语言目录及文件权限正确，Nginx进程（通常为www-data用户）有读取权限：

   chown -R www-data:www-data /var/www/page.com/cms/
   chmod -R 755 /var/www/page.com/cms/
   

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