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

本文涉及的产品
传统型负载均衡 CLB,每月750个小时 15LCU
EMR Serverless StarRocks,5000CU*H 48000GB*H
网络型负载均衡 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)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
相关文章
|
3天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
15天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
23天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
4天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
12天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
26 2
|
1月前
|
负载均衡 应用服务中间件 Linux
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
这篇博客文章详细介绍了Nginx的下载、安装、配置以及使用,包括正向代理、反向代理、负载均衡、动静分离等高级功能,并通过具体实例讲解了如何进行配置。
145 4
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
7天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
24天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
30天前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
33 0