如何用NGINX在单台Ubuntu主机部署两个Angular应用

AI 小北

2026-7-11

NGINX配置修复：多Angular应用路由问题

问题根源

你当前的配置中，location /app/使用了root指令，NGINX会将请求路径直接拼接到root指定的目录后。比如访问http://12.123.125.1/app时，NGINX会尝试读取/var/www/modern-app-ui/app/index.html，但你的第二个Angular应用的静态文件实际是放在/var/www/modern-app-ui/根目录下，因此导致404错误。

方案一：静态文件映射（推荐生产环境）

将location /app/中的root替换为alias，同时调整try_files的最后参数，确保指向正确的index.html路径：

server {
    listen 0.0.0.0:80;
    server_name 12.123.125.1;

    # 第一个Angular应用：根路径
    location / {
        root /var/www/ng-modern-portal;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 第二个Angular应用：/app/路径
    location /app/ {
        alias /var/www/modern-app-ui/;
        index index.html;
        # 注意这里最后是 /app/index.html，对应alias后的路径
        try_files $uri $uri/ /app/index.html;
    }
}

关键注意点

第二个Angular应用构建时，必须指定base href：
```
ng build --base-href /app/
```
这样Angular的路由会自动匹配/app/前缀，避免路由跳转出错。

方案二：反向代理（适合开发环境，直接代理到ng serve端口）

如果你的两个Angular应用是通过ng serve运行在4200、4201端口，可以用反向代理配置：

server {
    listen 0.0.0.0:80;
    server_name 12.123.125.1;

    # 代理到第一个应用的4200端口
    location / {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 代理到第二个应用的4201端口
    location /app/ {
        proxy_pass http://localhost:4201/;
        # 末尾的斜杠很重要，会去掉请求中的/app/前缀再转发
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}