前端如何使用Nginx代理dist网页,代理websocket,代理后端

news2024/11/14 5:53:50

本文将指导您如何配置Nginx以代理前后端分离的项目,并特别说明了对WebSocket的代理设置。通过本教程,您将能够实现一次性配置,进而使项目能够在任意局域网服务器上部署,并可通过IP地址或域名访问服务。

笔者建议 先速览本文了解大致内容后再复制对应的代码。本文环境基于Windows VUE3 typescript 理论通用于linux

前提条件

  • 已安装Nginx

  • 前后端项目代码部署在服务器上

Nginx配置步骤

基础代理配置

编辑Nginx配置文件,通常位于/etc/nginx/nginx.conf/etc/nginx/conf.d/目录下的某个.conf文件。例如:

server {
    listen       80; # 监听端口
    server_name  localhost; # 服务器名称 局域网内一般就是localhost
​
    location / {
        proxy_pass http://前端项目地址; # 前端项目代理
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
​
    location /api/ {
        proxy_pass http://后端项目地址; # 后端接口代理
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

为了自动化区分生产环境和开发环境,我们需要使用到“.env”

如图通过.env.development      .env.production  然后修改 package.json即可自动区分环境。然后再请求代码中这样写

export const BASE_URL = import.meta.env.VITE_APP_BASE_API

以下为笔者实例配置


#user  nobody;
worker_processes  2;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

pid        logs/nginx.pid;


events {
    worker_connections  2048;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    server {
    listen 8119;
    server_name localhost;

    # 指定根目录为 dist 文件夹
    root ./dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
    # 将以/api开始的请求代理到本机的8112端口的后端服务,并且去掉URL中的/api
    location /api/ {
        proxy_pass http://localhost:8112/; # 注意这里的尾部斜线
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 其他可能需要的代理设置...
    }

    # 添加通用 WebSocket 代理
    location /ws/ {
        proxy_pass http://localhost:8112;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 60s;
        proxy_send_timeout 60s;
        

    }





    }

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

其中前端的dist目录笔者使用的是相对路径,也就意味着/conf/nginx.conf中./ 相对的根目录是conf的同级目录。这也是实现通用化部署的关键。这样配置在其他地方解压后仍然可以生效。

而后端则是全部以 /api 作为默认的请求的url,然后通过nginx反向代理到真实的后端。

例如请求的是 /api/login 到服务器 则被代理后为 http://localhost:8112/login  即指向了服务器自身。

WebSocket代理配置

在配置文件中增加针对WebSocket的代理设定。这段代码除了服务地址和指定的代理的路径“/ws/”其余部分是固定配置。

    # 添加通用 WebSocket 代理
    location /ws/ {
        proxy_pass http://localhost:8112;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 60s;
        proxy_send_timeout 60s;
        
    }

而websocket则需要再代码中这样写

 socket = new WebSocket(`ws://${window.location.host}/ws/upgrade_log`);

此行代码用于创建一个新的WebSocket连接。具体解释如下:

  • ws://${window.location.host}/ws/upgrade_log:这是一个模板字符串,用来定义WebSocket服务器的URL。

    • ws://:是WebSocket协议的前缀,表示这是一个WebSocket连接。在安全环境中(例如使用HTTPS时),会使用wss://作为前缀。

    • ${window.location.host}:这部分代码使用了JavaScript的模板字符串语法来嵌入一个表达式。window.location.host获取当前浏览器窗口中显示的文档的主机名(即域名或IP地址加端口号)。这意味着WebSocket连接到当前页面所在的域名或IP地址上。

    • /ws/upgrade_log:这是WebSocket服务在服务器上的具体路径。在Nginx配置中,我们可能设置了一个location块来监听/ws/路径,并将其代理到实际运行WebSocket服务的后端服务器。

所以,整行代码的作用是,在客户端创建一个WebSocket连接,连接到与当前网页相同host的服务器上,特定的/ws/upgrade_log路径。当这个WebSocket连接建立后,就可以用于双向通信,客户端和服务器可以互相发送消息。

然后通过Nginx的代理实现任何通过ip访问前端网页时都能连接到服务器的websocket服务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2039461.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

再见Figma!!新的设计,代码协作神器!【送源码】

软件介绍 Penpot 是一款专门用来帮助设计师和开发者更好地合作的软件。它可以让设计师轻松地做出漂亮的设计稿,还能让这些设计稿变成真正的网站或者应用的一部分。这样,设计师和开发者之间就不会因为沟通不畅而产生麻烦了。 Penpot 专为设计师与开发者之…

Android 下载安装配置

文章目录 Android Studio 下载安装配置1. 下载JDK2. JDK环境配置:3. 测试JDK是否安装成功:4. 下载Android Studio:5. 配置Android Studio:6. android studio提速方法1(不行)方法2:(很行) Android Studio 下…

OpenDDS集中发现服务DCPSInfoRepo联邦机制

OpenDDS在提供DCPSInfoRepo集中发现服务的基础上,又提供了集中发现服务DCPSInfoRepo的联邦功能,实际上就是集群功能。 联邦Federation间的通信主题,用于Federation联邦节点间DDS对象的资源库一致性迁移,包括 1)OwnerUp…

力扣热题100_图论_994_腐烂的橘子

文章目录 题目链接解题思路解题代码 题目链接 994. 腐烂的橘子 在给定的 m x n 网格 grid 中,每个单元格可以有以下三个值之一: 值 0 代表空单元格; 值 1 代表新鲜橘子; 值 2 代表腐烂的橘子。 每分钟,腐烂的橘子 周…

数据可视化实用干货分享

在当今的数字化时代,数据已成为企业决策的重要基石。然而,面对海量的数据,如何高效地理解、分析和应用这些数据,成为企业面临的一大挑战。数据可视化作为一种将数据转化为图形或图表的技术,为企业提供了强有力的支持。…

第八季完美童模全球人气总冠军【杜姗珊】至高加冕 见证星芒风采!

7月20-23日,2024第八季完美童模全球总决赛在青岛圆满落幕,在盛大的颁奖典礼上, 全球观众网友通过现场参与和网络直播的方式,共同见证了新一代“模”王诞生!在众多优秀的小超模中,来自上海的女孩杜姗珊从本次…

SRGAN:使用生成对抗网络对图像进行超分辨率重构

SRGAN:使用生成对抗网络对图像进行超分辨率重构 前言相关介绍SRGAN 的工作原理核心思想主要组件训练目标 优点缺点总结 实验环境项目地址LinuxWindows 项目结构具体用法准备数据集进行训练进行测试测试基准数据集测试单张图像测试单个视频 参考文献 前言 由于本人水…

深度剖析:Jenkins构建任务无法中断的原因及解决方案

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119qq.com] &#x1f4f1…

20240814使用串口控制MC-105Q的机芯确认变焦

20240814使用串口控制MC-105Q的机芯确认变焦 2024/8/14 20:44 缘起:使用的是LVDS OUT的MC-105Q的机芯,最近需要查看光学/电子变焦。 打开电子变焦:81 01 04 06 02 ff 放大:81 01 04 07 02 FF 缩小:81 01 04 07 03 FF 串…

想要在数据治理领域脱颖而出?了解CDGA认证的重要性

CDGA认证是专注于数据治理领域的专业资格证明。 CDGA(即认证数据治理助理)是数据管理专家认证的一部分,旨在验证和展示个人在数据治理方面的专长和技巧。 下面是关于CDGA认证的详细说明: 1. CDGA认证的组织背景:DAM…

Vue.js-分析

目录 Vue.js基本概念和特性Vue.js生态系统Vue.js版本和更新Vue.js学习Vue.js进阶问题Vue.js中虚拟DOM的工作原理虚拟DOM的创建差异算法应用更新 Vue.js的组件化编程模型优势Vue 3相比Vue 2改进之处 Vue.js Vue.js(通常简称为 Vue)是一个开源的前端JavaS…

Python使用configparser管理配置文件

前言 在 Python 项目开发中,配置文件通常用于存储配置信息,例如数据库连接参数、日志设置、应用程序行为等。这些信息可以与代码分离,使得应用程序更易于维护和管理。Python 的标准库中提供了一个非常有用的模块——configparser&#xff0c…

鸿蒙AI功能开发【卡证识别控件】场景视觉化服务

卡证识别控件 介绍 本示例展示了使用视觉类AI能力中的卡证识别能力。 本示例模拟了在应用里,跳转卡证识别控件,获取到验证结果并展示出来。 需要使用hiai引擎框架卡证识别验证接口kit.VisionKit.d.ts。 效果预览 使用说明: 在手机的主屏…

sp eric靶机渗透测试

一、靶机下载地址 https://www.vulnhub.com/entry/sp-eric,274/ 二、信息收集 1、主机发现 # 使用命令 nmap 192.168.145.0/24 -sn | grep -B 2 "00:0C:29:FD:57:BE" 2、端口扫描 # 使用命令 nmap 192.168.145.211 -p- -sV 3、指纹识别 # 使用命令 whatweb 192…

Cesium天空盒子(Skybox)制作(js代码)和显示

介绍 在Cesium中,星空背景是通过天空盒子方式(6张图片)来显示的,原生的图片分辨率太低,本项目用于生成天空盒子的6张图片。最终生成的6个图片大小约为500kb(每个),格式为jpg,总共的恒星数目约为…

【案例45】报表计算卡死问题排查

问题现象 月结期间报表计算没有反映,报表计算不出结果。情况十分着急。 问题分析 查看数据库发现,数据库有锁。相关锁源头的blocking_session为1144。 查看1144的执行机器名为nctest,非NC生产环境所在机器 由程序触发,很有可能在…

基于开源MaxKB构建大语言模型的本地知识库系统

基于开源MaxKB构建大语言模型的本地知识库系统 什么是MaxKB MaxKB是一款基于LLM(Large Language Model)大语言模型的知识库问答系统。MaxKB的产品命名内涵为“Max Knowledge Base”,为用户提供强大的学习能力和问答响应速度,致力…

Coggle数据科学 | 行业落地分享:大模型 RAG 汽车应用实践

本文来源公众号“Coggle数据科学”,仅用于学术分享,侵权删,干货满满。 原文链接:行业落地分享:大模型 RAG 汽车应用实践 在人工智能的浪潮下,大模型技术正以其强大的数据处理能力和深度学习能力&#xff…

【MySQL进阶】事务、存储引擎、索引

一、事务 1.概念 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向 系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败。 例子:转账,要求扣钱和进账…

PyTorch--卷积神经网络(CNN)模型实现手写数字识别

文章目录 前言完整代码代码解析1. 导入必要的库2. 设备配置3. 超参数设置4. 加载MNIST数据集5. 创建数据加载器6. 定义卷积神经网络模型7. 实例化模型并移动到设备8. 定义损失函数和优化器9. 训练模型10. 测试模型11. 保存模型 常用函数解析小改进数据集部分可视化训练过程可视…