How to deploy SvelteKit in VPS, AWS EC2 or Lightsail?
Deploying SvelteKit can be a tricky job, especially when you're doing it for the first time, unlike me. But, after a few deployments, you get used to with it. So, today, I am guiding you through it, and giving you exact ways to deploy and run your SvelteKit in the server.Also, will be talking about something that I personally developed, called svelte-deploy command.SvelteKit configurationFirst of all, you need a module to be installed in your sveltekit project, @sveltejs/adapter-node;npm install @sveltejs/adapter-nodeNow, you have to configure your svelte.config.js, by adding replacing that upper module with @sveltejs/adapter-auto;import adapter from '@sveltejs/adapter-node';
// ^
// replace @sveltejs/adapter-auto |
const config = {
preprocess: [
vitePreprocess(),
preprocess({
postcss: true
})
],
...Now, your SvelteKit setup is almost done.Server setupIf you have installed git in your Lightsail server then what you have to do is, clone your repo to a specific folder.Creating a service setupNow, we need to create a service setup /etc/systemd/system/<your_svelte_service_name>.service:[Unit]
Description=SvelteApp
After=network.target
[Service]
User=root
Group=www-data
WorkingDirectory=/home/ubuntu/svelte-apps/<path-to-your-app>
ExecStart=/home/ubuntu/.nvm/versions/node/v19.8.0/bin/node /home/ubuntu/svelte-apps/<path-to-your-app>/build/index.js
Environment=PORT=3099 ORIGIN=https://yoursite.com
[Install]
WantedBy=multi-user.targetMake sure you have installed NodeJs, suggested to installed it using nvm. You can see learn about installing nvm here.And to checkout the path of your current running node, use whereis node, and paste your preferred node to ExecStart=path_to_node path_to_index.jsNginx Setupupstream sveltekit-frontend {
server localhost:3099;
}
server {
listen 80;
listen [::]:80;
set $app_dir "/home/ubuntu/svelte-apps/<path-to-your-app>"; # not required
server_name yoursite.com;
location / {
proxy_pass http://sveltekit-frontend;
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;
}
}Now, run;sudo nginx -tIf result is:nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successfulIt's usually good, and you're ready to go. (if not, ask below, happy to help)Restart the servicesNow, restart the nginx and the created services:sudo systemctl enable <your_svelte_service_name>.service;
sudo systemctl start <your_svelte_service_name>.service;
sudo systemctl restart nginx.service;Done, now your site is up and running. Lemme know if you need help.Have a good day 😊
Published 2 months ago 3 likes 548
watched 0
commented
