Nginx 实战教程

news2024/11/13 9:47:49

本篇博客我会演示日常的工作中，我们是怎么利用nginx部署项目的。我们以部署一套前后分离的项目为本次讲述的内容

一、搭建后端项目

创建一个最简单的springboot项目：

在这里插入图片描述
只需要依赖一个web模块即可：

在这里插入图片描述

提供一个api接口，可以获取服务端的主机地址和服务端口：

@RestController
public class NginxController implements ApplicationListener<WebServerInitializedEvent> {

    private int port;

    @Override
    public void onApplicationEvent(WebServerInitializedEvent event) {
        this.port = event.getWebServer().getPort();
    }

    @GetMapping("host")
    public String getHost(HttpServletRequest request){
        InetAddress address;
        try {
            address = InetAddress.getLocalHost();
            return  address.getHostAddress() + ":" + port;
        } catch (UnknownHostException e) {
            e.printStackTrace();
        }
        return "error：Network card information is not available！";
    }

}

测试接口：

在这里插入图片描述

二、搭建前端项目

搭建前端工程，使用vue官方推荐的vite搭建一个基础工程：

在这里插入图片描述

启动项目，打开项目：

在这里插入图片描述

安装axios：

npm install axios

使用axios访问后端的api接口，修改app.vue如下：

<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      host: ""
    }
  },
  mounted() {
    var ip_addr = document.location.hostname
    axios.get('http://' + ip_addr + ':8080/host').then(res => {
      this.host = res.data
    })
  }

}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <br>服务器的ip和端口是：{{ host }}
  </header>
</template>

<style scoped></style>

浏览器访问，发生了跨域问题：

在这里插入图片描述

三、nginx做静态服务器

我们都知道，nginx的安装目录中有这样一个文件夹：

在这里插入图片描述

我们再结合nginx的基础配置文件中的以下内容：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   html;
        index  index.html index.htm;
    }
}

我们不妨猜想一下当url为/时（当然这是错的），会去html目录寻找index.html文件作为首页。我们可以得出结论只需要将我们的前端文件放在html目录即可（事实上放在哪里都可以）通过修改root html,例如要放在www文件夹下:root /data/www即可。

我们尝试将前端构建的结果放入html文件夹：

在这里插入图片描述

访问浏览器:

在这里插入图片描述

四、解决前端的路由问题

我们在前端直接点击路由的按钮可以访问，因为这种情况并未再次向nginx发送请求，仅仅是前端的路由切换：

在这里插入图片描述

但是，如果直接访问/about就GG了，这个url直接访问nginx时，nginx会认为你要查找about这个资源，当然是404了：

在这里插入图片描述

所以我们要通过一些配置来解决这个问题，vue工程都是单页面的，所以无论哪个路由都应该使用唯一的index.html，所以我们可以做如下的配置，该配置的意思就是将其他的所有请求，都强制使用/index.html：

location / {
    root /data/www/ui;
    try_files $uri $uri/ $uri/index.html $uri.html /index.html;
}

五、对图片开启gzip压缩

在http模块中添加如下内容：

gzip on;
gzip_min_length 1k;
gzip_buffers    4 16k;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_types image/png;
gzip_vary on;

解释如下：

  • gzip on:使用"gzip on;"参数来启用压缩，默认是关闭的。

  • gzip_min_length 1k:gzip压缩的最小文件，小于设置值的文件将不会压缩#指定Nginx服务需要向服务器申请的缓存空间的个数*大小，默认32 4k|16 8k;

  • gzip_buffers 4 16k:设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存

  • gzip_http_version 1.1:启用压缩功能时，协议的最小版本，默认HTTP/1.1

  • gzip_comp_level 5:压缩比例由低到高从1到9，默认为1。但需要注意的是压缩比设置的越高就会越消耗CPU的资源，因此在生产环境中我们会设置该参数的值在3~5之间，最好不要超过5，因为随着压缩比的增大的确会降低传输的带宽成本但发送数据前会占用更多的CPU时间分片。

  • gzip_types image/png:指明仅对哪些类型的资源执行压缩操作；默认为gzip_types text/html，不用显示指定，否则出错。

  • gzip_vary on:该指令用于设置在使用Gzip功能时是否发送带有“Vary: Accept-Encoding”头域的响应头部。该头域的主要功能是告诉接收方发送的数据经过了压缩处理。开启后的效果是在响应头部添加了Accept-Encoding: gzip，这对于本身不支持Gzip压缩的客户端浏览器是有用的。

