shell（八）——WEB与Nginx

原创已于 2025-11-24 08:57:15 修改 · 536 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #php #开发语言

于 2025-11-23 19:53:25 首次发布

前言

我们正身处一个由无形网络编织的时代。

当您轻点鼠标，或是在触摸屏上滑动手指，一个浩瀚的数字宇宙便应声开启。这，就是Web——万维网。它早已不再是计算机科学家实验室里的晦涩概念，而是如同水和电一样，成为了我们生活、工作和思考的基础设施。它重塑了文明的面貌，重新定义了信息、社交、商业乃至权力的运行规则。

回望来路，Web的诞生源于一个宏伟而单纯的理念：让知识自由链接。从蒂姆·伯纳斯-李爵士那划时代的提案开始，一套简单的技术——HTML（超文本标记语言）、HTTP（超文本传输协议）和URL（统一资源定位符）——便为全人类构建了一个去中心化的、共同书写的信息空间。在这里，任何一个节点都能通过“超链接”与另一个节点相连，思想的火花得以以前所未有的速度传递与碰撞。

Web的演进是一部激动人心的史诗。我们经历了：

Web 1.0：静态的、只读的网络，它是一个庞大的图书馆，我们作为读者，被动地汲取信息。

Web 2.0：动态的、可读可写的网络，它进化为一个全球性的社交广场。博客、社交媒体、维基百科……我们每个人都从读者变成了作者，共同参与内容的创造与传播。

Web 3.0（正在成型）：智能的、语义化的、去中心化的网络。它致力于让机器理解信息，并试图将数据所有权归还给用户，描绘着一个更加开放和智能的未来。

然而，这座数字巴别塔在展现其无尽魅力的同时，也充满了挑战与反思。信息过载、隐私泄露、算法偏见、数字鸿沟……这些阴影与Web带来的便利和连接如影随形。理解Web，不仅意味着掌握构建它的技术，更意味着思考它背后的伦理、社会影响和未来走向。

本书/本文/本课程的目的，正是为了带您深入这个复杂而迷人的世界。无论您是希望了解Web运行原理的普通用户，还是渴望用代码构建下一站奇迹的开发者，抑或是关心数字社会未来的思考者，我们都将从其核心基石出发，穿越历史的脉络，剖析当下的格局，并一同眺望那些正在塑造明天的技术浪潮。

现在，请您跟随我们，一同推开这扇通往数字世界的大门。让我们一起探索，这个由我们共同创造，也正深刻塑造着我们的——Web。

WEB

解释

WEB是运行在互联网之上的一个超文本信息系统，它依赖于HTTP/HTTPS协议实现浏览器与服务器之间的交互。
在这里插入图片描述

特点

分布式：资源分布在世界各地的服务器上。
跨平台：只要有浏览器，就能访问资源
无状态：每次HTTP请求都是独立的，服务器不会记住客户端状态（除非使用Cookie/Session）.

B/S架构（Browser/Server）

Browser（浏览器）：用户的入口，发送请求、渲染页面。
Server（服务器）：接收请求，返回需要资源或动态内容。

请求和响应过程

1.输入URL：用户在浏览器输入http://www.example.com。
2.DNS解析：浏览器将域名解析为IP地址。
3.建立连接：浏览器与Web服务器建立TCP连接（3次握手）。
4.发送请求：浏览器发起HTTP请求（GET/POST)。
5.服务器：

Web服务器处理静态资源请求。
动态请求转发到应用服务器（如Tomcat、Django）。
应用服务器可能再查询数据库。
6.返回响应：Web服务器将结果打包成HTTP响应报文返回浏览器。
7.渲染页面：浏览器解析HTML、加载CSS/JS、渲染最终页面。

静态、动态资源

静态资源：不需要服务器额外处理，直接返回即可。
HTML、CSS、图片、视频、JS文件
优点：速度快，压力小。
动态资源：需要服务器端代码计算生成，再返回客户端。
PHP脚本、Python Flask/Django、Java Servlet、Ruby
优点：个性化内容，支持交互。

