Web 技术基础与 Nginx 网站环境部署超详细教程

前言

随着互联网技术的飞速发展,Web 开发和服务器部署成为后端开发、运维工程师的核心技能。掌握 Web 基础概念、HTTP 协议以及 Nginx 服务器的部署配置,是搭建稳定、高效网站的关键。本文将从 Web 基础讲起,逐步介绍静态 / 动态网页、HTTP 协议核心知识,最终落地到 Nginx 的编译安装、配置与运行控制,全程实操性拉满,适合入门学习与实际部署参考。

一、Web 基础核心概念

1.1 域名与 DNS

网络通信基于 TCP/IP 协议,每台主机有唯一的 IP 地址,但数字型 IP 难以记忆,因此诞生了域名(字符型地址),二者一一对应。

  • 域名结构 :以www.baidu.com为例,www为主机名,baidu为二级域名,com为顶级域名,最顶层为根域(由 13 台根服务器管理,主根服务器位于美国)。
  • 域名类型:顶级域包含组织域(.com 商业、.net 网络、.org 非盈利)和国家 / 地区域(.cn 中国、.uk 英国);二级域是域名注册人的网上标识。
  • DNS 域名解析 :实现域名到 IP 的转换,分为静态映射 (Hosts 文件)和动态映射(DNS 服务器)。Hosts 文件请求级别高于 DNS,可手动配置域名 - IP 映射提高解析效率。

1.2 Hosts 文件配置

Hosts 文件能绕过 DNS 直接映射域名和 IP,不同系统存放路径不同:

  • Windows:c:\windows\system32\drivers\etc\hosts
  • CentOS:/etc/hosts配置示例 :在文件中添加127.0.0.1 www.baidu.com,访问该域名时将直接指向本地回环地址。

1.3 域名注册

遵循先申请先注册原则,步骤为:准备资料(.com 无需证件,.cn 需身份证 / 营业执照)→ 选择授权注册商 → 查询域名可用性 → 提交注册并缴费 → 配置 DNS 解析。注册成功后 24 小时可通过 whois 查询域名所有者信息。

二、网页与 HTML 基础

2.1 网页核心构成

网页是承载网站内容的基本文件,通过 URL 访问,包含文本、图像、Flash、音视频、表格、导航栏、交互式表单等元素,由HTML(超文本标记语言) 编写,配合 HTTP 协议传输。

2.2 HTML 核心知识

HTML 是标记语言,通过标签定义网页结构,浏览器会解析标签并渲染内容(对错误标签不报错,仅按效果展示)。

  • 文件结构 :最外层为<html>,内部包含<head>(页面描述信息,如标题<title>、元数据<meta>)和<body>(页面实际内容)。
  • 基本语法 :采用双标记符形式(<标签>内容</标签>),部分单标记符如<br/>可单独使用。
  • 常用标签 :超链接<a>、表格<table>/<tr>、字体<font>等,是网页布局和内容展示的基础。

2.3 网站与 Web 发展阶段

  • 网站与主页:网站是具有独立域名、存放空间的内容集合(由多个网页 / 程序组成);主页是浏览器默认打开的页面,用于引导用户访问网站其他内容。
  • Web1.0 vs Web2.0
    • Web1.0:门户网站为主,内容由运营商提供,靠点击量盈利,典型代表如早期新浪、腾讯。
    • Web2.0:用户主导生成内容,支持分享、社群聚合,开放平台 + 高活跃用户,典型代表如博客、社交网站。

三、静态网页与动态网页

3.1 静态网页

纯 HTML 格式的网页,后缀为.htm/.html,页面内容由 HTML 代码固定,修改内容需直接编辑代码。可通过 GIF、Flash、滚动字幕实现视觉上的动态效果,但本质内容无变化,是网站建设的基础。

3.2 动态网页

