Nginx基本使用以及部署前端项目

2023-08-10
25369 分钟
...

最近学习了一下Nginx,整理了一个博客,主要参考的是狂神说的b站视频教程,文章链接如下:狂神说Nginx快速入门

一、下载、启动Nginx

1.下载Nginx

Nginx官方选择自己电脑适用的稳定版本下载,我下载的的windows版本。 下载完,就会有一个压缩包。需要创建一个文件夹用于存放解压后的nginx内容(注意:存放Nginx的文件夹最好不要有中文,否则会报错),解压后的内容如下所示: 后续我们经常使用到的就是conf配置文件。

2.启动Nginx

Win+R,运行cmd,切换到nginx解压之后的目录: 在这里插入图片描述 可以查看下conf目录中的nginx.conf文件。 用记事本打开,可以看到它的默认端口是80端口,默认访问域名是以localhost访问。也就是以后只要访问80端口,就会被Nginx拦截。 接着,打开浏览器,输入 http://localhost:80并 回车,出现以下内容说明Nginx启动成功了! 也可以在任务管理器中看到nginx是在运行状态的。

3.常用命令



ts

复制代码

`强制停止nginx:nginx -s stop 安全退出nginx:nginx -s quit 重新加载配置文件:nginx -s reload (如果修改了配置文件就执行这行命令,否则修改就是无效的。前提:nginx服务是启动的状态,否则reload是不成功的。) ``````powershell // 这行代码就说明请求会代理到 https://www.yslbeautycn.com proxy_pass  https://www.yslbeautycn.com` 

二、nginx.conf配置文件分析

最上面的是全局配置;events是最大连接的数量;http中有一些小模块,比如静态资源文件配置,里面可以配置多个server,server可以配置不同的服务,比如location,比如负载均衡配置upstream。 在这里插入图片描述

1.配置反向代理

例如:修改nginx.conf配置文件,配置location中proxy_pass指向YSL官网。



powershell

复制代码

`// 这行代码就说明请求会代理到 https://www.yslbeautycn.com proxy_pass  https://www.yslbeautycn.com` 

注意: proxy_pass后面跟的是空格 写完一个配置项后面需要以分号;结尾 修改了nginx.conf配置文件后,运行nginx -s reload 在浏览器输入http://localhost:80并回车,就可以发现出现的是YSL官网了。

2.负载均衡upstream

在一堆服务器中,Nginx能够将从客户端请求“均匀地”分配到这些服务器中,这就是负载均衡。

场景:如果请求很多,一台服务器忙不过来,就需要多个服务器一起合作。假如我们有100G的服务器、64G的服务器、16G的服务器,我们希望实现更多的请求能够到100G的服务器中,更少的请求到16G的服务器中。这就是负载均衡的功能了。

常用方式:

  • 轮询 "轮询"会将客户端的请求循环分配给不同的后端服务器。轮询容易产生资源分配不合理的问题。 假设有三个服务器,那么就可以在nginx.conf文件中使用upstream块定义这三个服务器;然后再配置location中的proxy_pass指令指向upstream名称。写法如下所示: 在这里插入图片描述

  • 加权轮询 用于服务器性能不同的集群中,可以让资源分配更合理。 服务器性能越好的,权重就更高;性能越差的,权重就越低。(权重weight) 如上图所示:如果请求很多的情况下,那么大量的请求都会到权重为4的第三个服务器中,只有一部分请求才会到权重为1的服务器中,这样可以确保服务器没有超负荷。权重weight越高的,请求就越多;这样,可以保证服务器性能的最大化,哪怕有一台很小的服务器,也可以上线去使用,这样会节约成本。 可以通过weight来设置服务器的不同权重,写法如下所示: 在这里插入图片描述 优点:分布式处理,提升网络的灵活性、稳定性,使得服务器性能最大化。

三、Nginx上部署前端项目