发展阶段

Web1.0（只读）：静态页面为主，用户只能浏览器。
Web2.0（交互式）：用户可生成内容，AJAX（前端）技术普及。
Web3.0（智能化）：语义网、区块链、去中心化概念兴起。

实验目标

1.体验一次最简单的Web请求与响应过程Wireshark并且抓包。

实验步骤

创建一个静态页面：

个人简介 | 李明

<!-- 头部区域 -->
<header id="home">
    <div class="container">
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="李明" class="profile-img">
        <div class="header-content">
            <h1>李明</h1>
            <p>前端开发工程师 & UI设计师</p>
        </div>
    </div>
</header>

<!-- 关于我部分 -->
<section id="about">
    <div class="container">
        <h2 class="section-title">关于我</h2>
        <div class="about-content">
            <div class="about-text">
                <p>我是一名充满热情的前端开发工程师，拥有5年的网页设计和开发经验。我专注于创建直观、美观且功能强大的用户体验。</p>
                <p>我热衷于学习新技术，并始终关注行业的最新趋势。我相信好的设计不仅仅是美观，更重要的是解决用户的问题。</p>
                <p>在业余时间，我喜欢参加技术会议、阅读设计相关的书籍，并为开源项目做出贡献。</p>
            </div>
        </div>
    </div>
</section>

<!-- 技能部分 -->
<section id="skills">
    <div class="container">
        <h2 class="section-title">我的技能</h2>
        <div class="skills-container">
            <div class="skill-card">
                <i class="fas fa-code"></i>
                <h3>前端开发</h3>
                <p>精通HTML5、CSS3、JavaScript，熟悉React、Vue等现代前端框架，能够构建响应式、高性能的Web应用。</p>
            </div>
            <div class="skill-card">
                <i class="fas fa-paint-brush"></i>
                <h3>UI/UX设计</h3>
                <p>熟练使用Figma、Sketch和Adobe Creative Suite，注重用户体验设计，能够创建直观易用的界面。</p>
            </div>
            <div class="skill-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>响应式设计</h3>
                <p>专长于创建在各种设备上都能完美展示的网站，从桌面到移动设备，确保一致的用户体验。</p>
            </div>
        </div>
    </div>
</section>

<!-- 联系我部分 -->
<section id="contact">
    <div class="container">
        <h2 class="section-title">联系我</h2>
        <div class="contact-info">
            <div class="contact-item">
                <i class="fas fa-envelope"></i>
                <div>
                    <h3>邮箱</h3>
                    <p>liming@example.com</p>
                </div>
            </div>
            <div class="contact-item">
                <i class="fas fa-phone"></i>
                <div>
                    <h3>电话</h3>
                    <p>+86 138 0000 0000</p>
                </div>
            </div>
            <div class="contact-item">
                <i class="fas fa-map-marker-alt"></i>
                <div>
                    <h3>地址</h3>
                    <p>北京市朝阳区</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="social-links">
            <a href="#"><i class="fab fa-github"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-weibo"></i></a>
        </div>
        <p>&copy; 2023 李明. 保留所有权利.</p>
    </div>
</footer>

<script>
    // 简单的滚动平滑效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
</script>

Nginx

