当通过Apache服务器向Next.js应用程序代理请求时，"Websocket连接失败“

Question

自从升级到Next.js 12之后，在运行Next.js应用程序时，控制台中出现了以下错误：

指向'wss://mysite.local/_next/webpack-hmr‘的WebSocket连接失败

我发现这与使用Next.js 12进行HMR连接(与以前的Next.js版本不同)有关。在将指南升级到Next.js 12的过程中，文档在使用Nginx时提供了以下代码片段作为修复：

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

但是，我使用Apache将请求代理到我的Next.js应用程序，但找不到如何使用Apache实现此操作的示例。我对服务器配置或web套接字知之甚少，所以我希望能在消除这个恼人的错误方面提供一些帮助。

我四处寻找，自己尝试了一些东西，但都没有成功。下面是我所做的一次尝试(注意底部的重写规则)：

<VirtualHost *:443>
   ServerName mysite.local
   DocumentRoot "/Users/grazianodev/Projects/mysite"
   SSLEngine On
   SSLCertificateFile "/Users/grazianodev/Projects/.crt/mysite.local.pem"
   SSLCertificateKeyFile "/Users/grazianodev/Projects/.crt/mysite.local-key.pem"    
   ProxyPass / http://localhost:3000/
   ProxyPassReverse / http://localhost:3000/
   RewriteEngine on
   RewriteCond %{HTTP:Upgrade} websocket [NC]
   RewriteCond %{HTTP:Connection} upgrade [NC]
   RewriteRule ^/?(.*) "wss://mysite.local/$1" [P,L]   
</VirtualHost>

Answer 1

您可以为Apache尝试类似于下面的内容。您可能需要调整端口，而我还没有对其进行测试：

<VirtualHost *:443>
   ServerName mysite.local
   DocumentRoot "/Users/grazianodev/Projects/mysite"
   SSLEngine On
   SSLCertificateFile "/Users/grazianodev/Projects/.crt/mysite.local.pem"
   SSLCertificateKeyFile "/Users/grazianodev/Projects/.crt/mysite.local-key.pem"    
   ProxyPass / http://localhost:3000/
   ProxyPassReverse / http://localhost:3000/
   RewriteEngine on
   RewriteCond %{HTTP:Upgrade} websocket [NC]
   RewriteCond %{HTTP:Connection} upgrade [NC]
   
   ## Match webpack-hmr to mysite.local
   ProxyPreserveHost On
   ProxyPassMatch ^/(_next/webpack-hmr)$  wss://mysite.local/$1
</VirtualHost>

Answer 2

我做了什么让它发挥作用：

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"

 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/

 # Next.js 12 uses websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
 </Location>
</VirtualHost>