Azure App Service Linux为何不为Angular应用提供Gzip压缩文件服务？

下面针对你已生成预压缩.gz文件但服务器未返回压缩响应的场景，提供两种适配Angular应用的配置方案：

方案1：基于Node.js Express服务器托管 #

如果你的Angular应用通过Express等Node.js服务器托管，可通过以下步骤配置：

• 安装压缩中间件：

  npm install compression --save
  

• 在Express启动文件（如server.js）中添加压缩配置，同时配置静态文件托管时优先读取预生成的.gz文件：

  const compression = require('compression');
  const express = require('express');
  const app = express();
  
  // 启用动态压缩，同时支持读取预压缩文件
  app.use(compression({
    filter: (req, res) => {
      if (req.headers['x-no-compression']) return false;
      return compression.filter(req, res);
    }
  }));
  
  // 托管Angular打包后的静态文件
  app.use(express.static('dist/你的Angular项目名称', {
    setHeaders: (res, path) => {
      if (path.endsWith('.gz')) {
        // 根据文件类型设置正确的Content-Type
        if (path.endsWith('.js.gz')) res.setHeader('Content-Type', 'application/javascript');
        if (path.endsWith('.css.gz')) res.setHeader('Content-Type', 'text/css');
        res.setHeader('Content-Encoding', 'gzip');
      }
    }
  }));
  
  const port = process.env.PORT || 3000;
  app.listen(port, () => console.log(`服务运行在端口${port}`));
  

• 确保Angular打包时生成.gz文件：在angular.json的projects -> 你的项目名 -> architect -> build -> options中，修改optimization配置：

  "optimization": {
    "scripts": true,
    "styles": {
      "minify": true,
      "inlineCritical": true
    },
    "fonts": true,
    "gzip": true
  }
  

• 重新打包并部署应用，确保dist目录下包含对应的.js.gz和.css.gz文件。

方案2：基于Nginx反向代理配置 #

如果使用Azure App Service Linux默认的Nginx环境（或通过Nginx托管静态文件），可通过自定义Nginx配置实现：

• 在应用根目录创建.nginx.conf文件（注意文件名前的点），添加以下配置：

  http {
    gzip on;
    gzip_vary on;
    gzip_static on; # 启用读取预生成的.gz文件
    # 指定需要压缩的文件类型
    gzip_types
      text/css
      application/javascript
      text/javascript
      application/json
      text/plain
      application/xml;
  
    server {
      listen 8080;
      server_name localhost;
  
      # 指向Angular打包后的静态文件目录
      root /home/site/wwwroot/dist/你的Angular项目名称;
      index index.html;
  
      # 处理Angular单页应用路由
      location / {
        try_files $uri $uri/ /index.html;
      }
  
      # 匹配JS/CSS文件，优先返回预压缩的.gz文件
      location ~* \.(js|css)$ {
        if (-f $request_filename.gz) {
          rewrite ^(.*)$ $1.gz break;
        }
        add_header Content-Encoding gzip;
        types {
          application/javascript js;
          text/css css;
        }
      }
    }
  }
  

• 登录Azure门户，进入你的App Service，在「配置」->「常规设置」中，将「启动命令」设置为：

  nginx -c /home/site/wwwroot/.nginx.conf
  

• 重新部署应用，确保dist目录下的预压缩文件已上传。

验证配置 #

部署完成后，通过浏览器开发者工具的「网络」面板刷新页面，检查JS、CSS文件的响应头，确认存在Content-Encoding: gzip字段，即可验证压缩生效。

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