前端页面部署到服务器完整教程（Nginx + SSL）
Administrator 0 评论 6 阅读

前端页面部署到服务器完整教程（Nginx + SSL）

_

一、准备工作

1.1 服务器准备

  • 一台云服务器（阿里云、腾讯云等）

  • 服务器操作系统：CentOS/Ubuntu/OpenCloudOS 等

  • 已拥有域名并完成 DNS 解析

1.2 连接服务器

# 使用 SSH 连接服务器
ssh root@你的服务器IP

二、安装 Nginx

2.1 CentOS/RHEL/OpenCloudOS 系统

# 安装 EPEL 源
yum install -y epel-release

# 安装 Nginx
yum install -y nginx

2.2 Ubuntu/Debian 系统

# 更新软件包
apt update

# 安装 Nginx
apt install -y nginx

2.3 验证安装

# 查看 Nginx 版本
nginx -v

# 启动 Nginx
systemctl start nginx

# 设置开机自启
systemctl enable nginx

# 查看运行状态
systemctl status nginx

三、上传前端文件

3.1 在服务器上创建项目目录

# 创建网站根目录
mkdir -p /var/www/sites/你的域名

# 设置目录权限
chmod -755 /var/www/sites/你的域名

3.2 上传文件到服务器

方法一：使用 scp 命令上传

