"Websocket connection failed"通过 Apache 服务器将请求代理到 Next.js 应用程序时

Question

由于升级到Next.js 12，当我运行Next.jss应用程序时，控制台中出现以下错误：

WebSocket连接到wss://mysite.local/_next/webpack-hmr'失败

我发现这与使用web套接字进行HMR连接的Next.js 12有关(与以前的Next.jsp版本不同(。在升级到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实现这一点的示例。我对服务器配置或网络套接字知之甚少，所以我希望能帮我消除这个烦人的错误。

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

<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

我做了什么让它工作：

<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>

Answer 2

您可以为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>