这是没有设置图片压缩：

在这里插入图片描述

设置图片压缩后，响应多了如下的首部信息：

在这里插入图片描述

六、反向代理解决跨域

1、配置nginx反向代理

我们可以通过proxy_pass参数设置反向代理的服务器，语法如下：

location / {
    proxy_pass http://127.0.0.1:8080;
}

在这里插入图片描述

我们的实现逻辑很简单，就是将以/api为前缀的uri全部反向代理到真正的后端服务即可。

我们为了区分前端页面和api接口，将所有访问后端api的url统一加上前缀 /api

mounted(){
  var ip_addr = document.location.hostname
  axios.get('http://'+ip_addr+'/api/host').then(res=>{
   this.host = res.data
  })
}

现在我们想的是将前端发送的以api打头的url全部代理到后端8080端口：

前端访问的接口：http://localhost:80/api/host

后端的接口：http://localhost:8080/host

在实现代理的过程中，我们需要将/api这个前缀删除掉，有以下两种方法，一种是重写url，如下：

location ^~ /api/ {
    rewrite ^/api(.*)$ $1 break;
    proxy_pass http://127.0.0.1:8080;
}

更简单的做法是，在代理地址的后边加/，这样做也会去掉前缀，但不如以上方式灵活：

location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/;
}

小知识：location中的rewirte：

  • rewrite break：url重写后，直接使用当前资源，不再执行location里余下的语句，完成本次请求，地址栏url不变

  • rewrite last：url重写后，马上发起一个新的请求，再次进入server块，重试location匹配，超过10次匹配不到报500错误，地址栏url不变

  • rewrite redirect：返回302临时重定向，地址栏显示重定向后的url。

七、为后端工程做负载均衡

有时候，我们的后端工程压力太大，可能需要将后端工程部署在多台服务器上，此时就需要使用负载均衡了，在学习负载均衡的时候我们不妨先了解一下upstream模块。

1、upstream模块解读

nginx 的负载均衡功能依赖于 ngx_http_upstream_module模块。upstream 模块应该放于http{}标签内。

upstream liming {
    ip_hash; 
    server backend1.example.com;
    server backend2.example.com:8080;
    server 127.0.0.1:8080;
    server backup2.example.com:8080;
}

然后在location处使用如下写法：

location / {
    proxy_pass http://liming;
}

以上写法的意思就是，将来同一个url访问我们的服务时，服务可以由liming中的服务器按照某种特定规则轮流提供

  1. ngixn负载均衡的五种算法

（1）round robin 轮询 （默认） 按时间顺序依次将请求分配到各个后台服务器中，挂掉的服务器自动从列表中剔除

upstream liming {  
   server 192.168.0.1 down;    
   server 192.168.0.2;  
}

（2）weight 轮询权重 weight的值越大分配到的访问概率越高，主要用于后端每台服务器性能不均衡的情况下，或在主从的情况下设置不同的权值，达到合理有效的地利用主机资源

upstream liming {  
    server 192.168.0.1 weight=20;  
    server 192.168.0.2 weight=10;  
}

（3）ip_hash：每个请求按访问IP的哈希结果分配，使来自同一个IP的访客固定访问一台后端服务器，并且可以有效解决动态网页存在的session共享问题

upstream liming {  
    ip_hash;  
    server 192.168.0.1:88;  
    server 192.168.0.2:80;  
}

（4）url_hash：按访问的URL的哈希结果来分配请求，使每个URL定向到同一台后端服务器，可以进一步提高后端服务器缓存的效率。Nginx本身不支持url_hash，需要安装Nginx的hash软件包

