1

Node.jsを用いて下記のような形で、gzip圧縮されたhtmlファイルをレスポンスとして返しています。

const hoge = 'huga';
res.setHeader('Content-Disposition', 'attachment; filename=test.html.gz');
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/html; charset=UTF-8');

zlib.gzip(hoge, (err, result) => {
  res.send(result);
});

上記処理があるエンドポイントを叩くと、test.html.gzがダウンロードできるのですが、
gzip解凍時エラーが出ます。

直接ファイル名を編集し、test/htmlとするとhtmlファイルとして開くことができるため、gzipに圧縮できていないものと考えています。
正常にgzip圧縮を行い、レスポンスするにはどのようにすれば良いでしょうか。

4
  • おそらくexpressjsを利用しているように見えますが、ライブラリを使わずに実現したいという趣旨でしょうか?
    – himenon
    2021年9月15日 12:06
  • Content-Typetext/html に設定するとブラウザ側で自動的に復元してしまうのではないでしょうか。Content-Typeapplication/x-gzip に変更してみてください。
    – metropolis
    2021年9月15日 12:56
  • 1
    はい。expressjsを利用しています。 text/htmlをgzip圧縮しレスポンスし、そのファイルが正常に回答できる状態を実現したいという状況で、ライブラリを使用することに関しては問題ありません。 Content-Typeapplication/x-gzipに変更して試しましたが、動作は変わりませんでした。
    – NaG
    2021年9月15日 13:52
  • 問題の切り分けのために一旦、ブラウザで出力するのでなくてファイルで出力してみてそれを直接解凍してみるとどうなりますか?
    – keitaro_so
    2021年9月16日 1:18

1 件の回答 1

1

express.jsでレスポンスをgzip化するのであれば、compressionを利用するのが(ドキュメントにも書いてあるので)一般的かと思います。

以下がサンプルコードです。http://localhost:3000にアクセスしてDevToolsで確認してみてください。

server.jsなどのように保存して、node server.jsとして実行してみてください。レスポンスに乗せるContentがあまりにも小さい場合、gzip化されないので気をつけてください。サンプルコードではわざとfor-loopを回しています。

const expres = require("express");
const compression = require("compression");

const app = expres();

app.use(compression({
  threshold: 0,
}));

const domText = [];

for (let i = 0; i < 10; i++) {
  domText.push(`<li>Random Number ${Math.random()}</li>`);
}

const htmlText = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello world page</title>
</head>
<body>
  <h1>Hello world from express.js</h1>
  <ul>
  ${domText.join("\n")}
  </ul>
</body>
</html>
`;

app.get("/", (req, res) => {
  res.send(htmlText);
  res.end();
});

app.listen(3000, () => {
  console.log("Start server: http://localhost:3000");
});

DevToolsでの確認

興味ある人向け

質問の趣旨から外れるかもしれませんが、ライブラリを使わずに記述するパターンは以下のようになります。

const http = require("http");
const zlib = require("zlib");

const availableGzip = (header) => {
  return typeof header === "string" && Boolean(header && /gzip/i.test(header));
};

const htmlText = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello world page</title>
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
`;

const rootRouter = (req, res) => {
  const message = htmlText;
  if (availableGzip(req.headers["accept-encoding"])) {
    zlib.gzip(Buffer.from(message), (err, data) => {
      res.setHeader("Content-Encoding", "gzip");
      res.setHeader("Content-Length", data.byteLength);
      res.setHeader("Content-Type", "text/html; charset=UTF-8");
      res.writeHead(200);
      res.end(data);
    });
  } else {
    res.setHeader("Content-Length", message.length);
    res.writeHead(200);
    res.end(message);
  }
};

const notFoundRouter = (req, res) => {
  res.write("Not found page");
  res.end();
};

const requestListener = (req, res) => {
  switch (req.url) {
    case "/":
      rootRouter(req, res);
      break;
    default:
      notFoundRouter(req, res);
      break;
  }
};

const server = http.createServer(requestListener);

server.listen(3000);

console.log("Server start: http://localhost:3000");

参考: テキストリソースを圧縮してウェブサイトのパフォーマンスを改善するにもう少し詳しい情報が乗っています。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。