Nuxt.JS http/2 帮助和建议

Question

我目前正在使用 nuxt.js（使用内置服务器）构建应用程序。也就是说，我一直在通过开发运行 google 灯塔，而且在我的一生中，我无法让它为 http/2 提供服务。

在里面nuxt.config.js我补充说：

render: {
    http2: {
      push: true,
      pushAssets: (req, res, publicPath, preloadFiles) => preloadFiles
        .filter(f => f.asType === 'script' && f.file === 'runtime.js')
        .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
    }
}

也许我不明白 HTTP/2 如何与 nuxt 一起工作，如果有人能提供任何帮助或建议，那就太好了！

Answer 1

在撰写本文时，Nuxt 似乎不支持直接提供 HTTP/2 服务。

最可能的原因是，通常在边缘（负载均衡器、CDN 等）上启用 HTTP/2，边缘使用 HTTP/1 与 Nuxt 服务器进行通信（更多信息）。

不过，您可以为您的 Nuxt 应用程序设置启用 HTTP/2 的 Nginx 代理服务器：

1. 安装和设置 Nginx（初学者指南）

2. 生成 SSL 证书（HTTP/2 需要 HTTPS 连接）

3. 将 Nginx 设置为 Nuxt 应用程序的反向 https http/2 代理，示例配置：

   server {
       server_name  localhost_http2;
       listen 3001 ssl http2;
   
       ssl_certificate /pathTo/server.crt;
       ssl_certificate_key /pathTo/server.key;
   
   
       location / {
           # url of nuxt app
           proxy_pass http://localhost:3000/;
           proxy_buffering off;
           proxy_http_version 1.1;
       }
   }
   

4. 假设你在 http://localhost:3000/ 上运行 nuxt，当访问 https://localhost:3001/ 时，你的应用程序将使用 HTTP/2 提供服务