Web 技术与 Nginx 网站环境部署

一、Web 基础

Web 核心运行原理

1.1 基础框架：C / S 模式

Web 采用客户端 - 服务器（Client / Server）模式：

客户端（Client）：浏览器（Chrome、Edge、Safari）、APP、小程序
服务器（Server）：存放网站代码、处理请求、返回数据的远程机器

1.2 核心机制：请求 - 响应模型

客户端发送请求
服务器接收、处理请求
服务器返回响应
客户端渲染 / 展示结果

1.3 Web 核心三要素

URL：同一资源定位符，找打资源地址
HTTP/HTTPS：传输数据的规则
HTML/CSS/JS：展示页面的内容

Web 核心协议：HTTP/HTTPS

2.1 URL 组成（访问网站的地址）

复制代码

https://www.baidu.com:443/index.html?name=test#top
 协议        域名      端口   路径        参数    锚点

协议：http:// 明文传输，https:// 加密传输
域名：IP 的别名，方便记忆
端口：HTTP 默认 80，HTTPS 默认 443
路径：服务器上文件 / 接口位置

2.2 HTTP 请求核心内容

（1）请求方法

GET：获取数据（查），如打开网页、加载图片
POST：提交数据（增），如登录、注册、上传文件
PUT：修改数据
DELETE：删除数据

（2）HTTP 状态码（响应结果）

200：请求成功
301/302：页面跳转
400：请求错误
403：禁止访问
404：资源不存在
500：服务器内部错误

2.3 HTTPS = HTTP + SSL/TLS 加密

解决 HTTP 明文传输、易被窃听、篡改的问题
依赖 SSL 证书，实现数据加密、身份验证

Web 前端：用户看到的页面

前端负责页面展示、交互，三大核心技术：

3.1 HTML（结构）

超文本标记语言，搭建页面骨架：标题、段落、图片、按钮、表单。

3.2 CSS（样式）

层叠样式表，美化页面：颜色、布局、字体、动画。

3.3 JavaScript（交互）

脚本语言，实现动态效果：表单验证、轮播图、异步请求、页面交互。

3.4 前端运行位置

直接在浏览器中运行，不依赖服务器计算。

Web 后端：处理逻辑的核心

后端负责数据处理、业务逻辑、数据库操作，用户不可见。

4.1 后端开发语言

Java、Python、PHP、Go、Node.js、C# 等。

4.2 Web 服务器（接收请求）

负责接收浏览器请求、返回静态资源、转发动态请求：

Nginx：高并发、轻量，适合静态服务、反向代理
Apache：稳定、兼容好
IIS：Windows 服务器专用

4.3 应用服务器（处理逻辑）

运行后端代码，处理业务：Tomcat（Java）、uWSGI（Python）、PHP-FPM（PHP）。

4.4 数据库（存储数据）

MySQL、PostgreSQL、Redis 等，存储用户信息、文章、订单等数据。

静态网站 vs 动态网站

类型	特点	示例	服务器处理
静态网站	内容固定，直接返回文件	纯 HTML、宣传页	Nginx 直接返回文件
动态网站	内容实时生成，数据可变	商城、后台、论坛	Nginx 转发给后端程序生成

完整 Web 请求流程

浏览器解析 URL，拆分协议、域名、路径
DNS 解析：将域名转为服务器 IP 地址
建立 TCP 连接（三次握手）
浏览器发送 HTTP/HTTPS 请求
服务器（Nginx）接收请求
- 静态资源：直接返回 HTML/CSS/ 图片
- 动态请求：转发给后端程序处理
后端查询数据库，生成页面 / 数据
服务器返回响应结果
浏览器渲染页面，展示给用户
断开 TCP 连接（四次挥手）

二、Nginx 网站环境部署

编译安装 Nginx

安装支持软件

bash 复制代码

# 关闭防火墙、SELinux内核防御机制
systemctl stop firewalld
systemctl disable firewalld
setenforce 0

# 安装
dnf -y install pcre-devel zlib-devel gcc* openssl-devel

创建运行用户、组
bash 复制代码
```
useradd -M -s /sbin/nologin nginx
```

编译安装 Nginx

bash 复制代码

# 解压
tar zxvf nginx-1.26.3_http_proxy.tar.gz

# 进入解压后的目录并且执行 ./configure 文件
cd nginx-1.26.3
./configure --prefix=/usr/local/nginx \  # 指定前缀
--user=nginx \  # 指定 nginx 运行用户
--group=nginx  \  # 指定 nginx 运行组
--with-http_ssl_module \  # 支持 https://
--with-http_v2_module \  # 支持 http 版本 2
--with-http_realip_module \  # 支持 ip 透传
--with-http_stub_status_module \  # 支持状态页面
--with-http_gzip_static_module \  # 支持压缩
--with-pcre \  # 支持正则
--with-stream \  # 支持 tcp 反向代理
--add-module=./ngx_http_proxy_connect_module  # 支持 https 转发（nginx 默认不支持）

# 编译
make && make install

bash 复制代码

# 在 /usr/local/sbin 下创建 nginx 可执行文件的软链接（全局）
ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin
ls -l /usr/local/sbin/nginx

Nginx 的运行控制

检查配置文件
bash 复制代码
```
nginx -t
```

启动、停止 Nginx

bash 复制代码

# 启动
nginx

# 查看状态
netstat -anpt | grep nginx

# 终止
killall -9 nginx
killall -s HUP nginx

添加 Nginx 系统服务

bash 复制代码

 cd /lib/systemd/system
 vim nginx.service

bash 复制代码

[Unit]
Decription=The NGINX HTTP and reverse proxy server
After=network.target

[Service]
Type=forking
PIDFile=/usr/local/nginx/logs/nginx.pid
ExecStart=/usr/local/sbin/nginx
ExecStop=/usr/sbin/nginx -s stop
ExecReload=/usr/local/sbin/nginx -s reload

[Install]
WantedBy=multi-user.target

备注：

fork 本身是一个进程

当执行 ExecStart 启动 nginx 进程的时候，fork 进程自身以 daemon 模式运行，将 nginx 作为一个子进程，并启动起来这个 nginx 的子进程。然后 fork 父进程退出，并将 fork 出的 nginx 子进程作为服务主进程进行跟踪

bash 复制代码

systemctl daemon-reload
systemctl enable nginx
systemctl start nginx