当前位置： 首页 > article >正文

前端Nginx的安装与应用

article 2024/11/5 15:18:55

目录

一、前端跨域方式

1.1、CORS(跨域资源共享)

1.2、JSONP(已过时)

1.3、WebSocket

1.4、PostMessage

1.5、Nginx

二、安装

三、应用

四、命令

4.1、基本操作命令

4.2、nginx.conf介绍

4.2.1、location模块

4.2.2、反向代理配置

4.2.3、负载均衡模块

4.2.4、通过反向代理来实现负载均衡

一、前端跨域方式

1.1、CORS(跨域资源共享)

后端服务器可以通过设置特定的HTTP响应头来允许或限制跨域请求。

  • Access-Control-Allow-Origin：指定允许访问资源的源。
  • Access-Control-Allow-Methods：指定允许的HTTP方法。
  • Access-Control-Allow-Headers：指定允许的HTTP请求头。
  • Access-Control-Allow-Credentials：指定是否允许发送Cookie

1.2、JSONP(已过时)

依赖于<script>标签可以跨域加载资源的特性。由于安全原因，现代浏览器不再推荐使用JSONP

1.3、WebSocket

WebSocket协议不遵循同源策略，因此可以用于跨域通信。但它主要用于实时通信场景。

1.4、PostMessage

HTML5引入的window.postMessage方法可以安全地实现跨源通信。它允许来自不同源的页面间发送消息。

1.5、Nginx

配置 Nginx 作为反向代理： 在你的 Nginx 配置文件中，设置一个 server 块来处理前端应用的请求，并使用 proxy_pass 指令将请求转发到后端服务器。

添加 CORS 相关的响应头： 在 server 块中，使用 add_header 指令添加 CORS 相关的响应头，以允许跨域请求。

二、安装

Nginx：一个HTTP服务器。不仅能将服务器上的静态文件(HTML、图片)通过HTTP协议展现给客户端，还可以通过反向代理来实现负载均衡。

官网：https://nginx.org/en/download.html

可以下载Stable version(稳定版)，其中左边是Linux版,右边是Windows版。

nginx-1.26.2  pgpnginx/Windows-1.26.2  pgp

安装成功后文件夹列表内容如下：

启动方法：

(1)、直接双击该目录下的"nginx.exe"，即可启动nginx服务器；

(2)、命令行进入该文件夹，执行start nginx命令，也会直接启动nginx服务器。

输入localhost回车后出现如下页面，表示成功启动：

三、应用

  在启动前，更换conf里的nginx.conf【自己按照自己公司的后端地址进行配置】，然后前端本地启动项目，将原始端口8080改为nginx.conf里后端地址对应的端口，即可访问到该后端数据，相当于proxy的配置。

原始的proxy内容：

  devServer: {
    proxy: {
      '/api/': {
        // target: 'http://10.168.31.xx:8090',//后端001
        target: 'http://10.168.31.xx:8090',//后端002
        headers: {
          Host: 'xx.xx.cn',
          Origin: 'http://xx.xx.cn/'
        }
      },
      '/erpimg/': {
        target: 'http://10.168.31.xx:xx',
        pathRewrite: {
          '^/erpimg/': ''
        },
        headers: {
          Host: 'xx.xx.cn',
          Origin: 'http://xx.xx.cn/'
        }
      },
      '/watermelon/job/': {
        target: 'http://10.168.31.xx:xx'
      },
      '/watermelon/': {
        target: 'http://10.168.31.xx:xx'
      },
      '/ws/': {
        target: 'http://10.168.xx.xx',
        headers: {
          Host: 'xx.xx.cn',
          Origin: 'http://xx.xx.cn/'
        },
        ws: true
      }
    },
    disableHostCheck: true //  新增该配置项
  },

四、命令

4.1、基本操作命令

启动服务：start nginx【Windows版】              nginx【Linux版】
退出服务：nginx -s quit
强制关闭服务：nginx -s stop
重载服务：nginx -s reload（重载服务配置文件，类似于重启，服务不会中止）
验证配置文件：nginx -t
使用配置文件：nginx -c "配置文件路径"
使用帮助：nginx -h

4.2、nginx.conf介绍

