Web 前端工程师,你需要掌握 Nginx!

本文面向Web前端工程师,详细介绍Nginx服务器,包括其优势、正向代理与反向代理的区别、安装使用、配置文件详解、HTTPS配置及常见问题解决,帮助你快速上手Nginx,提升本地服务部署能力。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对于 Web 前端童鞋来说,我们几乎无时无刻不在启动服务。

以前总是偷懒使用 Http-Server 来启动一个本地服务,但是使用场景有限,所以很快转向了更加强大的 Nginx 服务器。

本文将逐步介绍 Nginx 服务器,同时手把手教你入门学习,快来尝试启动一个本地服务器吧。

一、简单介绍

在这里插入图片描述
Nginx — Ngine X,是一款自由的、开源的、高性能 HTTP 服务器和反向代理服务器。

简单来说:Nginx 本身就可以托管网站(类似于 Tomcat,IIS 之类),进行 Http 服务处理,也可以作为反向代理服务器使用。

二、有何优势

在这里插入图片描述
Nginx 解决了服务器的 C10K(就是在一秒之内连接客户端的数目为10k 即1万)问题。

它的设计不像传统的服务器那样使用线程处理请求,而是一个更加高级的机制—事件驱动机制,是一种异步事件驱动结构。

Nginx 有一个主线程( master process)和几个工作线程(worker process)。

1.主线程的目的是加载和验证配置文件、维护工作线程。

2.工作线程处理实际的请求,Nginx 采用基于事件的模型和依赖操作系统的机制在工作线程之间高效地分发请求。

工作线程的数量可配置,也可自动调整为服务器 CPU 的数量。

三、搞懂正向代理和反向代码

在这里插入图片描述
1.正向代理:

首先,代理服务器一般指局域网内部的机器通过代理服务器发送请求到互联网上的服务器,代理服务器一般作用在客户端。

例如:GoAgent 翻墙软件。我们的客户端在进行翻墙操作的时候,我们使用的正是正向代理,通过正向代理的方式,在我们的客户端运行一个软件,将我们的 HTTP 请求转发到其他不同的服务器端,实现请求的分发。

2.反向代理:

反向代理服务器作用在服务器端,它在服务器端接收客户端的请求,然后将请求分发给具体的服务器进行处理,然后再将服务器的相应结果反馈给客户端。

Nginx 就是一个反向代理服务器软件。

四、Nginx 安装与使用

在这里插入图片描述
这里我以 Mac 安装举例:

brew search nginx
brew install nginx

Nginx 及其模块的工作方式由配置文件确定。

默认情况下,配置文件名为 nginx.conf,放在 /usr/local/nginx/conf 、/etc/nginx 或者 /usr/local/etc/nginx 文件夹中。

安装完,打开浏览器,访问 localhost:8080 ,页面出现欢迎语 Welcome to nginx!,则说明安装成功。

五、Nginx 查看配置

在这里插入图片描述

nginx -t

当你执行 nginx -t 的时候,Nginx 会去测试你得配置文件的语法,并告诉你配置文件是否写得正确,同时也告诉了你配置文件得路径,如下:

nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax
is ok
nginx: configuration file /usr/local/etc/nginx/nginx.conf test
is successful

通过 vim 查看与编辑配置文件:

vim /usr/local/etc/nginx/nginx.confıg

启动 Nginx:

nginx

重启 Nginx:

nginx -s reload

退出 Nginx:

nginx -s quit

六、Nginx 配置文件

通过 vim /usr/local/etc/nginx/nginx.confıg 打开 Nginx 配置文件:在这里插入图片描述
如上所示,我们设置了:

1.服务监听端口号 3001;

2.域名:jartto.wang;

3.指定项目访问目录;

4.访问项目文件;

到这里,一个简单的本地服务就启动起来了。

七、Nginx 配置 HTTPS

在这里插入图片描述

八、Nginx 启动异常

在这里插入图片描述
当我们运行 nginx -s reload 的时候,会报这样的错误:

nginx: [alert] kill(647, 1) failed (3: No such process)

这是因为,我们并没有启动 Nginx 服务,执行 nginx 命令启动服务。

九、invalid PID number

在这里插入图片描述
在 Mac 上用 brew 安装 Nginx,然后修改 Nginx 配置文件,再重启时报出如下错误:

nginx: [error] invalid PID number “” in
“/usr/local/var/run/nginx/nginx.pid”

解决方案:

$ sudo nginx -c /usr/local/etc/nginx/nginx.conf $ sudo nginx -s reload

十、Nginx 403 forbidden 原因

在这里插入图片描述
引起 nginx 403 forbidden 可能有二种原因,具体如下:

1.缺少 index.html 或者 index.php 文件在这里插入图片描述
如果在 /home/jartto/www 下面没有 index.php,index.html 的时候,直接访问域名,找不到文件,会报 403 forbidden 。

2.权限问题:因为权限问题引起的403,比较难查找,但是值得我们注意。

解决方案:这个时候,把 web 目录的权限改大,或者是把 Nginx 的启动用户改成目录的所属用户,重启一下。

十一、总结

在这里插入图片描述
Nginx 配置还是有很多可圈可点的地方,功能十分强大。

这里稍微总结一下:

1.我们从了解 Nginx 开始 ;

2.搞懂了正向代理和反向代理。

3.安装了 Nginx ,并启动了一个简单的服务。

4.当然,整个过程可能会有一些异常,不过很简单,基本集中在配置异常和权限问题。

我是一名从事了5年前端的程序员,辞职目前在做讲师,今年年初整理了一份适合2019年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,免费送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴。"
加QQ群:585843909(招募中)

好了,文章到这里就结束了,学习前端的同学们,你掌握了吗?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值