前端Nginx的安装与应用

目录

一、前端跨域方式

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 pgp | nginx/Windows-1.26.2 pgp |

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

启动方法:

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

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

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

三、应用

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

原始的proxy内容:

javascript 复制代码
  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介绍

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

文件主要模块如下:

javascript 复制代码
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可以通过反向代理来实现负载均衡。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试