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

前言

最近学习了一下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.常用命令

强制停止nginx:nginx -s stop
安全退出nginx:nginx -s quit
重新加载配置文件:nginx -s reload (如果修改了配置文件就执行这行命令,否则修改就是无效的。前提:nginx服务是启动的状态,否则reload是不成功的。)

二、nginx.conf配置文件分析

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

在这里插入图片描述

1.配置反向代理

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

// 这行代码就说明请求会代理到 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项目运行成功了。

在这里插入图片描述


总结

以上就是我要分享的Nginx相关的内容了。

原文地址:https://blog.csdn.net/m0_52043522/article/details/130701034

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读3.7k次,点赞2次,收藏5次。Nginx学习笔记一、Nginx 简介1. 什么是Nginx2. 反向代理3. 负载均衡4. 动静分离二、Nginx基本使用1. Nginx常用的操作命令2. Nginx的配置文件提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、Nginx 简介1. 什么是Nginx2. 反向代理3. 负载均衡4. 动静分离二、Nginx基本使用1. Nginx常用的操作命令2. Nginx的配置文件一、Nginx 简介1. 什么是Nginx  Nginx(“engine x”)是一个_nginx代理
文章浏览阅读1.7w次,点赞14次,收藏61次。我们在使用容器的过程中需,有时候需要对容器中的文件进行修改管理,如果不做文件映射的化,我们使用docker exec -it 容器ID/容器名 /bin/bash 才能进入nginx中的文件里面如图。架设在客户机与目标主机之间,只用于代理内部网络对Internet的连接请求,客户机必须指定代理服务器,并将原本要直接发送到web服务器上的http请求发送到代理服务器中。A想要组C的房子,但是A并不认识C所以租不到,但是B认识C,A找B帮忙租到了C的房子。客户端代理服务器服务器。_docker nginx 配置
文章浏览阅读1.4k次。当用户在访问网站的过程中遇到404错误时,通常情况下应该显示一个友好的错误页面,而不是仅仅显示一个简单的错误提示。在Nginx中,可以通过配置来实现404错误自动跳转到首页的功能。如果您的网站使用动态内容生成页面(如PHP或其他服务器端语言),则应相应地修改配置以适应您的网站架构。这样,当用户访问一个不存在的页面时,Nginx会自动将其重定向到首页。为了使配置生效,需要重新加载Nginx配置。首先,需要打开Nginx的配置文件。现在,当用户访问一个不存在的页面时,Nginx会自动将其重定向到首页。_nginx 404 重定向
文章浏览阅读2.7k次。docker 和 docker-compose 部署 nginx+mysql+wordpress 实战_docker wordpress mariadb
文章浏览阅读1.3k次。5:再次启动nginx,可以正常启动,可以在任务管理器中查看到nginx的进程。重新启动下 直接访问8090端口 ok 访问成功。1 :查看80端口占用情况,pid的值为3960。3:在运行中输入regedit打开注册表编辑器。2: 通过以下命令查看3960所对应的服务名称。4:找到Start,右键修改将其制改为4。_nginx80端口无法访问
文章浏览阅读3.1w次,点赞105次,收藏182次。高性能:Nginx 被设计为能够处理大量并发连接而不显著增加系统负担。它采用异步事件驱动的架构,可以有效地处理高流量的 Web 请求。负载均衡:Nginx 支持负载均衡,可以将请求分发到多个后端服务器,以提高网站性能和可用性。反向代理:Nginx 可以充当反向代理,将客户端请求转发到后端服务器,隐藏后端服务器的真实 IP 地址,增加安全性和可扩展性。静态文件服务:Nginx 可以高效地提供静态文件(如 HTML、CSS、JavaScript、图像等)的服务,减轻应用服务器的负担。
文章浏览阅读976次。nginx作为常用的web代理服务器,某些场景下对于性能要求还是蛮高的,所以本片文章会基于操作系统调度以及网络通信两个角度来讨论一下Nginx性能的优化思路。我们的大学教程大部分讲述七层模型,实际上现代网络协议使用的都是四层模型,如下图,应用层报文经过四层的首部封装到对端。对端链路层拆开首部查看mac地址是自己在网上,拆开ip首部查看目的地址是不是自己,然后到达传输层应用层完成报文接收。文章是基于原有个人知识基础上,对旧知识进行巩固,以及新知识实践学习。
文章浏览阅读5.4k次,点赞9次,收藏15次。最后再说一种情况,就是后端处理了跨域,就不需要自己在处理了(这里吐槽下,某些后端工程师自己改服务端代码解决跨域,但是又不理解其中原理,网上随便找段代码黏贴,导致响应信息可能处理不完全,如method没添加全,headers没加到点上,自己用的那个可能复制过来的并不包含实际项目所用到的,没有添加options请求返回状态码等,导致Nginx再用通用的配置就会可能报以下异常)里面的就好了,因为这里如果是预检请求直接就ruturn了,请求不会再转发到59200服务,如果也删除了,就会报和情况1一样的错误。_nginx 允许跨域
文章浏览阅读2.5k次。项目配置了多个域名,如下,php 代码中有获取的值。当访问a.demo.com时,其获取的值是符合预期的。但是当访问b.demo.com时,其获取的值还是a.demo.com,导致代码中的判断出现错误。_nginxservername多个域名
文章浏览阅读1k次,点赞2次,收藏5次。采用YAML manifest的方式来安装ingress-nginx,用registry.lank8s.cn镜像库来替换 registry.k8s.io的库。_ingress-nginx安装
文章浏览阅读1.6k次,点赞2次,收藏2次。在windows平台编译nginx_windows 编译nginx
文章浏览阅读5.8k次,点赞2次,收藏18次。nginx [engine x] 是 HTTP 和反向代理服务器、邮件代理服务器和通用 TCP/UDP 代理服务器。nginx 的特点是占有内存少,并发能力强,事实上 nginx 的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。在高连接并发的情况下,nginx是Apache服务器不错的替代品,能够支持高达50000个并发连接数的响应。使用epoll and kqueue作为开发模型。_nginx
文章浏览阅读2k次。Linux启动(systemctl start nginx)nginx服务时出现:Failed to start nginx.service: Unit not found._为什么nginx的systemctl start nginx.service不能使用
文章浏览阅读1.3k次。重启之后,打开浏览器,输入http://localhost:8900/myBaidu,这时候就会自动的跳转到百度的页面。按照我们不同的需求修改nginx文件夹中的nginx-1.16.1conf里面的nginx.conf文件。启动nginx:打开nginx的文件夹,然后双击nginx.exe文件,启动nginx。打开之后假设我们需要跳转到百度则在配置文件nginx.conf中的下面加上。1、打开任务管理器关闭nginx的进程。端口在配置文件的(下图)进行查看nginx端口。_nginx 代理百度
文章浏览阅读5.7k次,点赞5次,收藏3次。nginx重定向问题解决(rewrite or internal redirection cycle)_rewrite or internal redirection cycle while internally redirecting to "/inde
文章浏览阅读1.3k次。请注意,上述命令假设 Nginx 已经在系统的 PATH 环境变量中配置。如果没有,请提供正确的 Nginx 安装路径,或者在命令中使用完整的路径来替换。将该命令与所有 Nginx 进程的 PID 一起使用,以终止所有正在运行的 Nginx 进程。此命令将启动一个新的 Nginx 进程来重新加载配置文件并重新启动服务器。使用以下命令来终止所有 Nginx 进程(使用上面的 PID 替换。的进程以及它们的 PID。打开命令提示符(CMD)。此命令将列出所有名为。选项来强制终止进程。_windows 怎么关闭nginx
文章浏览阅读2.7k次,点赞2次,收藏7次。包括 Netflix、GitHub 和 WordPress。Nginx 可以用作 Web 服务器、负载均衡器、反向代理和 HTTP 缓存等。_ubuntu安装nginx
文章浏览阅读915次。轻松搭建短域名短链接服务系统,可选权限认证,并自动生成证书认证把nginx的http访问转换为https加密访问,完整步骤和代码。_nginx 短链代理
文章浏览阅读1.1k次,点赞35次,收藏24次。流媒体方案之Nginx——实现物联网视频监控项目Nginx是什么Nginx在流媒体方案中的位置软硬件准备移植编译Nginx运行Ngnix测试流媒体方案浏览器播放_nginx-rtmp-module
文章浏览阅读1.9k次。nginx 配置 wss 协议转发 ws 服务器_nginx 配置wss