Strange issue with Nginx redirecting Next.js standalone app run by PM2

29 Views Asked by At

I have a simple NextJs 14 application using tailwind CSS. It's output configuration is set to standalone like so (next.config.js) -

    /** @type {import('next').NextConfig} */
const nextConfig = {
    output: "standalone"
}

module.exports = nextConfig

Then I run server.js script using pm2-runtime (it's a docker container to be deployed on the cloud) on port 3000, and nginx is also run which redirects it to port 80

So remember that my next.js + PM2 is exposed on port 3000, and next.js + PM2 + Nginx (redirection) is exposed on port 80

The issue: No fonts or styles are getting rendered on port 80 for some reason. However, port 3000 is fine. So it seems that the application run by PM2 is working fine, but when NGINX merely redirects it to port 80, it is introducing issues

NOTE: I am getting these warnings only on port 80 (nginx) and not on port 3000: Font related warnings in browser console on port 80

Webpage on Port 3000:

Port 3000 view of my app, renders fonts and styles

All files are getting fetched properly

Webpage on Port 80:

Port 80 view of my app, is not rendering styles/fonts All files are getting fetched properly here too but styles not being applied

My application folder structure IN THE DEPLOYED CONTAINER: enter image description here

Relevant portion of my dockerfile:

WORKDIR /app
RUN apk add --no-cache nginx

# Create startup script
RUN echo "nginx; pm2-runtime start server.js" > startup.sh && chmod +x startup.sh
EXPOSE 80
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"
CMD ["/app/startup.sh"]

This is my nginx.conf:

    events {}
http {
    server {
        listen 80;
        server_name fakeurl.com www.fakeurl.com;

        location / {
            proxy_pass http://127.0.0.1:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        location /_next/static {
            alias /app/.next/static;
            sendfile on;
            sendfile_max_chunk 1m;
            add_header Cache-Control "public, max-age=31536000, immutable";
        }

        location /public {
            alias /app/public;
            sendfile on;
            sendfile_max_chunk 1m;
            add_header Cache-Control "public, max-age=31536000, immutable";
        }

        error_log /var/log/nginx/error.log;
    }
}
0

There are 0 best solutions below