Angular部署Nginx后无法直接访问子路径/刷新页面问题排查

问题分析 #

你的Nginx配置存在结构错误：listen、server_name被错误地放在了location /块内部，这会导致Nginx无法正确解析虚拟主机配置，进而让try_files规则失效。此外，可能存在虚拟主机配置冲突或Angular构建文件部署不完整的问题。

修正后的Nginx配置 #

将配置调整为正确的结构，确保try_files能正确转发所有前端路由请求到index.html：

http {
    ##
    # Basic Settings
    ##
    sendfile on;
    tcp_nopush on;
    types_hash_max_size 2048;
    # server_tokens off;

    server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##
    ssl_protocols TLSv1.2 TLSv1.3; # 仅保留安全协议，移除老旧的TLSv1/TLSv1.1
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Angular App Server Config
    ##
    server {
        listen 80;
        listen 443 ssl;
        server_name pisqre.com;

        # 替换为你的SSL证书实际路径（若未配置SSL可暂时注释这两行）
        ssl_certificate /etc/letsencrypt/live/pisqre.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/pisqre.com/privkey.pem;

        root /var/www/html;
        index index.html;

        # 核心规则：转发所有路由请求到index.html，支持前端路由
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 静态资源缓存优化（可选，提升加载速度）
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    ##
    # Virtual Host Configs
    ##
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

操作步骤 #

1. 备份原配置文件：

   sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak
   

2. 编辑配置文件：

   sudo nano /etc/nginx/nginx.conf
   

3. 将原内容替换为上述修正后的配置，注意调整SSL证书路径（如果使用Certbot申请证书，路径通常如示例所示）。
4. 检查配置语法是否正确：

   sudo nginx -t
   

5. 重启Nginx生效：

   sudo systemctl restart nginx
   

额外检查项 #

• 确认Angular项目已正确构建：执行ng build（生产环境用ng build --prod），将dist目录下的所有文件复制到/var/www/html：

  sudo cp -r /path/to/your/angular-project/dist/* /var/www/html/
  

• 检查/etc/nginx/sites-enabled/目录下是否存在其他虚拟主机配置，避免优先级冲突（若有多余配置可暂时重命名或删除）。

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