Question 384373 in Apache Question posted in
Some documentation to get you started can be found here.

How to get server-side rendered nextjs14 app to serve static assets on apache reverse proxy

I created the example create-next-app@14 nextjs app on my rhel server (which has node on it) and I let it run on port 3000 (using either npm run dev or start after building). I also configured a reverse proxy on apache to reverse proxy from 10.xx.xx.09/testwebsite/ to http://localhost:3000/

When I visit 10.xx.xx.09/testwebsite/ on my web browser, I can see the html, but none of the images or css styling. It’s almost like the static files aren’t being served. I tried to modify my next.config.mjs to set a basepath so that nextjs would generate the correct paths for my static assets, but then the web address gives me 404 not found.

Here is my virtual host/reverse proxy

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to fix my issue by adding an asset prefix to my next.config.mjs

    module.exports = {
  basePath: '',
  assetPrefix: '/testwebsite',
};

    My apache proxy looks like

    <VirtualHost *:80>
ServerName **********
DocumentRoot /var/www/html

<Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

ProxyPreserveHost On
ProxyErrorOverride Off
# Proxy settings for requests to /testwebsite/
ProxyPass /testwebsite/ http://localhost:3000/
ProxyPassReverse /testwebsite/ http://localhost:3000/
</VirtualHost>

    My nextjs app is running on localhost:3000 on the server/


  2. 0

    Example configuration maybe helpful

     <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search