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

Question

我有一个苗条的套件项目。我想在npm run build 之后将应用程序部署在 Nginx Web 服务器中。目前我有一个节点容器，我曾经开始使用npm run preview。它工作正常，但我想使用build 在生产环境中部署。

我该怎么做？

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

Answer 1

正如@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 专业人士，欢迎提供反馈以改进它）

您可能还希望通过在运行 node build/index.js 之前添加环境 HOST=127.0.0.1 来使 SvelteKit 应用程序仅侦听 localhost。这将防止从外部访问端口 3000。

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

Answer 2

如果您有一个静态网站（即没有端点），您应该使用@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 3

我已成功将 Svelte Kit 应用部署到我的 Google Cloud Engine 虚拟机并使用 Nginx 提供服务。我自己还有一些悬而未决的问题，但到目前为止，我的步骤如下：

1. 根据 OP 引用的文档在本地运行构建。本地目录：$ npm run build
2. 本地目录：$gcloud compute scp --recurse build/ user@gcpinstance:~/Desktop
3. 本地目录：$gcloud compute scp package*.* user@gcpinstance:~/Desktop
4. 在远程虚拟机上，从我上传构建文件夹和包文件的目录（例如~/Desktop$），我运行npm install。这重新创建了 node-modules 文件夹（否则从本地机器上传 node-modules 文件夹需要很长时间）。
5. ~/桌面$mkdir SvelteKitProd/
6. ~/桌面$mv package*.* build/ node-modules/ SvelteKitProd/
7. ~/桌面$sudo chown -R root:root SvelteKitProd/
8. ~/桌面$mv SvelteKitProd/ /var/www/domainname/ 9 ~/桌面$cd /var/www/domainname/
9. /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


}

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

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