如何让服务器端渲染的nextjs14应用程序在apache反向代理上提供静态资源

Question

我在 rhel 服务器（上面有节点）上创建了示例 create-next-app@14 nextjs 应用程序，并让它在端口 3000 上运行（使用 npm run dev 或构建后启动）。我还在 apache 上配置了一个反向代理，将 10.xx.xx.09/testwebsite/ 反向代理到 http://localhost:3000/

当我在网络浏览器上访问 10.xx.xx.09/testwebsite/ 时，我可以看到 html，但看不到任何图像或 css 样式。这几乎就像没有提供静态文件一样。我尝试修改我的 next.config.mjs 以设置基本路径，以便 nextjs 为我的静态资产生成正确的路径，但随后网址给了我 404 未找到。

这是我的虚拟主机/反向代理

<VirtualHost *:80>
    ServerName 10.xx.xx.09

    DocumentRoot /var/www/html

    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
    # Proxy settings for requests to /test/
    ProxyPreserveHost On
    ProxyErrorOverride Off
    ProxyPass /testwebsite/ http://localhost:3000/
    ProxyPassReverse /testwebsite/ http://localhost:3000/
</VirtualHost>

Answer 1

示例配置可能会有帮助

 <VirtualHost *:80>
        ServerName 10.xx.xx.09
    
        DocumentRoot /var/www/html
    
        <Directory /var/www/html>
            Options Indexes FollowSymLinks
            AllowOverride All
            Require all granted
        </Directory>
    
        # Proxy settings for /test/
        ProxyPreserveHost On
        ProxyErrorOverride Off
        ProxyPass /testwebsite/ http://localhost:3000/
        ProxyPassReverse /testwebsite/ http://localhost:3000/
    
        # Additional configs for static assets
        ProxyPassMatch ^/testwebsite/_next/static/(.*)$ http://localhost:3000/_next/static/$1
        ProxyPassReverse /_next/static/ http://localhost:3000/_next/static/
    </VirtualHost>