如何使用nginx作为Web服务器构建后部署苗条套件应用程序

lsmepo6l  于 2023-10-17  发布在  Nginx
关注(0)|答案(4)|浏览(174)

我有一个苗条的工具包项目。我想在npm run build之后在Nginx Web服务器上部署应用程序。目前我有一个节点容器,我开始使用npm run preview。它工作得很好,但我想在使用build的生产环境中进行部署。
我怎么能这么做
参考:https://kit.svelte.dev/docs#command-line-interface-svelte-kit-build

ddhy6vgd

ddhy6vgd1#

正如@Caleb欧文所说,您可以运行node ./build/index.js
NGINX配置看起来像这样:

  1. upstream sveltekit {
  2. server 127.0.0.1:3000;
  3. keepalive 8;
  4. }
  5. server {
  6. # listen ...
  7. # servername ...
  8. # root ... (folder with an index.html in case of sveltekit being crashed)
  9. location / {
  10. proxy_set_header X-Real-IP $remote_addr;
  11. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  12. proxy_set_header X-NginX-Proxy true;
  13. proxy_set_header X-Forwarded-Proto $scheme;
  14. proxy_pass http://sveltekit;
  15. proxy_redirect off;
  16. error_page 502 = @static;
  17. }
  18. location @static {
  19. try_files $uri /index.html =502;
  20. }
  21. }

(我不是NGINX专业人士,欢迎反馈以改进它)
您可能还希望通过在运行node build/index.js之前添加环境HOST=127.0.0.1来使SvelteKit应用程序只侦听localhost。这将防止从外部到达端口3000。
您还可以考虑使用pm2来管理sveltekit进程,包括在集群模式下在每个核心上运行它,在服务器崩溃/重新启动时自动重新启动。

展开查看全部
n3schb8v

n3schb8v2#

如果你有一个静态网站(即没有端点),你应该使用@sveltejs/adapter-static@next。它将把你应该提供的文件放在/build目录下。然后,您可以使用NGINX提供生成的页面。一个Nginx配置示例如下:

  1. server {
  2. listen 80;
  3. server_name test.jasonrigden.com;
  4. root /path/to/build/directory;
  5. index index.html;
  6. }

如果你的网站不是静态的,你应该使用@sveltejs/adapter-node并在你的容器中运行它。你可以把NGINX放在它前面来使用它的功能(SSL,负载平衡,防火墙等)。在构建您的站点(使用npm run build)之后,您可以运行node ./build/index.js
或者,您可以使用Netlify,Vercel或Cloudflare Pages来托管您的网站。
要了解如何更改适配器,请参阅文档。
祝你好运!

vu8f3i0k

vu8f3i0k3#

我已经成功地将Svelte Kit应用程序部署到我的Google Cloud Engine虚拟机,并使用Nginx为其提供服务。我自己还有一些悬而未决的问题,但到目前为止,这些是我的步骤:
1.根据OP引用的文档在本地运行构建。本地目录:$ npm run build
1.本地目录:$gcloud compute scp --recurse build/ user@gcpinstance:~/Desktop
1.本地目录:$gcloud compute scp package*.* user@gcpinstance:~/Desktop
1.在远程虚拟机上,从我上传构建文件夹和包文件的目录(例如~/Desktop$),我运行npm install。这将重新创建node-modules文件夹(否则将永远无法从本地计算机上载node-modules文件夹)。
1.~/桌面$mkdir SvelteKitProd/
1.~/桌面$mv package*.* build/ node-modules/ SvelteKitProd/
1.~/桌面$sudo chown -R root:root SvelteKitProd/
1.~/桌面$mv SvelteKitProd/ /var/www/domainname/ 9 ~/桌面$cd /var/www/domainname/
1./var/www/domainname:$sudo vi /etc/nginx/sites-available/domainname(这是我对这个域名和这个应用程序的nginx配置)。

  1. upstream hijacked-media {
  2. server 127.0.0.1:3000;
  3. keepalive 64;
  4. }
  5. server {
  6. server_name hijacked.media www.hijacked.media;
  7. #root /var/www/hijacked.media/sveltekittest/sveltekitprod/PROD-GCP;
  8. # index index.html index.htm;
  9. access_log /var/log/nginx/hijacked.media.access.log;
  10. error_log /var/log/nginx/hijacked.media.error.log;
  11. location / {
  12. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  13. proxy_set_header X-Real-IP $remote_addr;
  14. proxy_set_header Host $host;
  15. proxy_http_version 1.1;
  16. proxy_set_header Upgrade $http_upgrade;
  17. proxy_set_header Connection 'upgrade';
  18. proxy_pass http://hijacked-media;
  19. proxy_redirect off;
  20. proxy_read_timeout 240s;
  21. #proxy_cache_bypass $http_upgrade;
  22. }
  23. listen 443 ssl; # managed by Certbot
  24. ssl_certificate /etc/letsencrypt/live/hijacked.media/fullchain.pem; # managed by Certbot
  25. ssl_certificate_key /etc/letsencrypt/live/hijacked.media/privkey.pem; # managed by Certbot
  26. include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  27. ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
  28. }
  29. server {
  30. if ($host = www.hijacked.media) {
  31. return 301 https://$host$request_uri;
  32. } # managed by Certbot
  33. if ($host = hijacked.media) {
  34. return 301 https://$host$request_uri;
  35. } # managed by Certbot
  36. server_name hijacked.media www.hijacked.media;
  37. listen 80;
  38. return 404; # managed by Certbot
  39. }

1./var/www/domainname $pm2 start SvelteKitProd/build/index.js
我仍在试图弄清楚我需要做些什么才能从自己的顶级域中为多个应用程序提供服务。我希望我可以在构建和上传后更改PORT(请参阅build/index.js文件),但到目前为止,这对我不起作用。因此,我将尝试在本地构建它时指定一个唯一的端口号,或者在上传到远程服务器时对其进行修改;或者使用PM2和Nginx使多个应用程序在同一个端口上工作,例如3000.

展开查看全部
chy5wohz

chy5wohz4#

此配置用于使用node-adapter运行SvelteKit。

  1. upstream sveltekit-server {
  2. server 127.0.0.1:3000;
  3. keepalive 8;
  4. }
  5. server {
  6. listen 80;
  7. server_name mydomain.com;
  8. root /home/deploy/frontend/build/client;
  9. location / {
  10. try_files $uri $uri/ @sveltekit;
  11. }
  12. location @sveltekit {
  13. proxy_set_header Host $http_host;
  14. proxy_set_header X-Real-IP $remote_addr;
  15. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  16. proxy_set_header X-NginX-Proxy true;
  17. proxy_set_header X-Forwarded-Proto $scheme;
  18. proxy_set_header X-Sendfile-Type X-Accel-Redirect;
  19. proxy_pass http://sveltekit-server;
  20. proxy_redirect off;
  21. # error_page 502 = @static;
  22. }
  23. location ^~ /_app/immutable/ {
  24. # gzip_static on;
  25. expires max;
  26. add_header Cache-Control public;
  27. access_log off;
  28. try_files $uri $uri/ @sveltekit;
  29. }
  30. }

要点是
https://gist.github.com/dukejones/01fd7ddbfc8cdac4e02c6105d26ca7fe
nginx最好的一点是它可以只为静态文件提供强大的缓存,用于内容散列命名的不可变文件,并将其余部分传递到nodejs服务器。
当然,可以使用一些进程管理器,比如pm2来保持nodejs服务器的运行。

展开查看全部

相关问题