在项目使用中，使用最多的三个核心功能是静态服务器、反向代理、负载均衡。

文件主要模块如下：

main                                # 全局配置
events {                            # 工作模式配置
} 
http {                              # http设置
    ....
    server {                        # 服务器主机配置（虚拟主机、反向代理等）
        ....
        location {                  # 路由配置（虚拟目录等）
            ....
        }
        location path {
            ....
        }
        location otherpath {
            ....
        }
    }
    server {
        listen 28885;
        server_name _;
        location / {
            proxy_pass http://localhost:8080;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
            proxy_set_header Host $http_host;
            proxy_buffering off;
            proxy_read_timeout 10m;
            add_header Access-Control-Allow-Origin: *; # 允许所有域进行跨域请求
        }
        location /api/ {
            proxy_set_header REMOTE-HOST $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host xx.xx.cn;
            proxy_set_header X-real-ip $remote_addr;
            proxy_pass http://10.168.31.xx;
            proxy_read_timeout 10m;
            client_max_body_size 100m;
        }
        location /erpimg/ {
            proxy_set_header REMOTE-HOST $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-real-ip $remote_addr;
            proxy_pass http://192.168.31.xx:4869/;
            # proxy_pass https://zz.zz.cn;
            proxy_read_timeout 10m;
        }
        location /ws {
            proxy_pass http://10.168.31.xx;
            proxy_set_header Host xx.xx.cn;
            # proxy_pass https://zz.zz.cn;
            proxy_set_header Origin https://xx.xx.cn;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
    upstream name {                  # 负载均衡配置
    ip_hash;                         
    server 192.168.1.100:8000;
    server 192.168.1.100:8001 down;       
    server 192.168.1.100:8002 max_fails=3;
    server 192.168.1.100:8003 fail_timeout=20s;
    server 192.168.1.100:8004 max_fails=3 fail_timeout=20s;
    }
}

4.2.1、location模块

location模块主要用于配置路由访问信息。

4.2.2、反向代理配置

通过反向代理代理服务器访问模式，通过proxy_set配置让客户端访问透明化。

4.2.3、负载均衡模块

主要负责负载均衡的配置，通过默认的轮询调度方式来分发请求到后端服务器。

ip_hash：指定请求调度算法，默认是weight权重轮询调度，可以指定
server host:port：分发服务器的列表配置
down：表示该主机暂停服务
max_fails：表示失败最大次数，超过失败最大次数暂停服务
fail_timeout：表示如果请求受理失败，暂停指定的时间之后重新发起请求。

4.2.4、通过反向代理来实现负载均衡

  当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。于是将相同的应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。

好处：其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。Nginx可以通过反向代理来实现负载均衡。


http://www.kler.cn/a/380280.html

相关文章：

  • Unity 使用Netcode实现用户登录和登出
  • Unreal5从入门到精通之如何解决在VR项目在头显中卡顿的问题
  • MySQL45讲 第十四讲 count(*)这么慢，我该怎么办？
  • VS code SSH设置多个远程连接免登录
  • 每周算法比赛
  • 算法学习027 c++蛇形三角形填充 二维数组常规应用 中小学算法思维学习 比赛算法题解 信奥算法解析
  • 电脑如何不断网切换IP：实用方法与注意事项‌
  • Android -- [SelfView] 自定义圆盘指针时钟
  • qt QStatusBar详解
  • k8s 查看cpu使用率最高的pod
  • Hive自定义函数—剔除周日周六(小时级别)
  • 爬虫学习4
  • Vue中ref、reactive、toRef、toRefs的区别
  • IoTDB时序数据库使用
  • R 环境安装
  • 103 - Lecture 2 Table and Data Part 1
  • 初识JDBC
  • 深度学习基础知识-全连接层
  • Spring Cloud OpenFeign：基于Ribbon和Hystrix的声明式服务调用
  • python之正则表达式总结
  • 一键AI换衣-可图AI试衣
  • qt QSplitter详解
  • MySQL 索引的底层实现原理与优化策略
  • python 爬虫0基础入门 （爬虫基础知识）
  • 深度学习中的迁移学习
  • 使用Kafka构建大规模消息传递系统