How to deploy a svelte kit app after build using nginx as web server

Question

I have a svelte kit project. I want to deploy the app in an Nginx web server after an npm run build . At the moment I have a node container and I use to start using npm run preview . It's working fine, but I want to deploy in a production environment using build .

How could I do that?

ref: https://kit.svelte.dev/docs#command-line-interface-svelte-kit-build

Answer 1

If you have a static website (ie no endpoints) you should use @sveltejs/adapter-static@next . It will put the files you should serve in /build directory. You can then serve the generated pages using NGINX. A sample NGINX config would be:

server {
        listen 80;
        server_name test.jasonrigden.com;
        root /path/to/build/directory;
        index index.html;
}

If your site is not static you should use @sveltejs/adapter-node and run that in your container. You could put NGINX in front of it to use its features (SSL, load balancing, firewall, etc). After building your site (using npm run build ) you can run node./build/index.js .

Alternatively, you could use Netlify, Vercel, or Cloudflare Pages to host you site.

To see how to change your adapter see the docs .

Good luck!

Answer 2

As @Caleb Irwin said, you can run node./build/index.js

The NGINX configuration will look like this:

upstream sveltekit {
  server 127.0.0.1:3000;
  keepalive 8;
}


server {
  # listen ... 
  # servername ...

  # root ... (folder with an index.html in case of sveltekit being crashed)

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_pass http://sveltekit;
    proxy_redirect off;

    error_page 502 = @static;
  }

  location @static {
    try_files $uri /index.html =502;
  }
}

(I'm not a NGINX pro and welcomes feedback to improve on it)

You may also want to make the SvelteKit app listen only to localhost by adding the environment HOST=127.0.0.1 before running node build/index.js . This will prevent the port 3000 from being reached from the outside.

You can also look into using pm2 to manage the sveltekit process, including running it on each of your cores in cluster mode, automatic restart in case of server crash / reboot.

Answer 3

I've managed to deploy a Svelte Kit non-static app to my Google Cloud Engine virtual machine and serve it using Nginx. I've still got some outstanding questions myself, but so far these are my steps:

1. Run the build locally as per the docs referenced by OP. Local directory: $ npm run build
2. Local directory:$ gcloud compute scp --recurse build/ user@gcpinstance:~/Desktop
3. Local directory:$ gcloud compute scp package*.* user@gcpinstance:~/Desktop
4. On the remote vm, from the directory to which I uploaded my build folder and the package files, (eg~/Desktop$), I run npm install . That re-created the node-modules folder (otherwise it takes forever to upload the node-modules folder from the local machine).
5. ~/Desktop$ mkdir SvelteKitProd/
6. ~/Desktop$ mv package*.* build/ node-modules/ SvelteKitProd/
7. ~/Desktop$ sudo chown -R root:root SvelteKitProd/
8. ~/Desktop$ mv SvelteKitProd/ /var/www/domainname/ 9 ~/Desktop$ cd /var/www/domainname/
9. /var/www/domainname:$ sudo vi /etc/nginx/sites-available/domainname (this is my nginx configuration for this domain and this app).

upstream hijacked-media {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    server_name hijacked.media www.hijacked.media;
    #root /var/www/hijacked.media/sveltekittest/sveltekitprod/PROD-GCP;
    #       index index.html index.htm;
    access_log  /var/log/nginx/hijacked.media.access.log;
    error_log  /var/log/nginx/hijacked.media.error.log;

    location  / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';

        proxy_pass http://hijacked-media;
        proxy_redirect off;
        proxy_read_timeout 240s;
        #proxy_cache_bypass $http_upgrade;
    }


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/hijacked.media/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/hijacked.media/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.hijacked.media) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = hijacked.media) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name hijacked.media www.hijacked.media;
    listen 80;
    return 404; # managed by Certbot


}

11. /var/www/domainname$ pm2 start SvelteKitProd/build/index.js

I'm still trying to figure out what all I need to do in order to serve multiple apps each from its own top-level domain. I was hoping that I could change the PORT once built and uploaded (see the build/index.js file), but so far that isn't working for me. So I'll try building it locally and messing with PM2 and Nginx.