Next.js独立模式部署EC2(Apache)时CSS文件无法加载求助

需要针对静态文件添加Apache配置，因为Next.js独立模式构建后，CSS、JS等静态资源存放在项目目录的.next/static路径下，当前配置把所有请求都转发给Node.js服务（3000端口），但静态资源可以直接由Apache托管，更高效也能避免路径问题。

修改你的Apache虚拟主机配置如下：

<VirtualHost *:80>
        ServerAdmin webmaster@example.com
        ServerName example.com
        ServerAlias www.example.com
        DocumentRoot /var/www/example/nextjs-app

        ProxyRequests off
        ProxyPreserveHost on
        ProxyVia Full
        <Proxy *>
                Require all granted
        </Proxy>

        # 直接托管Next.js静态资源
        Alias /_next/static /var/www/example/nextjs-app/.next/static
        <Directory /var/www/example/nextjs-app/.next/static>
                Require all granted
                Options -Indexes
        </Directory>

        # 排除静态资源路径，其他请求转发给Node.js服务
        ProxyPass /_next/static !
        ProxyPass / http://127.0.0.1:3000/
        ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

关键配置说明： #

• 取消DocumentRoot的注释并设置正确的项目根路径，让Apache能找到静态资源目录。
• Alias /_next/static：把请求路径/_next/static映射到实际磁盘上的.next/static目录。
• <Directory>块：授予Apache访问该静态目录的权限，同时禁用索引浏览（安全起见）。
• ProxyPass /_next/static !：告诉Apache不要把/_next/static开头的请求转发给Node.js，而是自己处理。

修改完成后，重启Apache服务（sudo systemctl restart apache2），刷新页面就能正常加载CSS样式了。

内容的提问来源于stack exchange，提问作者Anonymous