Nginx服务、Vite项目如何设置ws（websocket）代理？

ZERO丶X 2023-12-29 原文

一、前言

最近干活中遇到请求访问地址代理的问题，http请求代理到是没啥问题，主要是WebSocket代理配置，今天折腾了一上午加下午一小时，才将其配置好，主要是部署服务器的时候nginx这一块不太清楚，作为一个初级前端，确实还有待提高。本文主要细致的讲解一下ws代理如何设置，在开发环境主要是vite代理设置方法，生产环境给Nginx设置代理。

请求地址及处理

在代码编写过程中，主要是url应该如何拼写，下面是项目中使用的请求地址：

//动态获取地址
const wsUrl = `ws://${location.host}/wsUrl/test`; 
// 创建连接
const socket = new WebSocket(wsUrl);

这里的地址需要注意/wsUrl，这个是拦截代理的标志（ps：这里也可以写别的路径替换/wsUrl，它不是必须的，但是后面配置需要注意这个标识），在前端用于标识ws请求，在设置代理的过程中主要用于请求拦截标识，实际请求会去掉它。

实际访问后台的地址: ws://IP:Port/test
前端访问的ws请求地址：ws://IP:Port/wsUrl/test

之所以加一层路径，主要还是为了拦截ws请求所用，具体理解可以看下面的配置方法。

Vite项目内配置ws代理设置

在vite的配置文件vite.config.ts/js文件中添加如下代理配置。

{
  base: "/",
  ...
  server:{
    proxy:{
      "/wsUrl":{
        target: "ws://127.0.0.1:8080", //这里是后台ws访问地址
        changeOrigin: true, //允许跨域设置
        ws: true, //websocket代理设置
        rewrite: (path)=> path.replace(/~\/wsUrl/,""), //拦截路径去除
      },
    },
  },
  ...
}

以上就是vite项目内设置ws代理的配置方法，可以看到vite中使用路径重写（rewrite）去除了/wsUrl，经过代理后最终访问的是上述的实际地址，所以这个标识只是用于拦截对应的ws请求。

nginx项目中配置方法

nginx配置文件一般相对位置都在 ./nginx/conf文件夹中，打开nginx.conf文件即可修改代理配置内容。

我使用的是Linux服务，文件位置在/usr/local/nginx/connf/文件夹中，具体位置不同系统镜像文件位置可能略有差异，找到配置文件即可。

nginx设置代理稍有不同，在我配置代理过程中采坑也不少（主要还是菜了），反复测试才有了如下可行结果：

...
http:{
  ...
  server{
    ...
    # WebSocket代理
    location /wsUrl/ {
      rewrite ^/wsUrl/(.*)$ /$1 break; #拦截标识去除
      proxy_pass http://192.168.100.20:8080; #这里是http不是ws，不用怀疑，代理的ip和port写ws访问的实际地址
      proxy_http_version 1.1; #这里必须使用http 1.1
      #下面两个必须设置，请求头设置为ws请求方式
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
    ...
  }
  ...
}

rewrite这里正则写法不太清楚，但必须是上述格式，好像是匹配替换/wsUrl，不能去掉后面的斜杠（/），编写完成配置文件保存后，需要重启nginx服务，重启后使用上述前端访问地址发起ws请求即可成功连接到代理服务。

小结

设置代理还是需要理解其中运行的逻辑，不管是开发环境代理，还是生产环境代理，本质上都是一样的，通过正则匹配请求对应路径进行拦截，然后拦截后对请求进行处理，在本文演示示例中，主要是去除了/wsUrl路径再转发请求，如果请求后台的路径是/wsUrl/test，其实这里也不需要去除该地址，直接匹配转发请求即可。如果觉得本文对您有帮助烦请点个赞，鼓励一下作者，如果文章中有错误或不合理的地方，欢迎指正！

有关Nginx服务、Vite项目如何设置ws（websocket）代理？的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