如何使用Nginx 部署前端项目,什么是反向代理?

本文涉及的产品
传统型负载均衡 CLB,每月750个小时 15LCU
应用型负载均衡 ALB,每月750个小时 15LCU
网络型负载均衡 NLB,每月750个小时 15LCU
简介: Nginx可以作为静态web服务器来部署静态资源。这里所说的静态资源是指在我们web服务端真实存在,并且能够直接展示的一些文件,比如常见的html页面

https://developer.aliyun.com/article/1034403?spm=a2c6h.26396819.creator-center.6.244f3e186gxA3S
这篇博客介绍了并安装了Nginx之后,本片博客就要讲解Nginx 的应用。

1、配置文件结构

nginx的配置文件(conf/nginx.conf)整体上分为三部分:

  1. 全局块;
  2. events块;
  3. http块;

这三块的分别配置什么样的信息呢,看下表:
image.png
image.png

在这个三个地方,我们操作得最多的地方就是http块,在http块中可以包含多个server块,每个server块可以配置多个location块。

2、部署静态资源

Nginx可以作为静态web服务器来部署静态资源。这里所说的静态资源是指在我们web服务端真实存在,并且能够直接展示的一些文件,比如常见的html页面、css文件、js文件、图片、视频等资源,那么我们就可以使用Nginx来部署这些静态资源。
为什么我们不使用Tomcat来部署静态资源,而使用nginx 呢?

这是因为 相对于Tomcat,Nginx处理静态资源的能力更加高效,所以在生产环境下,一般都会将静态资源部署到Nginx中。

将静态资源部署到Nginx非常简单,只需要将文件复制到Nginx安装目录下的html目录中即可。
例如:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Hello nginx!</h1>
</body>
</html>
  1. 将静态资源上传到 /usr/local/nginx/html 目录(看好路径,别上传错了)

image.png
2.启动nginx
image.png
3. 访问
image.png
4.修改默认首页
image.png
如果我们需要将hello.html作为nginx的首页,可以修改location的index指令,将其修改为hello.html,如下:
image.png
配置文件修改了,我们需要重新加载一下,才可以生效:

nginx -s reload

image.png

3、反向代理

Nginx所提供的这个反向代理功能是我们后面使用非常多的功能。
我们在了解什么是反向代理之前,先来了解一下什么是正向代理。

3.1 概念

其实就是一个位于客户端和原始服务器(origin server)之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得的内容返回给客户端。

只看这段话是没有什么感觉的,我们来举个例子。
比如,我们现在作为客户端要访问谷歌的网站,我们要知道,我们直接去访问这个网站是访问不到的,这个时候,我们就可以通过一个代理服务器,帮我们去访问谷歌这个网站。所以我们现在是访问这个代理服务器,代理服务器去访问谷歌这个网站,谷歌再将返回的数据返回给代理服务器,代理服务器再将数据返回给我们。
image.png

这个就是正向代理。
正向代理的典型用途就是有些公司内部是局域网,但是又想上网查点东西,这个时候就可以通过代理服务器提供访问外网的途径。
正向代理一般是在客户端设置代理服务器,通过代理服务器转发请求,最终访问到目标服务器。
了解完正向代理,我们就来了解反向代理,看看它们有什么不一样。

这个反向代理服务器也是位于用户于服务器之间的,但是对于用户而言,反向代理服务器就相当于目标服务器,用户直接访问反向代理服务器就可以获得目标服务器的资源,那么反向代理服务器负责将请求转发给代理服务器。

image.png
大家看上图,发现反向代理跟正向代理过程好像是一样的,都是客户端访问代理服务器,然后代理服务器将请求发给服务器。
实际上,反向代理和正向代理的区别在哪里呢?

就是这个正向代理在我们的这个客户端来设置这个代理服务器,而且我们的客户端是知道有这个代理服务器的。
而在我们的反向代理中,我们的客户端它其实是不知道有代理服务器这个存在的,那么我们客户端只需要访问这个反向代理这个服务器,然后这个反向代理服务器就会给他返回相应的资源。
那么在这个过程中,我们的客户他其实都不知道我们的目标服务器在什么位置,甚至都不知道有目标服务器的存在。

这个时候可能会有人问,我们不能绕过反向代理服务器,去访问这个目标服务器,其实是可以的,但是正常情况下,我们的公司内部可能会有多台web服务器,我们客户端都一个一个去连接这些服务,就不太好管理,所以我们就可以使用反向代理服务器作为统一的入口。

3.2 配置并测试

