CentOS 7 基于 Nginx 的 HTML 部署全流程指南

一、Nginx 安装（两种主流方式）

1. YUM 安装（推荐新手）

bash 复制代码

# 安装 EPEL 扩展源（部分系统需要）
yum install epel-release -y

# 安装 Nginx
yum install nginx -y

# 启动并设置开机自启
systemctl start nginx
systemctl enable nginx

特点：

自动处理依赖关系，默认配置文件路径为 /etc/nginx/nginx.conf
静态资源默认存储目录：/usr/share/nginx/html

2. 源码编译安装（定制化需求）

bash 复制代码

# 安装依赖库
yum -y install gcc pcre-devel zlib-devel openssl-devel

# 下载源码包（以 1.25.3 为例）
wget https://nginx.org/download/nginx-1.25.3.tar.gz
tar -zxvf nginx-1.25.3.tar.gz
cd nginx-1.25.3

# 配置与编译
./configure --prefix=/usr/local/nginx
make && make install

# 启动服务
/usr/local/nginx/sbin/nginx

特点：

可自定义模块（如 --with-http_ssl_module 启用 HTTPS）
配置文件路径：/usr/local/nginx/conf/nginx.conf

二、核心配置详解

1. 虚拟主机配置（多站点管理）

步骤一：创建专用配置目录

bash 复制代码

mkdir /etc/nginx/vhost  # YUM 安装路径
# 或 mkdir /usr/local/nginx/conf/vhost  # 源码安装路径

步骤二：新建站点配置文件

创建 /etc/nginx/vhost/my_site.conf（示例）：

nginx 复制代码

server {
    listen 80;
    server_name example.com www.example.com;  # 替换为实际域名或IP
    
    root /var/www/html/my_site;  # 自定义HTML存放路径
    index index.html;

    # 日志配置
    access_log /var/log/nginx/my_site_access.log;
    error_log /var/log/nginx/my_site_error.log;

    # 静态文件缓存（可选）
    location ~* \.(jpg|css|js)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
}

说明：

root 指定 HTML 文件根目录，需提前创建并赋予权限
server_name 支持多域名，用空格分隔

2. 主配置文件整合

编辑 /etc/nginx/nginx.conf，在 http {} 块内添加：

nginx 复制代码

include /etc/nginx/vhost/*.conf;  # 包含所有虚拟主机配置

验证配置语法：

bash 复制代码

nginx -t  # 显示 "syntax is ok" 表示无误

三、HTML 部署实战

1. 上传文件与权限设置

bash 复制代码

# 创建网站目录
mkdir -p /var/www/html/my_site

# 上传 HTML 文件（如 index.html）
scp -r ./dist/* root@服务器IP:/var/www/html/my_site/

# 设置权限（确保 Nginx 用户可读）
chown -R nginx:nginx /var/www/html/my_site
chmod -R 755 /var/www/html/my_site

2. 防火墙放行

bash 复制代码

# 开放 80 端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --reload

# 若使用 SELinux
setsebool -P httpd_read_user_content 1  # 允许访问用户目录

四、服务重启与验证

1. 重启 Nginx

bash 复制代码

# YUM 安装方式
systemctl restart nginx

# 源码安装方式
/usr/local/nginx/sbin/nginx -s reload

2. 访问测试

bash 复制代码

# 命令行验证
curl http://服务器IP

# 浏览器访问
打开 http://服务器IP 或 http://域名

预期结果：显示自定义的 HTML 页面内容

五、进阶优化配置

1. Gzip 压缩

在 nginx.conf 的 http {} 块内添加：

nginx 复制代码

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1k;

效果：减少 60%-80% 的传输体积

2. 错误页面定制

在虚拟主机配置中添加：

nginx 复制代码

error_page 404 /404.html;
location = /404.html {
    root /var/www/html/errors;
    internal;
}

六、常见问题排查

1. 403 Forbidden

检查目录权限：确保 nginx 用户有读取权限
确认 root 路径是否存在拼写错误

2. 端口占用

bash 复制代码

netstat -tulnp | grep :80  # 查看 80 端口占用进程
kill -9 <PID>  # 终止冲突进程

3. 静态资源加载失败

检查文件路径大小写（Linux 区分大小写）
确认文件权限是否为 644（chmod 644 *.css）

总结

通过以上步骤，您已完成从 Nginx 安装到 HTML 部署的全流程。推荐使用 YUM 安装快速上手，生产环境建议源码编译以启用高级功能。部署时务必注意文件权限与防火墙配置，进阶优化可显著提升访问速度与安全性。如需实现 HTTPS 支持，可参考 Let's Encrypt 免费证书配置方案。