Laravel 10 + Inertia + Vite behind nginx proxy in docker container- TypeError

Hi all..

I've written my first Inertia project utilising Jetstream (normally I've gone down the Livewire path but wanted to try something different this time). This has gone much better than I initially thought as although I've "dabbled" in VueJS before, I'm far from an expert, but have been pleasantly surprised with Inertia.

That said, I've now deployed this to my server and it breaks! The error received is:

Uncaught (in promise) TypeError: e is null
    nextSibling https://example.com/build/assets/app-1e1c10a4.js:3
    Wt https://example.com/build/assets/app-1e1c10a4.js:3
    Wt https://example.com/build/assets/app-1e1c10a4.js:3
    Wt https://example.com/build/assets/app-1e1c10a4.js:3
    Wt https://example.com/build/assets/app-1e1c10a4.js:3
    b https://example.com/build/assets/app-1e1c10a4.js:3
    Je https://example.com/build/assets/app-1e1c10a4.js:3
    mount https://example.com/build/assets/app-1e1c10a4.js:3
    mount https://example.com/build/assets/app-1e1c10a4.js:3
    setup https://example.com/build/assets/app-1e1c10a4.js:82
    y https://example.com/build/assets/app-1e1c10a4.js:78
    promise callback*Dm https://example.com/build/assets/app-1e1c10a4.js:78
    <anonymous> https://example.com/build/assets/app-1e1c10a4.js:82
app-1e1c10a4.js:3:69298
    Dm https://example.com/build/assets/app-1e1c10a4.js:78
    AsyncFunctionThrow self-hosted:814
    (Async: async)
    <anonymous> https://example.com/build/assets/app-1e1c10a4.js:82

However, if I hit the docker container directly (eg: http://example.com:8000) instead of through the proxy, I don't get that error and the site works as expected instead of showing a blank white page.

The nginx proxy config for this is the same as what's powering multiple other Laravel sites on the server (though none using Inertia) with the biggest difference is that this is the only site that uses Vite as a build process (all of the other sites are still using Mix).

Is there something "special" needed in nginx proxy config when using Vite assets? There wasn't anything obvious when using the build process.

This is the nginx proxy config:

server {
    server_tokens off;
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/sslcerts/example.com/fullchain.pem;
    ssl_certificate_key /etc/sslcerts/example.com/privkey.pem;

    include /etc/nginx/ssl/ssl.conf;
    include /etc/nginx/ssl/headers.conf;

    root /var/www/example.com/public;
    index index.php index.html index.htm;

    location / { 
        proxy_set_header X-Real-IP X-Forwarded-For;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_pass http://127.0.0.1:8000;
    }   

    # Set max upload size
    client_max_body_size 10M;
    fastcgi_buffers 64 4k; 

    # Global config options
    include /etc/nginx/global/global.conf;

    fastcgi_param HTTPS on; 

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
}

The container is currently running on 0.0.0.0:8000->80.

Then Vite config etc is as-is default from Laravel+Inertia's init process. Nothing has varied from the defaults at all. I've only added a few simple CRUD pages to the application following what was already there.

Maybe I'm barking up the wrong tree and this isn't a Vite issue, maybe an Inertia issue... not being a front-end (JS) dev, I'm really not sure.

Any thoughts/info/help/advice on this would be greatly appreciated! I can't afford to lose much more hair! 😆

Cheers..

Ian

ian_h

3 years ago

Best Answer

Level 20

So typically, as soon as you post a question, you stumble across an answer!

As my docker containers only run under port 80 (the nginx proxy provides the SSL layer), I normally add the following to the AppServiceProvider's boot() method:

if (!$this->app->environment('local')) {
    URL::forceScheme('https');
}

This forces all of the assets and "internal URLs" to use HTTPS, which resolves problems such as images loading under HTTP, or form submissions (especially authentication for example) complaining that they're under HTTP despite them being proxied through an SSL layer.

However, it appears this isn't enough for (I'm guessing) Inertia and I stumbled across the following line that I wrapped in a conditional, that appears to resolve the issue for me.

In the AppServiceProvider's register() method:

if (!$this->app->environment('local')) {
    $this->app['request']->server->set('HTTPS', true);
}

Cheers..

Ian

3 likes

Please or to participate in this conversation.