Vue项目需要打包好,打包项目运行npm run build即可,打包完成项目中会多出一个dist目录,我这里的项目叫demo。 我们将demo项目下dist目录中的内容都复制粘贴到nginx目录下的html目录中,将原本的nginx下的html中的内容删除掉。 在这里插入图片描述 效果就是这样: 在这里插入图片描述 配置文件依然是默认的80端口,localhost打开。运行一下:start nginx,可以看到vue项目运行成功了。

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
nginx2026-01-06
Ubuntu Nginx配置文件与管理
1\. Nginx配置文件结构 配置文件位置 配置层次结构 2\. 常用配置示例 基础服务器配置 反向代理配置 HTTPS配置 (Let’s Encrypt证书) 3\. Ubuntu中Nginx配置管理流程 创建新站点配置 禁用站点 配置片段复用 (snippets) 4\. 配置文件验证与服务管理命令 配置测试 服务管理 5\. 常用调试命令 6\. 常见配置问题解决 配置后无法访问 1. 检查配置语法: 2. 检查防火墙设置: 3...
学习
nginx2025-06-07
Nginx配置介绍
一、Nginx配置介绍 是一个高性能的‌ 和反向代理服务器,以其轻量级、高并发能力而闻名。它的 配置文件通常位于 /etc/nginx/nginx.conf ,但具体位置可能会因安装方式和操作系统而异。Nginx的配置文件主要由以下几个部分组成: 1. 全局块:配置影响Nginx全局的指令,如运行Nginx服务器的用户组、Nginx进程PID存放路径、日志存放路径、配置文件引入、允许生成的worker process数等。 2. :配置...
学习
nginx2025-06-05
在 Ubuntu 上安装和配置 Nginx 的完整指南
Nginx 是一款高性能的开源 Web ,它可以用于反向代理、负载均衡、静态文件服务等。本指南将带您逐步完成在 Ubuntu 22.04 上安装和配置 Nginx 的过程。 步骤 1:更新软件包索引 在安装任何新软件之前,首先确保您的系统上的软件包索引是最新的。打开终端并运行以下命令: 步骤 2: 在 Ubuntu 22.04 上,可以通过 apt 包管理器轻松安装 Nginx。运行以下命令: 安装完成后,可以使用以下命令来检查 Ngi...
学习
nginx2024-11-25
nginx-前端必会-项目部署-精简通用篇
这篇文章是关于 Nginx 的介绍,包括其在项目部署中的作用,如反向代理、负载均衡等。还介绍了 Nginx 的特点、下载安装、常用命令、实际应用中的配置,如设置不同端口和文件夹,解决跨域、缓存、https 等问题,最后给出了一个全面的配置示例,并总结了带小白学习 Nginx 的主要内容。 关联问题: 如何优化nginx配置 nginx能否处理高并发 怎样解决nginx报错 前言 最近在公司部署项目时遇上了一点关于nginx的问题,于是就...
学习
nginx2024-10-16
nginx使用小记
厚积薄发,静水流深,今天介绍nginx的一些使用 基本配置文件 hosts文件配置域名解析 服务器已经安装了nginx, 并且监听80端口: 如果在服务器的hosts文件中配置了域名, 那么请求网络资源时, 首先会去hosts文件中查找是否有该域名的对应IP, 如果有, 直接请求该路径, 如果没有, 再去请求公共的DNS查询IP 例如, 在服务器的hosts文件中追加该配置: 然后使用 curl tcwwjdr/wwjfiles/ip....
学习
nginx2024-05-30
感受下 nginx 带来的魅力
引言 :纯干货分享,汇总了我在工作中八年遇到的各种 Nginx 使用场景,对这篇文章进行了细致的整理和层次分明的讲解,旨在提供简洁而深入的内容。希望这能为你提供帮助和启发! 对于前端开发人员来说,Node.js 是一种熟悉的技术。虽然 Nginx 和 Node.js 在某些理念上有相似之处,比如都支持 HTTP 服务、事件驱动和异步非阻塞操作,但两者并不冲突,各有各自擅长的领域: Nginx :擅长处理底层的服务器端资源,如静态资源处理...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录