upstream liming {  
    server 192.168.0.1:88;     //使用hash语句时，不能在使用weight等其他参数
    server 192.168.0.2:80;  
    hash $request_uri;  
    hash_method crc32;    //使用hash算法
}

（5）fair算法：可以根据页面大小和加载时间长短智能地进行负载均衡，根据后端服务器的响应时间来分配请求，响应时间短的优先分配。Nginx本身不支持fair，要安装upstream_fair模块才能使用

upstream liming {  
    server 192.168.0.1:88;  
    server 192.168.0.2:80;  
    fair;  
}
  1. 项目配置

首先我们需要将我们的后端项目在服务器中启动两份或多份，可以是同一台服务器，也可以是多台服务器，只要可以互联互通即可。

同一台服务器可以使用如下命令，重新指定一个端口即可：

java -jar nginx-demo.jar --server.port=8081

我们需要定义一个upstream，将都有的后端服务配置在其中：

upstream liming {
    server 127.0.0.1:8080 weight 10;
    server 127.0.0.1:8081 weight 20;
}

修改location的proxy_pass：

location ^~ /api/ {
    proxy_pass http://liming/;
}

在浏览器中不停的刷新，发现端口在不停的变化，说明我们的多次请求确实落在了不同服务上

在这里插入图片描述

在这里插入图片描述

八、其他的跨域问题

如果现在本机的前端项目（也就是其他服务器的前端项目）也想要访问虚拟机中ngixn代理的api接口。这是一个典型的不同的项目之间进行访问的问题，这必然存在跨域问题，如下图：

在这里插入图片描述

我们将本地的vue工程进行如下修改：

mounted(){
    axios.get('http://192.168.111.200/api/host').then(res=>{
      this.host = res.data
    })
  }

此时，确实发生了跨域问题：

在这里插入图片描述

解决方案:需要在客户端发送【预检请求】时指定对应的响应头即可，nginx可以很方便的给响应增加一些首部信息，方法如下：

location ^~ /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow_Credentials' 'true';
	add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
	add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    proxy_pass http://ydlclass/;
}

访问本地地址，本次访问跨域的问题被解决了：

在这里插入图片描述

我们也能看到对应的响应首部信息，多了如下内容：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1123106.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

周记之马上要答辩了

周记之马上要答辩了

“ 要变得温柔和强大&#xff0c;就算哪天突然孤身一人&#xff0c;也能平静地活下去&#xff0c;不至于崩溃。” 10.16 今天提前写完了一篇六级阅读&#xff0c;积累了一些词组&#xff1a; speak out against 公然反对&#xff0c;印象最深刻的就这个&#xff1b; 先了解…
阅读更多...
英语——分享篇——每日200词——3001-3200

英语——分享篇——每日200词——3001-3200

3001——ascertain——[ˌsəteɪn]——vt.查明&#xff0c;弄清——ascertain——a苹果(编码)s美女(编码)certain确定(熟词)——吃苹果的美女确定已查明此事——It can be difficult to ascertain the facts. ——可能难以查明事实真相。 3002——disrupt——[dɪsrʌpt]——…
阅读更多...
深入浅出：Python内存管理机制详解

深入浅出：Python内存管理机制详解

文章目录 一、什么是内存&#xff1f;1.1、RAM简介1.2、RAM容量1.3、查看电脑内存1.4、监控电脑内存 二、内存管理2.1、python是如何分配内存的&#xff1f;2.2、python采用自动内存管理机制2.3、python自动内存管理机制的缺点2.4、python内存优化的方法 三、项目实战3.1、查看…
阅读更多...
防雷检测的项目和行业的等级区分

防雷检测的项目和行业的等级区分

