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

简介: 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的两倍。

相关实践学习
部署高可用架构
本场景主要介绍如何使用云服务器ECS、负载均衡SLB、云数据库RDS和数据传输服务产品来部署多可用区高可用架构。
负载均衡入门与产品使用指南
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
相关文章
|
1月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:现代包管理器与模块化的深度解析
【2月更文挑战第21天】 在当今快速演变的前端开发领域,高效的项目管理和代码组织已成为成功交付复杂Web应用的关键。本文将深入探讨现代前端包管理器如npm, yarn和pnpm的工作原理,以及它们如何与模块化编程实践(例如CommonJS、ES6模块)协同工作以优化开发流程。我们将剖析这些工具的内部机制,了解它们如何解决依赖冲突,提高安装速度,并保证项目的健壮性。同时,本文还将介绍模块化编程的最佳实践,包括代码拆分、重用和版本控制,帮助开发者构建可维护且性能卓越的前端项目。
|
1月前
|
缓存 前端开发 JavaScript
Vite 构建流程大揭秘:快速构建前端项目的秘密武器
Vite 构建流程大揭秘:快速构建前端项目的秘密武器
|
17天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
78 0
|
2天前
|
应用服务中间件 Linux 开发工具
如何在阿里云服务器快速搭建部署Nginx环境
以下是内容的摘要: 本文档主要介绍了在阿里云上购买和配置服务器的步骤,包括注册阿里云账号、实名认证、选择和购买云服务器、配置安全组、使用Xshell和Xftp进行远程连接和文件传输,以及安装和配置Nginx服务器的过程。在完成这些步骤后,你将能够在服务器上部署和运行自己的网站或应用。
|
11天前
|
应用服务中间件 nginx
nginx进行反向代理的配置
在Nginx中设置反向代理的步骤:编辑`/etc/nginx/nginx.conf`,在http段加入配置,创建一个监听80端口、服务器名为example.com的虚拟主机。通过`location /`将请求代理到本地3000端口,并设置代理头。保存配置后,使用`sudo nginx -s reload`重载服务。完成配置,通过example.com访问代理服务器。
18 0
|
17天前
|
应用服务中间件 nginx Windows
windows下Nginx+RTMP部署
windows下Nginx+RTMP部署
15 0
|
29天前
|
前端开发 应用服务中间件 nginx
nginx中配置不输入端口(指定地址)访问项目的方法
nginx中配置不输入端口(指定地址)访问项目的方法
23 0
|
1月前
|
前端开发 JavaScript 测试技术
构建高效前端项目:模块化与组件化策略
【2月更文挑战第25天】 在现代网页开发中,随着用户对于网页性能和交互体验的期待不断提升,前端项目的复杂性也随之增加。为了应对这种复杂性并提高开发效率,本文将探讨模块化与组件化在前端项目中的应用策略。通过分析这两种方法的优势与适用场景,我们将揭示如何利用它们来优化项目结构,提升代码复用率,以及加快开发流程。
27 4
|
1月前
|
前端开发 JavaScript 应用服务中间件
部署前端项目到服务器过程详解
部署前端项目到服务器过程详解
90 0
|
1月前
|
应用服务中间件 Linux nginx
web后端-linux-nginx-1.18操作命令和部署
web后端-linux-nginx-1.18操作命令和部署