关于nginx部署网站及申请ssl证书实记

901 字

5 分钟

关于nginx部署网站及申请ssl证书实记

2025-12-04

nginx

🎯 一、整体部署流程（Nginx + Vue/React SPA + Let’s Encrypt）#

步骤概览#

步骤	操作
1	构建前端项目，生成 `dist` 目录
2	将 `dist` 文件上传至服务器（如 `/var/www/afishblog`）
3	编写 Nginx 站点配置（仅 HTTP，无 SSL）
4	创建软链接启用站点：`sites-available → sites-enabled`
5	安装 Certbot 并申请 Let’s Encrypt 证书（自动配置 HTTPS）
6	验证 HTTPS 访问、前端路由刷新、自动跳转等
7	（可选）测试自动续期

📄 二、最终生效的 Nginx 配置（由 Certbot 自动生成 + 手动优化）#

文件路径：/etc/nginx/sites-available/afishblog
软链接：/etc/nginx/sites-enabled/afishblog → ../sites-available/afishblog

1
server {
2
    server_name afish.blog.xiaoyaocode.cn;
3

4
    root /var/www/afishblog;
5
    index index.html;
6

7
    # ✅ 支持前端 history 路由（关键！）
8
    location / {
9
        try_files $uri $uri/ /index.html;
10
    }
11

12
    # ✅ 静态资源缓存（提升性能）
13
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
14
        expires 1y;
15
        add_header Cache-Control "public, immutable";
16
    }
17

18
    # ✅ 安全：隐藏 Nginx 版本号
19
    server_tokens off;
20

21
    # --- 以下由 Certbot 自动管理 ---
22
    listen 443 ssl; # managed by Certbot
23
    ssl_certificate /etc/letsencrypt/live/afish.blog.xiaoyaocode.cn/fullchain.pem; # managed by Certbot
24
    ssl_certificate_key /etc/letsencrypt/live/afish.blog.xiaoyaocode.cn/privkey.pem; # managed by Certbot
25
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
26
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
27
}
28

29
# --- HTTP 自动跳转 HTTPS（由 Certbot 自动生成）---
30
server {
31
    if ($host = afish.blog.xiaoyaocode.cn) {
32
        return 301 https://$host$request_uri;
33
    } # managed by Certbot
34

35
    listen 80;
36
    server_name afish.blog.xiaoyaocode.cn;
37
    return 404; # managed by Certbot
38
}

💡 注意：带 # managed by Certbot 的部分不要手动修改，否则可能被覆盖。

⚠️ 三、遇到的问题与解决方案总结#

问题	原因	解决方案
`ssl_certificate: command not found`	在 shell 中误输入了 Nginx 配置语句	忽略，那是配置文件内容，不是命令
Nginx 启动失败：`no "ssl_certificate" is defined for listen ... ssl`	配置中写了 `listen 443 ssl;` 但未提供证书路径	先完全移除 SSL 配置，仅保留 80 端口 HTTP
Certbot 报错：`cannot load certificate ... No such file`	提前在配置中引用了不存在的证书文件	同上，让 Certbot 先申请证书，再自动填入路径
前端页面刷新 404	使用了 history 路由但 `try_files` 写成 `=404`	改为 `try_files $uri $uri/ /index.html;`
域名无法访问 / Certbot 验证失败	DNS 未解析或 80 端口未开放	检查 `ping 域名` + 云服务商安全组放行 80/443

🔧 四、关键部署细节与最佳实践#

1. 前端文件部署#

1
# 示例：将本地 dist 上传并部署
2
scp -r dist/* root@your_server:/var/www/afishblog/
3

4
# 设置权限（确保 Nginx 可读）
5
sudo chown -R www-data:www-data /var/www/afishblog
6
sudo chmod -R 755 /var/www/afishblog

2. 软链接创建（启用站点）#

1
sudo ln -s /etc/nginx/sites-available/afishblog /etc/nginx/sites-enabled/

✅ 检查：ls -l /etc/nginx/sites-enabled/

3. Certbot 安装（Ubuntu/Debian）#

1
sudo apt update
2
sudo apt install certbot python3-certbot-nginx -y

4. 证书申请（必须在纯 HTTP 下运行）#

1
sudo certbot --nginx -d afish.blog.xiaoyaocode.cn
2
# 选择：2 (Redirect HTTP → HTTPS)

5. 验证与重载#

1
sudo nginx -t && sudo nginx -s reload
2
curl -I https://afish.blog.xiaoyaocode.cn  # 应返回 200

6. 自动续期测试#

1
sudo certbot renew --dry-run

✅ 成功标志：无报错，显示模拟续期成功

7. 安全建议#

不要暴露 .git、node_modules 等目录（你的 root 指向 dist，天然安全）
启用 server_tokens off; 隐藏版本信息
定期更新系统和 Certbot

📦 五、目录结构参考#

1
/var/www/
2
└── afishblog/               # 前端静态文件根目录
3
    ├── index.html
4
    ├── assets/
5
    │   ├── app.xxxx.js
6
    │   └── style.xxxx.css
7
    └── favicon.ico
8

9
/etc/nginx/
10
├── sites-available/
11
│   └── afishblog            # 主配置文件（你编辑的地方）
12
└── sites-enabled/
13
    └── afishblog → ../sites-available/afishblog  # 软链接
14

15
/etc/letsencrypt/
16
└── live/
17
    └── afish.blog.xiaoyaocode.cn/
18
        ├── fullchain.pem    # 证书链
19
        ├── privkey.pem      # 私钥
20
        ├── cert.pem
21
        └── chain.pem

✅ 六、后续维护#

场景	操作
更新前端	替换 `/var/www/afishblog/` 下文件即可
添加新域名	重复 `certbot --nginx -d 新域名`
手动续期	`sudo certbot renew`（通常不需要）
查看证书信息	`sudo certbot certificates`