Question posted in
The official documentation can be found here.

SvelteKit Application running inside Docker proxied by NGINX hangs on event.fetch to API running on same domain

So I have this SvelteKit application running on a Docker container on my server using node-adapter. I also have a .NET backend running on Docker in the same server. Both applications are proxied by NGINX (config below). I can confirm that the .NET API is working as expected, but the SvelteKit frontend hangs on a fetch request to my API. Code for the request looks like this:

event.fetch("https://example.com/api/users/me")

And it just hangs, not even an error is throwing, which I know because I have the call surrounded by a try-catch and I am logging any errors. And yes, logging is enabled with minimum level of INFO, so error logs should be visible (using pino logger).

Also, hitting the Docker container directly also causes the application to hang.

Here is my NGINX config:

server {
        listen 80;                                            
        server_name example.com;
        return 301 https://$host:443$request_uri;
}
                                                       
server {
        listen 443 ssl;
        server_name example.com;

        ssl_certificate /etc/nginx/ssl/fullchain.pem;
        ssl_certificate_key /etc/nginx/ssl/privkey.pem;
                                                                
        location / {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $host;                           
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /api/ {
                proxy_pass http://localhost:5000/api/;            
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;                                                             }

        location /signin-cas/ {
                proxy_pass http://localhost:5000/signin-cas/;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
}

And my Dockerfile

FROM node:20 as build

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./

ARG PUBLIC_API_BASE_URL
ARG PUBLIC_APP_BASE_URL
ARG PUBLIC_CAS_COOKIE_NAME

RUN npm install

COPY . ./
RUN NODE_OPTIONS="--max_old_space_size=1512" npm run build

FROM node:20

COPY --from=build /app/build ./build
COPY package.json ./
COPY package-lock.json ./

RUN npm ci --omit dev

CMD ["node", "build"]

I’ve also set the environment variables as recommended here: https://kit.svelte.dev/docs/adapter-node.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solution is in this Reddit thread: https://www.reddit.com/r/sveltejs/comments/1fdpxea/sveltekit_application_running_inside_docker/.

    Basically:

    1. Svelte has this thing were requests to the same host turn into function calls, which was causing the hanging
    2. Changed the Svelte app to directly hit the backend API running on another host inside docker (only for the server sent requests)
    3. Configured handleFetch to send cookies as per https://kit.svelte.dev/docs/hooks#server-hooks-handlefetch

    Many thanks to @khromov!


  2. 0

    At the final line of Dockerfile you call node build. This command does not start SvelteKit application. It just builds an application and creates .svelte-kit and build folders inside your project (if you did not changed it).
    If you use node-adapter you should start your application at the end of your Dockerfile.
    It must be something like this:

    CMD ["node", "build/index.js"]

    It hangs without errors because you told docker just to build an app and that’s it. Command CMD must start an app.

    Moreover, you should expose a port for your application and write this port in nginx.conf. I guess you plan to use nginx as reverse-proxy.
    Mean you should create one more nginx.conf besides main which is lying on your server and add additional info about your application. E.g. you host your SvelteKit application on 5000 port. You should expose this port in Dockerfile like this:

    EXPOSE 5000

    and add one more nginx.conf like this

    worker_processes auto;

events {
    worker_connections 8000;
    multi_accept on;
}

http {
    include   /etc/nginx/mime.types;

    server {
        listen 5000;
        listen [::]:5000;

        gzip on;
        gzip_types text/plain text/html application/javascript application/x-javascript text/javascript text/css;

        root /build;

        location / {
            try_files $uri $uri/ /index.html;
        }

        location ~* .(?:css|js)$ {
            access_log        off;
            log_not_found     off;

            add_header        Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
        }

        location ~* .(?:jpg|jpeg|gif|png|ico|xml)$ {
            access_log        off;
            log_not_found     off;

            expires           48h;

            add_header        Cache-Control "public";
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search