Rust Yew应用程序在本地笔记本电脑/PC上工作,不支持nginx

nimxete2  于 2023-08-03  发布在  Nginx
关注(0)|答案(2)|浏览(110)

这是很容易解决的问题(我希望)我以前从未部署过wasm应用程序,现在我有一个工作的前端(rust yew)和后端(actix)在我的笔记本电脑和PC上本地工作,当我运行它没有nginx,只是原始开发。问题来了,当我有:

  • 部署在远程服务器上
  • 已部署后端,在端口8000上侦听正常工作:cargo watch -q -c -w src/ -x run这是暂时的,直到我得到一切工作,然后我将研究如何运行,没有货物 *
  • 添加了前端在nginx后面工作,它加载并工作,直到我尝试创建一个用户或与后端API对话的任何东西。
server {
    listen 443 ssl; # IPv4
    listen [::]:443 ssl; # IPv6
    server_name my-portal.org;

    
    ssl_certificate /etc/letsencrypt/live/my-portal.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/my-portal.org/privkey.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams-2048.pem;

   #this is temp until is running ok, is a simple way to not allow people to play with it. 
    auth_basic           "Invitation Token";
    auth_basic_user_file /etc/nginx/.htpasswd;

    location / {
      root /home/portal/my-portal/dist;
      try_files $uri $uri/ /index.html;
    }

字符串

  • 我用trunk build --release构建了紫杉wasm
  • 这将文件放入nginx指向的“dist”文件夹中。

什么是不对的:- 我没有看到我的应用程序与我的后端对话,就像我在我的开发环境中一样,使用curl curl localhost:80000/test工作正常
我怀疑这可能是:- Web Socket我只是发现我得到当我检查网站,并试图连接到:wss://my-portal.org/_trunk/ws

NS_ERROR_WEBSOCKET_CONNECTION_REFUSED

  • CORS是错的?(即使我添加了允许的来源相同,我看到的标题一样
# I have on my local only the localhost in deployement I add the domain, because it was not # working I added/changing this adding/removing diff options.

 HttpServer::new(move || {
        let cors = Cors::default()
            .allowed_origin("http://127.0.0.1:3000")
            .allowed_origin("http://127.0.0.1")
            .allowed_origin("https://my-portal.org")
            .allowed_methods(vec!["GET", "POST", "OPTIONS"])
            .allowed_headers(vec![
                header::CONTENT_TYPE,
                header::AUTHORIZATION,
                header::ACCEPT,
            ])

  • 我怀疑我需要为WS添加其他东西到nginx?也许是因为这个问题?PD:试图查看一个紫杉前端项目的nginx配置示例,但我一直在搜索没有成功:(

我找到的唯一一个紫杉例子是:https://www.workfall.com/learning/blog/deploy-a-yew-rust-application-on-an-aws-ec2-ubuntu-instance-nginx/因为是wasm它不需要像backen那样自己运行,nginx可以加载它的index.html,这会加载在浏览器上运行的wasm二进制文件,所以不需要反向代理现在正在运行nginx,我需要websockets以某种方式工作tho。更多的信息在为什么这不应该运行在自己的web服务器上,nginx应该这样做,是一个前端而不是后端。https://github.com/yewstack/yew/issues/2376

wsxa1bj1

wsxa1bj11#

这与紫杉没有什么关系,但与你的nginx配置有关。
您共享的配置没有实际连接到端口80000上正在运行的服务的条目。
你需要一行代码将nginx配置为proxy。以便它将请求沿着到后端。
通常,它看起来像这样:

server {
  listen 443 ssl;
  listen [::]:443;

  ## SSL cert stuff here.

  root /path/to/app/public/data;

  server_name example.com;

  try_files $uri/index.html $uri @app;

  location @app {
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header Host $http_host;
     proxy_set_header X-Forwarded-Proto https;
     proxy_redirect off;
     proxy_pass http://localhost:80000;
  }
}

字符串
因为你还需要websockets,你需要some additional nginx魔法。

location /ws/ {
    proxy_pass http://localhost:80000; # Or whatever port yew has websockets exposed on.
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}


这将把对www.example.com的任何请求升级example.com/ws到WebSocket连接。您可能需要为生产进一步微调。正如文章中所提到的,a. o。以正确地关闭连接。

n1bvdmb6

n1bvdmb62#

好吧,我是对的,问题不在nginx,,rust yew是一个webassembly站点,因此完全在浏览器/客户端运行,因此根本不需要nginx作为反向代理来服务wasm二进制文件,只需将其作为常规站点运行,所以我需要做几个步骤:

  • websockets需要在https/wss下运行,这是自动修复,当作为一个普通的站点运行时,而不是尝试使用proxy_pass for / location。
  • 这里的主要问题是在第一次在我的错误与cors,但有人告诉我是不是真正的cors的问题,但浏览器需要访问后端,但应用程序正在寻找localhost是为什么它是在我的笔记本电脑/PC上工作。

解决方案:暴露后端端口,将紫杉前端更改为按域而不是本地主机调用,以便客户端知道联系服务器,然后nginx将反向仅代理/API,这是我在后端暴露的
示例:

server {
    listen 443 ssl; # IPv4
    listen [::]:443 ssl; # IPv6
    server_name my-portal.org;

    
    ssl_certificate /etc/letsencrypt/live/my-portal.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/my-portal.org/privkey.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams-2048.pem;

    
    auth_basic           "Invitation Token";
    auth_basic_user_file /etc/nginx/.htpasswd;

    location / {
      root /home/portal/my-portal/dist;
      try_files $uri $uri/ /index.html;
      include /etc/nginx/mime.types;
      default_type application/octet-stream;
    }
 
    location /api {
        proxy_pass        http://localhost:8000;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  Host $http_host;

    }
}

字符串
现在一切正常,前端100%从nginx工作,而不是它自己的开发Web服务器,这对前端来说是错误的,后端是的,只有/API暴露给前端,这是一个运行在人们浏览器上的wasm。

相关问题