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.
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";
}
}
}
Solution is in this Reddit thread: https://www.reddit.com/r/sveltejs/comments/1fdpxea/sveltekit_application_running_inside_docker/.
Basically:
- Svelte has this thing were requests to the same host turn into function calls, which was causing the hanging
- Changed the Svelte app to directly hit the backend API running on another host inside docker (only for the server sent requests)
- Configured handleFetch to send cookies as per https://kit.svelte.dev/docs/hooks#server-hooks-handlefetch
Many thanks to @khromov!