单AWS EC2实例部署两个Angular应用的NGINX配置问题咨询

你当前配置存在两个核心错误导致后台访问异常：

• 路径匹配逻辑错误：location /app-admin/ 块使用 root /opt/app-admin 时，Nginx会自动拼接路径为 /opt/app-admin/app-admin/ 查找资源，你的后台应用文件实际存放在/opt/app-admin根目录下，完全找不到对应资源，触发后续跳转逻辑。
• 回退路径错误：location /app-admin/ 下的try_files写死了/index.html，会直接请求根路径的前台index.html，自然跳转到前台应用。

首先需要调整后台Angular应用的打包参数，指定基准路由前缀：

ng build --base-href /app-admin/

再修改Nginx配置，把admin块的root改为alias，同时调整try_files的回退路径：

server {
  charset utf-8;
  listen 80 default_server;
  server_name _;

  # 前台普通用户应用
  location / {
    root /opt/app-web;
    try_files $uri $uri/ /index.html;
  }

  # 后台运营管理应用
  location /app-admin/ {
    alias /opt/app-admin/;
    try_files $uri $uri/ /app-admin/index.html;
  }

  # 接口反向代理
  location /api/ {
    proxy_pass http://localhost:4000/;
  }
}

修改后执行nginx -s reload重启服务即可生效。

推荐使用二级域名拆分两个应用，配置逻辑更简洁，没有路径冲突风险，也不需要额外修改Angular的base-href参数，示例配置如下：

# 前台应用配置，域名示例：www.yourshop.com
server {
  charset utf-8;
  listen 80;
  server_name www.yourshop.com;

  root /opt/app-web;
  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://localhost:4000/;
  }
}

# 后台应用配置，域名示例：admin.yourshop.com
server {
  charset utf-8;
  listen 80;
  server_name admin.yourshop.com;

  root /opt/app-admin;
  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://localhost:4000/;
  }
}

可额外补充优化点：

• 配置HTTPS证书，强制跳转HTTPS，提升安全性
• 增加静态资源缓存规则，降低服务器压力，提升访问速度
• 开启gzip压缩，减少资源传输体积
• 配置访问日志和错误日志，方便排查问题

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