如何在构建后使用 nginx 作为 Web 服务器部署 svelte kit 应用程序

Question

我有一个 svelte 套件项目。我想在 npm run build 之后将应用程序部署到 Nginx Web 服务器中。目前我有一个节点容器，我开始使用 npm run preview。它工作正常，但我想使用 build.

在生产环境中部署

我该怎么做？

参考：https://kit.svelte.dev/docs#command-line-interface-svelte-kit-build

Answer 1

如果您有一个静态网站（即没有端点），您应该使用 @sveltejs/adapter-static@next。它会将您应该提供的文件放在 /build 目录中。然后，您可以使用 NGINX 提供生成的页面。示例 NGINX 配置为：

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

如果您的网站不是静态的，您应该在容器中使用 @sveltejs/adapter-node 和运行。您可以将 NGINX 放在它前面以使用它的功能（SSL、负载平衡、防火墙等）。建立网站后（使用 npm run build），您可以运行 node ./build/index.js.

或者，您可以使用 Netlify、Vercel 或 Cloudflare Pages 来托管您的网站。

要了解如何更改适配器，请参阅 docs。

祝你好运！

Answer 2

正如@Caleb Irwin 所说，您可以运行 node ./build/index.js

NGINX 配置如下所示：

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;
  }
}

（我不是 NGINX 专家，欢迎提供反馈以改进它）

您可能还想通过在运行ning node build/index.js 之前添加环境 HOST=127.0.0.1 让 SvelteKit 应用仅侦听本地主机。这将防止从外部访问端口 3000。

您还可以考虑使用 pm2 来管理 sveltekit 进程，包括运行以集群模式在每个内核上安装它，在服务器崩溃/重启时自动重启。

Answer 3

我已经设法将 Svelte Kit 应用程序部署到我的 Google Cloud Engine 虚拟机并使用 Nginx 为其提供服务。我自己还有一些悬而未决的问题，但到目前为止，这些是我的步骤：

运行根据 OP 引用的文档在本地构建。本地目录：$ npm run build
本地目录：$gcloud compute scp --recurse build/ user@gcpinstance:~/Desktop
本地目录：$gcloud compute scp package*.* user@gcpinstance:~/Desktop
在远程虚拟机上，从我将构建文件夹和包文件上传到的目录（例如 ~/Desktop$），我运行 npm install。这重新创建了节点模块文件夹（否则需要永远从本地计算机上传节点模块文件夹）。
~/桌面$mkdir SvelteKitProd/
~/桌面$mv package*.* build/ node-modules/ SvelteKitProd/
~/桌面$sudo chown -R root:root SvelteKitProd/
~/桌面$mv SvelteKitProd/ /var/www/domainname/ 9 ~/桌面$ cd /var/www/domainname/
/var/www/domainname:$ sudo vi /etc/nginx/sites-available/domainname（这是我对这个域和这个应用程序的 nginx 配置）。

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


}

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

我仍在努力弄清楚我需要做些什么才能为多个应用程序提供服务，每个应用程序都来自其自己的顶级域。我希望我可以在构建和上传后更改 PORT（请参阅 build/index.js 文件），但到目前为止这对我不起作用。因此，我将尝试在本地构建时指定一个唯一的端口号，或者在上传到远程服务器后对其进行修改；或者可能使用 PM2 和 Nginx 让多个应用程序在同一个端口上工作，例如3000.

如何在构建后使用 nginx 作为 Web 服务器部署 svelte kit 应用程序

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

deployment

nginx

node.js

svelte

sveltekit