那么接下来,我们就是要使用nginx来作为反向代理服务器使用。
首先我们要准备两台服务器,没钱的像我一样,使用虚拟机。
一台安装好Nginx,一台配置好java 环境。

1、首先我们将自己手上的随意一个项目上传到服务器上,并启动,自己测试一下能不能访问到。
image.png
浏览器测试
image.png
2、在代理服务器中配置反向代理
进入nginx的安装目录,并编辑配置文件nginx.conf;

cd /usr/local/nginx/conf/  #看大家自己的Nginx安装在何处
vim nginx.conf

在http块中,再添加一个server块虚拟主机的配置,监听82端口,并配置反向代理proxy_pass:

server {
    listen 82;
    server_name localhost;
    location / {
        proxy_pass http://192.168.231.136:8080;     #反向代理配置,将请求转发到指定服务
    }
}

image.png
3、检查配置文件,并重新加载

nginx -t

image.png

nginx -s reload

4、开放 82 端口,如果你开启了,忽略这一步

firewall-cmd --zone=public --add-port=82/tcp --permanent
firewall-cmd --reload

5、 访问
image.png

4、负载均衡

4.1 介绍

现在我们来了解负载均衡,负载均衡也是Nginx为我们提供的非常非常重要的一个功能。

以前的业务都是非常简单的,一台服务器就能满足我们的需求,但是随着互联网的发展,业务流量越来越大,并且业务逻辑也越来越复杂,单台服务器的性能及单点故障问题就凸显出来了,因此需要多台服务器组成应用集群,进行性能的水平扩展以及避免单点故障出现。

这里有两个概念,大家了解一下:

应用集群 将同一应用部署到多台机器上,组成应用集群,接收负载均衡器分发的请求,进行业务处理并返回响应数据。
负载均衡器 将用户请求根据对应的负载均衡算法分发到应用集群中的一台服务器进行处理。

image.png
此处的负载均衡器,我们将会使用Nginx来实现,而Nginx的负载均衡是基于反向代理的,只不过此时所代理的服务器不是一台,而是多台。

4.2 配置并测试

这里大家可以再多加一台服务器或者虚拟机,我懒选择在同一虚拟机上,运行两个Java项目,但是端口不一样用于区分。(记得开放端口!!!)

1、在代理服务器上配置Nginx.
打开nginx的配置文件nginx.conf并增加如下配置:

#upstream指令可以定义一组服务器
upstream targetserver{    
    server 192.168.231.136:8080;
    server 192.168.231.136:8081;
}

server {
    listen       82;
    server_name  localhost;
    location / {
        proxy_pass http://targetserver; #反向代理配置,将请求转发到指定服务
    }
}

具体配置位置如下:
image.png
2、 重新加载nginx配置文件,访问

nginx -s reload

测试时,我们直接访问nginx的82端口(http://192.168.231.134:82/hello), 此时nginx会根据负载均衡策略,将请求转发到后面的两台服务器。
image.png
image.png
在上述的测试过程中,我们看到请求均衡的转发到了8080和8081,因为模式的负载均衡策略是轮询。

4.3 负载均衡策略

处理上述默认的轮询策略以外,在Nginx中还提供了其他的负载均衡策略,如下:
image.png
权重的配置:

#upstream指令可以定义一组服务器
upstream targetserver{    
    server 192.168.231.136:8080 weight=10;
    server 192.168.231.136:8081 weight=5;
}

上述配置的weight权重是相对的,在上述的配置中,效果就是,在大数据量的请求下,最终8080接收的请求数是8081的两倍。

相关实践学习
SLB负载均衡实践
本场景通过使用阿里云负载均衡 SLB 以及对负载均衡 SLB 后端服务器 ECS 的权重进行修改,快速解决服务器响应速度慢的问题
负载均衡入门与产品使用指南
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
相关文章
|
9天前
|
存储 应用服务中间件 nginx
nginx反向代理bucket目录配置
该配置实现通过Nginx代理访问阿里云OSS存储桶中的图片资源。当用户访问代理域名下的图片URL(如 `http://代理域名/123.png`)时,Nginx会将请求转发到指定的OSS存储桶地址,并重写路径为 `/prod/files/2024/12/12/123.png`。
40 5
|
1月前
|
缓存 负载均衡 算法
如何配置Nginx反向代理以实现负载均衡?
如何配置Nginx反向代理以实现负载均衡?
|
1月前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
1月前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
63 4
|
1月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
59 3
|
1月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
118 3
|
1月前
|
缓存 负载均衡 安全
Nginx的反向代理具体是如何实现的?
Nginx的反向代理具体是如何实现的?
|
1月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
31 1
|
1月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
35 1
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。