防雷检测是指对雷电防护装置的性能、质量和安全进行检测的活动&#xff0c;是保障人民生命财产和公共安全的重要措施。 地凯科技防雷检测的项目内容包括接闪器检测、引下线检测、接地装置检测、防雷区的划分、电磁屏蔽防雷检测、等电位连接检测、及电涌保护器 (SPD)性能检测。…
阅读更多...
软件打不开，文件找不到了，如何找到隐藏文件？（windows和mac解决方案）

软件打不开，文件找不到了，如何找到隐藏文件？（windows和mac解决方案）

相信大家在学习过程中&#xff0c;会在咱们自己的编程软件安装一些插件&#xff0c;但是我们要知道插件跟版本会有不兼容的情况出现&#xff0c;也就是非法插件&#xff0c;会导致软件打不开&#xff0c;打开了报错等问题。 这个时候它的报错会告诉你一些路径&#xff0c;但是有…
阅读更多...
vue3传递prop踩坑

vue3传递prop踩坑

这是官方文档中的介绍&#xff1a; Vue3中文官网 我们在组件中定义props时推荐使用驼峰命名&#xff0c;但是在父组件中传递数据时要使用kebab-case形式 这是我写的loading组件中定义的几个porps 我在使用时是这样传入的 但是打印出来的值是&#xff1a; 可以看到这里的ou…
阅读更多...
CMMI V2.0能力域

CMMI V2.0能力域

1、概念 能力域是一组相关的PA&#xff0c;可以提高组织或项目的技能和活动的性能。能力域视图是CMMI模型的一个子集&#xff0c;描述了构成特定能力域的一组预定义PA。能力域是一种视图。如下面规划和管理工作能力域视图&#xff1a; 2、类别 类别是相关能力域的逻辑组或视图…
阅读更多...
【html+css】袁进 渡一

【html+css】袁进 渡一

文章目录 1. pre标签的原理2. img和map元素结合3. 元素的包含关系4. em单位5. 选择器5.1 简单选择器5.2 选择器组合5.3 选择器并列 6. 层叠7. 继承8. 属性值的计算过程9. 盒模型9.1 盒子类型9.2 盒子组成部分 10. 盒模型的应用10.1 改变宽高范围10.2 改变背景覆盖范围10.3 溢出…
阅读更多...
经销商低价数据品牌如何掌握

经销商低价数据品牌如何掌握

渠道是由品牌、经销商、消费者组成&#xff0c;每个品牌的发展&#xff0c;离不开良好的渠道规则&#xff0c;一切不利于渠道发展的因素都应及时治理&#xff0c;比如产品假货、经销商低价等&#xff0c;低价除了影响渠道发展&#xff0c;还会带来很多问题&#xff0c;如品牌窜…
阅读更多...
Unity 最新DOTS系列之《Baking与Baker的详解》

Unity 最新DOTS系列之《Baking与Baker的详解》

Unity DOTS Baking与Baker详解 最近DOTS终于发布了正式的版本, 我们来分享一下DOTS里面Baking 与Baker的关键概念&#xff0c;方便大家上手学习掌握Unity DOTS开发。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希望大家可以点击进来一起交流一下开发经验呀&…
阅读更多...
CleanMyMac X靠谱苹果电脑杀毒软件

CleanMyMac X靠谱苹果电脑杀毒软件

在过去&#xff0c;人们普遍认为苹果电脑不容易受到病毒和恶意软件的攻击&#xff0c;因此不需要安装杀毒软件。然而&#xff0c;随着苹果电脑的普及和互联网的发展&#xff0c;苹果电脑也逐渐成为黑客和恶意软件的目标。为了保护苹果电脑的安全&#xff0c;使用一款可靠的苹果…
阅读更多...
进程中的任务状态解析

进程中的任务状态解析

在 Linux 里面&#xff0c;无论是进程&#xff0c;还是线程&#xff0c;到了内核里面&#xff0c;我们统一都叫任务&#xff08;Task&#xff09;&#xff0c;由一个统一的结构 task_struct 进行管理。 每一个任务都应该有一个 ID&#xff0c;作为这个任务的唯一标识。到时候排…
阅读更多...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十三：通用表格组件封装实现

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十三：通用表格组件封装实现