# 在本地电脑执行（将本地文件上传到服务器）
scp -r 本地项目目录/* root@服务器IP:/var/www/sites/你的域名/

方法二：使用 FTP 工具上传

  • 使用 FileZilla、WinSCP 等工具

  • 连接服务器后直接拖拽文件上传

四、配置 Nginx（HTTP 访问）

4.1 创建站点配置文件

# 创建配置文件目录
mkdir -p /etc/nginx/conf.d

# 编辑配置文件
vi /etc/nginx/conf.d/你的域名.conf

4.2 完整 Nginx 配置（含详细中文注释）

# HTTP 服务器配置（80端口）
server {
    # 监听 80 端口（HTTP 标准端口）
    listen 80;
    
    # 服务器域名（填写你的实际域名）
    server_name h5.onefind.club;
    
    # 网站根目录（前端文件存放路径）
    root /var/www/sites/h5.onefind.club;
    
    # 默认首页文件（按优先级查找）
    index index.html index.htm;

    # 字符集设置
    charset utf-8;

    # 访问日志（记录访问信息）
    access_log /var/log/nginx/h5.onefind.club.access.log;
    
    # 错误日志（记录错误信息）
    error_log /var/log/nginx/h5.onefind.club.error.log;

    # 核心路由配置（处理所有请求）
    location / {
        # 尝试按顺序查找文件：请求的URI -> URI作为目录 -> index.html
        # SPA 单页应用需要最后回退到 index.html
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置（JS、CSS、图片等）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        # 缓存有效期 30 天
        expires 30d;
        
        # 设置缓存控制头（public 表示可以被 CDN 缓存）
        add_header Cache-Control "public, immutable";
        
        # 访问日志关闭（静态资源不记录日志，节省磁盘）
        access_log off;
    }

    # 禁止访问隐藏文件（如 .git、.env 等敏感文件）
    location ~ /\. {
        # 拒绝所有访问请求
        deny all;
    }

    # 自定义错误页面（可选）
    error_page 404 /index.html;
}

# HTTPS 服务器配置（443端口）
server {
    # 监听 443 端口（HTTPS 标准端口）
    listen 443 ssl;
    
    # 启用 HTTP/2 协议（提升性能）
    http2 on;
    
    # 服务器域名
    server_name h5.onefind.club;
    
    # 网站根目录
    root /var/www/sites/h5.onefind.club;
    
    # 默认首页文件
    index index.html;
    
    # 字符集
    charset utf-8;

    # === SSL 证书配置 ===
    # SSL 证书文件路径（.crt 或 .pem 格式）
    ssl_certificate /etc/nginx/ssl/h5.onefind.club/h5.onefind.club_bundle.crt;
    
    # SSL 私钥文件路径（.key 格式）
    ssl_certificate_key /etc/nginx/ssl/h5.onefind.club/h5.onefind.club.key;

    # === SSL 协议和加密套件配置 ===
    # 允许的 SSL/TLS 协议版本（禁用不安全的旧版本）
    ssl_protocols TLSv1.2 TLSv1.3;
    
    # 加密套件（定义加密算法优先级）
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-CHACHA20-POLY1305;
    
    # 优先使用服务器的加密套件（而不是客户端的）
    ssl_prefer_server_ciphers off;

    # === SSL 会话缓存配置 ===
    # SSL 会话缓存类型和大小（10MB 可以存储约 40000 个会话）
    ssl_session_cache shared:SSL:10m;
    
    # SSL 会话超时时间（1 天）
    ssl_session_timeout 1d;

    # === SSL 安全优化配置 ===
    # 启用 SSL Session Ticket（提高性能）
    ssl_session_tickets off;

    # OCSP Stapling（在线证书状态轮询，提高 HTTPS 性能）
    ssl_stapling on;
    ssl_stapling_verify on;

    # === 安全响应头配置 ===
    # HSTS（强制使用 HTTPS，有效期 1 年，包含子域名）
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    
    # 防止点击劫持攻击
    add_header X-Frame-Options "SAMEORIGIN" always;
    
    # 防止 MIME 类型嗅探
    add_header X-Content-Type-Options "nosniff" always;
    
    # XSS 防护
    add_header X-XSS-Protection "1; mode=block" always;

    # === 日志配置 ===
    access_log /var/log/nginx/h5.onefind.club.ssl.access.log;
    error_log /var/log/nginx/h5.onefind.club.ssl.error.log;

    # === 路由配置 ===
    location / {
        # SPA 单页应用路由回退
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    # 禁止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

# HTTP 到 HTTPS 强制跳转
server {
    listen 80;
    server_name h5.onefind.club;
    
    # 301 永久重定向到 HTTPS
    return 301 https://$server_name$request_uri;
}

4.3 测试并重载配置

# 测试配置文件语法是否正确
nginx -t

# 如果显示 "syntax is ok" 和 "test is successful"，则重载配置
nginx -s reload

# 或者使用 systemctl
systemctl reload nginx

五、安装 SSL 证书

5.1 方法一：Let's Encrypt 免费证书（推荐）

# 安装 Certbot
# CentOS/RHEL
yum install -y certbot python3-certbot-nginx

# Ubuntu/Debian
apt install -y certbot python3-certbot-nginx

# 自动获取证书并配置 Nginx
certbot --nginx -d h5.onefind.club

# 设置自动续期
certbot renew --dry-run

5.2 方法二：使用已有证书文件

5.2.1 创建证书目录

# 创建 SSL 证书存放目录
mkdir -p /etc/nginx/ssl/你的域名

5.2.2 上传证书文件

将以下文件上传到 /etc/nginx/ssl/你的域名/ 目录：

  • 证书文件：.crt 或 .pem 格式

  • 私钥文件：.key 格式

5.2.3 验证证书和私钥是否匹配

# 检查证书的 MD5 值
openssl x509 -noout -modulus -in /etc/nginx/ssl/你的域名/证书文件.crt | openssl md5

# 检查私钥的 MD5 值
openssl rsa -noout -modulus -in /etc/nginx/ssl/你的域名/私钥文件.key | openssl md5

如果两个 MD5 值相同，说明证书和私钥匹配。

六、防火墙配置

6.1 开放必要端口

firewall-cmd（CentOS 7+）

# 开放 HTTP（80 端口）
firewall-cmd --permanent --add-service=http

# 开放 HTTPS（443 端口）
firewall-cmd --permanent --add-service=https

# 重载防火墙规则
firewall-cmd --reload

# 查看已开放的端口
firewall-cmd --list-all

iptables（旧系统）

# 开放 80 和 443 端口
iptables -I INPUT -p tcp --dport 80 -j ACCEPT
iptables -I INPUT -p tcp --dport 443 -j ACCEPT

# 保存规则
service iptables save

6.2 云服务器安全组配置

在云服务器控制台配置安全组，开放入站规则：

  • 端口：80、协议：TCP

  • 端口：443、协议：TCP

七、验证部署

7.1 检查 Nginx 状态

# 查看 Nginx 运行状态
systemctl status nginx

# 查看 Nginx 监听端口
netstat -tlnp | grep nginx
# 或
ss -tlnp | grep nginx

7.2 测试 HTTP/HTTPS 访问

# 测试 HTTP 访问
curl -I http://你的域名

# 测试 HTTPS 访问
curl -I https://你的域名

# 查看 SSL 证书详情
curl -vI https://你的域名 2>&1 | grep -i ssl

7.3 浏览器访问

在浏览器打开：https://你的域名

检查以下内容：

  • ✅ 页面正常显示

  • ✅ 地址栏显示 🔒 锁头图标

  • ✅ 点击锁头查看证书信息

八、常用管理命令

8.1 Nginx 管理命令

# 启动 Nginx
systemctl start nginx

# 停止 Nginx
systemctl stop nginx

# 重启 Nginx
systemctl restart nginx

# 重载配置（不中断服务）
systemctl reload nginx

# 查看状态
systemctl status nginx

8.2 查看日志

# 查看 Nginx 错误日志
tail -f /var/log/nginx/error.log

# 查看站点访问日志
tail -f /var/log/nginx/你的域名.access.log

# 查看 SSL 错误日志
tail -f /var/log/nginx/你的域名.ssl.error.log

8.3 证书续期（Let's Encrypt）

# 手动续期
certbot renew

# 测试续期
certbot renew --dry-run

九、常见问题排查

9.1 403 Forbidden

# 检查文件权限
chmod -755 /var/www/sites/你的域名
chmod -644 /var/www/sites/你的域名/*

9.2 502 Bad Gateway

# 检查 Nginx 是否运行
systemctl status nginx

# 查看错误日志
tail -f /var/log/nginx/error.log

9.3 SSL 证书错误

# 检查证书文件路径
ls -la /etc/nginx/ssl/你的域名/

# 验证证书和私钥是否匹配
# （见上文 5.2.3）

十、部署检查清单

  • Nginx 已安装并运行

  • 前端文件已上传到服务器

  • Nginx 配置文件已创建

  • 配置文件语法检查通过（nginx -t）

  • 防火墙端口已开放（80、443）

  • 域名 DNS 已解析到服务器 IP

  • SSL 证书已安装

  • HTTP 访问正常

  • HTTPS 访问正常

  • 浏览器访问测试通过

许可协议
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。
微信网页授权获取 Code 完整教程 2026-01-27
TypeScript 中的接口继承（extends） 2026-01-26

评论区