Nginx ( " enginex " ）是一个高性能的 HTTP 和反向代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问点开量第二的 Ram 匕 1 er . ru 站发的，第一个公开版本 0 . 1 . 0 发布于 2004 年 10 月 4 日。其将源代码以类 B 50 许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。 2011 年 6 月 1 日， Nginx 1 . 0 . 4 发布。 N ginx 是一款轻量级的 We 匕服务器／反向代理服务器及电子邮件（ IMAP / pop3 ）代理服务器，单台物理服务器可支持 3 。。。。一 5 。。。。个并发请求。并在一个。 s 。一 like 协妨发行。由俄罗斯的程序设计师｝ gor Sysoev 所开发，供俄国大型的入口网站及搜索引擎 Rambler （俄文：尸 aM6 月 eP ）使用。其特点是占有内存少，并发能力强，事实上 N 91 nx 的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用 Nginx 网站用户有：百度 BWS 、新浪、网易、腾讯、等
Nginx 是一个高性能 Web 服务器，它可以做很多事情

静态资源服务：可以直接把网页、图片、视频这些文件发给用户。
”反向代理：用户访问你的服务器， N ginx 可以帮你把请求转发到后端真正处理请求的服务器。
负载均衡：当有很多后端服务器时， N ginx 可以智能分配流量，让每台服务器都不忙不过来。
高并发处理：用事件驱动的方式处理请求，能同时处理成千上万的用户请求，而不会占用太多资源。
优势：
轻量级，占用内存小。
支持百万级并发访问。
稳定可靠，开源且社区活跃。

简述Nginx和Apache的差异：
1.Nginx是一个甚于事件的Web服务器。
2.Apache是一个基于流程的服务器Nginx避免子进程的概念，Apache是基于子进程的
3.Nginx在内存消耗和连接方面更好，Apache在内存消耗和连接方面一般
4.Nginx的性能和可伸缩性不依赖于硬件，Apache依赖于CPU和内存等硬件
5.Nginx支持热部署，Apache不支持热部署
6.Nginx对于静态文件处理具有更高效率，Apache相对一般
7.Nginx在反向代理场景具有明显优势，Apache相对一般

安装：
官方下载： https://nginx.org/download/nginx-1.20.2.tar.gz
在这里插入图片描述

关闭防火墙，将安装nginx所需软件包传到/opt目录下
在这里插入图片描述
安装依赖包

创建运行用户、组（Nginx 服务程序默认以 nobody 身份运行，建议为其创建专门的用户账号，以便更准确地控制其访问权限）
useradd -M -s /sbin/nologin nginx
编译安装Nginx
cd /opt
tar zxvf nginx-1.20.2.tar.gz -C /opt/

cd nginx-1.20.2/
./configure
–prefix=/usr/local/nginx \ #指定nginx的安装路径
–user=nginx \ #指定用户名
–group=nginx \ #指定组名
–with-http_stub_status_module
–with-http_ssl_module #启用 http_stub_status_module 模块以支持状态统计
操作

cd nginx-1.20.2/
./configure
–prefix=/usr/local/nginx
–user=nginx
–group=nginx
–with-http_stub_status_module
–with-http_ssl_module

make && make install

ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/ #让系统识别nginx的操作命令

检查、启动、重启、停止 nginx服务
nginx -t #检查配置文件是否配置正确
#启动
nginx
在这里插入图片描述

总结

Web已经从简单的文档浏览系统演变为一个复杂、交互性强的平台，深刻改变了人类获取信息、沟通交流和商业活动的方式，成为现代社会不可或缺的基础设施。
本部分以nginx.conf主配置文件为核心，拆解三大关键配置模块的作用与优化思路，为后续功能部署奠定基础：
全局配置：明确worker_processes参数与服务器内核的匹配原则（通常设为“内核数×2”，低访问量场景可设为1），确定Nginx工作进程的基础数量，直接影响并发处理能力；同时梳理PID文件、错误日志等基础配置的路径与作用。
I/O事件配置：重点讲解epoll模型的优势（适用于Linux 2.6+内核，减少高并发下的CPU占用），以及worker_connections的并发控制逻辑（单个进程默认处理4096个连接，结合进程数可计算总并发能力，需配合ulimit -n调整系统文件句柄限制）。
HTTP与location配置：梳理HTTP模块的基础参数（MIME类型映射、日志格式、连接超时时间等），并聚焦root、alias、proxy_pass三大location指令的差异——root会拼接请求路径与根目录，alias直接映射请求路径，proxy_pass用于反向代理，为后续配置调试提供关键区分依据。