一、本章内容 本章实现通用表格组件，根据实体配置自动实现表格列识别、数据搜索、表格排序、添加、编辑、删除等操作功能。 1. 详细课程地址： 待发布 2. 源码下载地址： 待发布 二、界面预览 三、开发视频 3.1 B站视频地址：
阅读更多...
【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅳ—— 替换默认证书

【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅳ—— 替换默认证书

目录 博文摘要6. 使用企业 CA 签发的 SSL 证书 替换 vSphere 默认 SSL 证书6.1 确认证书文件6.2 替换默认 vSphere 证书6.3 验证自签名证书6.4 补充说明 关联博文参考资料 博文摘要 博文主要描述了在 vCenter Server 8 上通过实用工具 certificate-manager 将 vSphere 默认 Ma…
阅读更多...
【JUC】AQS源码剖析

【JUC】AQS源码剖析

AQS(AbstractQueuedSynchronizer) 文章目录 AQS(AbstractQueuedSynchronizer)1. 概述2. AQS源码分析前置知识2.1 AQS的int变量2.2 AQS的CLH队列2.3 内部类Node(Node类在AQS类内部)2.3 小总结 3. 以ReentrantLock为突破口进行AQS源码分析3.1 架构原理3.2 lock()方法3.3 AQS中的a…
阅读更多...
CNN系列

CNN系列

文章目录 R-CNN&#xff08;2014&#xff09;Conclusion R-CNN&#xff08;2014&#xff09; 哈哈 创新&#xff1a; (1)人们可以将高容量卷积神经网络(cnn)应用于自下而上的区域建议&#xff0c;以定位和分割对象; (2)当标记训练数据稀缺时&#xff0c;对辅助任务进行监督预训…
阅读更多...
vite+vue3+ts开发web日语项目,支持主题切换，pinia状态持久化管理

vite+vue3+ts开发web日语项目,支持主题切换，pinia状态持久化管理

支持日语五十音,平片假名、罗马音、词义转换、百度翻译功能,方便日语初学者学习日语发音 介绍 采用vitevue3ts技术栈开发, pinia管理全局化。主要是为了日语入门学习五十音, 以及日语句子罗马 发音对照练习 使用: 安装 使用Npm或其他包管理器安装依赖 npm install 百度翻…
阅读更多...
Pyecharts绘图教程（2）—— 绘制多种折线图（Line）参数说明+代码实战

Pyecharts绘图教程（2）—— 绘制多种折线图（Line）参数说明+代码实战

文章目录 &#x1f3af; 1 简介&#x1f3af; 2 图表配置项2.1 导入模块2.2 数据配置项2.3 全局配置项 &#x1f3af; 3 代码实战3.1 基础折线3.2 平滑曲线&#xff08;is_smooth&#xff09;3.3 阶梯折线&#xff08;is_step&#xff09;3.4 空值过渡&#xff08;is_connect_n…
阅读更多...
C++中-＞与.的区别

C++中-＞与.的区别

在类中 在 C 中&#xff0c;-> 和 . 都可以用于访问类的成员变量和成员函数。但它们在使用上有一些区别&#xff1a; 1. 对于指针类型的对象&#xff0c;必须使用 -> 来访问其成员&#xff1b;而对于非指针类型的对象&#xff0c;则需要使用 . 。 2. -> 运算符在实…
阅读更多...
2023年淘宝天猫京东双11红包活动时间什么时候开始如何使用京东淘宝天猫双十一红包口令抢双11超级红包？

2023年淘宝天猫京东双11红包活动时间什么时候开始如何使用京东淘宝天猫双十一红包口令抢双11超级红包？

2023年京东双11抢红包时间是什么时候&#xff1f; 京东双11抢红包活动时间是从2023年10月23日20:00开始持续到11月11日23:59结束&#xff1b; 2023年京东双11抢红包口令是什么如何使用&#xff1f; 1、在2023年京东双11红包活动时间内&#xff0c;每天都可以打开京东APP&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023