页面代码固定,但展示内容可随时间、环境、数据库操作结果动态变化,后缀为.php/.jsp/.asp等,URL 中含标志性符号?

  • 核心特点:融合 HTML 与高级编程语言(PHP/Java/C#)、数据库技术,支持交互式管理(如用户登录、数据查询)。
  • 主流开发语言:
    • PHP:超文本预处理器,语法简单,适合快速搭建交互站点;
    • JSP:基于 Java 体系,跨平台性好,适合大型项目;
    • Python/Ruby:面向对象,开发效率高,适用于轻量级 Web 开发。

早期动态网页采用 CGI 技术,因编程困难、效率低下已逐渐被上述技术取代。

四、HTTP 协议核心详解

超文本传输协议(HTTP)是互联网应用最广泛的网络协议,所有网页文件均需遵循该标准,采用请求 / 响应模型(客户端发请求,服务器返回响应)。

4.1 HTTP 协议版本

  • HTTP/0.9:已过时,仅支持 GET 方法,无版本号和请求头,无法传递大量信息;
  • HTTP/1.0:首次指定版本号,仍被代理服务器广泛使用;
  • HTTP/1.1:当前主流版本,默认持久连接,支持管道化多请求,提升传输效率。

4.2 常用 HTTP 方法

HTTP 方法告诉服务器执行的动作,最核心的是GETPOST,二者对比如下表:

特性 GET 方法 POST 方法
数据长度限制 受 URL 长度限制(最大 2048 字符) 无限制
缓存 可被浏览器缓存 不可缓存
安全性 参数在 URL 中显示,安全性低 参数在请求体中,安全性高
书签 / 刷新 可收藏为书签,刷新无提示 不可收藏,刷新会提示重新提交数据

使用场景:GET 用于获取资源(如查询页面),POST 用于提交敏感数据 / 大量数据(如用户登录、表单提交)。

此外,HTTP 还支持 PUT(存储资源)、DELETE(删除资源)、HEAD(获取响应报头)等方法。

4.3 HTTP 状态码

3 位数字代码,表示服务器响应状态,分为五大类:1XX(信息提示)、2XX(成功)、3XX(重定向)、4XX(客户端错误)、5XX(服务器错误)。生产环境常见状态码

  • 200 OK:请求成功,服务器正常返回内容;
  • 301 Moved Permanently:页面永久重定向;
  • 403 Forbidden:服务器拒绝访问;
  • 404 Not Found:服务器无法找到请求页面;
  • 500 Internal Server Error:服务器内部错误;
  • 502 Bad Gateway:无效网关;
  • 503 Service Unavailable:服务暂时不可用;
  • 504 Gateway Timeout:网关请求超时。

4.4 HTTP 请求与响应流程

用户在浏览器输入 URL 后,整个交互流程分为请求报文发送响应报文返回两步,核心结构如下:

(1)请求报文(客户端→服务器)

请求行请求头空行请求体组成:

  • 请求行:请求方法 + URL + 协议版本(如GET /index.html HTTP/1.1);
  • 请求头:键值对形式,附加请求信息(如User-Agent(客户端程序)、Connection: Keep-Alive(持久连接));
  • 空行:分隔请求头和请求体,必不可少;
  • 请求体:提交的参数,GET 方法无请求体(参数在 URL 中),POST 方法参数存于此处。
(2)响应报文(服务器→客户端)

状态行响应头空行响应体组成:

  • 状态行:协议版本 + 状态码 + 描述(如HTTP/1.1 200 OK);
  • 响应头:键值对形式,附加响应信息(如Server(服务器软件)、Content-Type(响应内容类型));
  • 空行:分隔响应头和响应体;
  • 响应体:服务器返回的 HTML 数据,浏览器解析后渲染为可视化页面。

五、Nginx 网站环境部署

Nginx 是一款轻量级 HTTP 服务器,由俄罗斯开发者开发,以稳定性高、资源消耗低、并发处理能力强著称(单台物理机支持 3-5 万并发请求),广泛应用于社交、电商、虚拟主机等场景,是替代 Apache 的优选方案。

5.1 Nginx 编译安装(CentOS 系统)

编译安装可自定义配置参数,适配实际业务需求,步骤如下:

步骤 1:关闭防火墙与 SELinux,安装依赖包
复制代码
# 关闭防火墙并设置开机自禁
systemctl stop firewalld
systemctl disable firewalld
# 临时关闭SELinux
setenforce 0
# 安装编译依赖(pcre、zlib、gcc、openssl等)
yum -y install pcre-devel zlib-devel gcc* openssl-devel
步骤 2:创建 Nginx 专用运行用户 / 组
复制代码
# -M:不创建家目录;-s:指定shell为nologin(禁止登录)
useradd -M -s /sbin/nologin nginx
步骤 3:解压并编译安装 Nginx
复制代码
# 解压安装包(以nginx-1.26.3为例)
tar zxvf nginx-1.26.3_http_proxy.tar.gz
cd nginx-1.26.3
# 配置编译参数(完整版)
./configure \
--prefix=/usr/local/nginx \
--user=nginx \
--group=nginx \
--with-http_ssl_module \
--with-http_v2_module \
--with-http_realip_module \
--with-http_stub_status_module \
--with-http_gzip_static_module \
--with-pcre \
--with-stream \
--add-module=./ngx_http_proxy_connect_module
# 编译并安装
make && make install
# 建立软链接,方便全局调用nginx命令
ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/

核心参数说明

  • --prefix:指定 Nginx 安装目录;
  • --user/--group:指定运行用户 / 组;
  • --with-http_ssl_module:支持 HTTPS;
  • --with-http_stub_status_module:支持 Nginx 状态统计;
  • --with-stream:支持 TCP 反向代理;
  • --add-module:添加第三方模块,实现 HTTPS 转发。

5.2 Nginx 运行控制

(1)检查配置文件语法

修改配置后必须先检查语法,避免启动失败:

复制代码
nginx -t
(2)启动、停止、重载 Nginx
复制代码
# 启动Nginx
nginx
# 查看Nginx进程是否启动
netstat -anpt | grep nginx
# 重载配置(不中断服务)
killall -s HUP nginx 或 nginx -s reload
# 关闭Nginx
killall -s QUIT nginx 或 nginx -s stop
(3)添加 Nginx 系统服务(开机自启)

手动创建系统服务文件,实现systemctl管理:

复制代码
# 进入系统服务目录
cd /lib/systemd/system
# 创建nginx.service文件
vim nginx.service

写入以下内容:

复制代码
[Unit]
Description=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/local/sbin/nginx -s stop
ExecReload=/usr/local/sbin/nginx -s reload

[Install]
WantedBy=multi-user.target

配置完成后刷新服务并设置开机自启:

复制代码
# 刷新系统服务配置
systemctl daemon-reload
# 设置开机自启
systemctl enable nginx
# 启动Nginx服务
systemctl start nginx
# 查看Nginx服务状态
systemctl status nginx

5.3 Nginx 核心配置文件(nginx.conf)

Nginx 主配置文件位于/usr/local/nginx/conf/nginx.conf,分为全局配置I/O 事件配置HTTP 配置三部分,核心配置如下:

(1)全局配置

设置 Nginx 整体运行参数,影响所有子配置:

复制代码
# 运行用户,与编译时--user一致
user nginx;
# 工作进程数量,建议与CPU核心数一致
worker_processes 1;
# 错误日志文件路径
error_log logs/error.log;
# PID文件路径
pid logs/nginx.pid;
(2)I/O 事件配置

设置 Nginx 的网络连接模型,优化并发处理能力:

复制代码
events {
    # 使用epoll模型(Linux下高性能网络模型,支持高并发)
    use epoll;
    # 每个工作进程的最大连接数
    worker_connections 4096;
}
(3)HTTP 配置

Nginx 的核心配置段,包含 MIME 类型、日志、连接超时、虚拟主机等,嵌套server块(单个虚拟主机配置):

复制代码
http {
    # 引入MIME类型配置文件
    include mime.types;
    # 默认二进制流类型
    default_type application/octet-stream;
    # 定义日志格式
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    # 访问日志路径,使用main格式
    access_log logs/access.log main;
    # 开启高效文件传输模式
    sendfile on;
    # 持久连接超时时间,单位秒
    keepalive_timeout 65;

    # 虚拟主机配置
    server {
        # 监听80端口
        listen 80;
        # 域名/主机名
        server_name www.benet.com;
        # 页面编码
        charset utf-8;

        # 根路径配置
        location / {
            # 网站根目录
            root html;
            # 默认首页
            index index.html index.htm;
        }
        # 错误页面配置
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}

5.4 Nginx 访问状态统计配置

开启stub_status模块,可查看 Nginx 实时运行状态(如活跃连接、请求数),配置如下:在http块的server中添加以下内容:

复制代码
location /status {
    # 开启状态统计
    stub_status on;
    # 关闭该路径的访问日志
    access_log off;
}

配置完成后重载 Nginx,通过http://服务器IP/status访问,可看到如下状态信息:

复制代码
Active connections: 2 
server accepts handled requests 
 223 223 223 
Reading: 0 Writing: 1 Waiting: 1

字段说明

  • Active connections:当前活跃连接数;
  • accepts:服务器接受的总连接数;
  • handled:服务器处理的总连接数;
  • requests:总请求数;
  • Reading:正在读取客户端请求的连接数;
  • Writing:正在向客户端返回响应的连接数;
  • Waiting:等待客户端请求的空闲连接数。

六、总结

本文从 Web 基础入手,讲解了域名、DNS、HTML、静态 / 动态网页的核心概念,深入剖析了 HTTP 协议的请求 / 响应模型、常用方法和状态码,最终通过实操完成了 Nginx 的编译安装、运行控制和核心配置。

Nginx 作为高性能的轻量级服务器,不仅能作为 Web 服务器提供静态资源访问,还支持反向代理、负载均衡、动静分离等高级功能,是生产环境中搭建网站的首选工具。掌握本文的基础配置后,可进一步学习 Nginx 的反向代理、HTTPS 配置、虚拟主机多域名部署等高级用法,适配更复杂的业务场景。

相关推荐
新的算法2 小时前
通过重装vCenter Server解决登录vCenter界面时,报“503 Service Unavailable“错误的问题
运维·vmware·虚拟化
又是忙碌的一天2 小时前
Java 面向对象三大特性:封装、继承、多态深度解析
java·前端·python
Felven2 小时前
麒麟信安系统忘记root密码解决说明
linux·运维·服务器
跟着珅聪学java2 小时前
Vue 2 + CommonJS 写法开发教程
前端·javascript·vue.js
IMPYLH2 小时前
Linux 的 base64 命令
linux·运维·服务器·bash·shell
minstbe2 小时前
IC设计私有化AI助手实战:基于Docker+OpenCode+Ollama的数字前端综合增强方案(基础版)
前端·人工智能·docker
程序员果子2 小时前
Nginx 从入门到精通:全面解析与实战指南
linux·运维·服务器·nginx