网站域名配置开发记录

项目概述

本文档记录了为 WaitingToDo 项目配置域名 waitingtodo.cn 的完整过程，包括前端、后端、存储服务和反向代理的配置。

项目信息：

  • 项目名称：WaitingToDo
  • 域名：waitingtodo.cn
  • 服务器IP：101.34.246.32
  • 项目类型：前后端分离的 Web 应用

技术架构

1
2
3
4
5
6
7
8
用户浏览器
    ↓ HTTPS (443)
Nginx 反向代理
    ↓
┌─────────────────┬─────────────────┬─────────────────┐
│   Vue.js 前端   │   Go API 后端    │  MinIO 存储服务 │
│   (端口: 7070)  │  (端口: 8080)    │  (端口: 9000)   │
└─────────────────┴─────────────────┴─────────────────┘

技术栈：

  • 前端: Vue.js + Vite
  • 后端: Go + Gin 框架
  • 存储: MinIO 对象存储
  • 反向代理: Nginx
  • SSL: Let’s Encrypt 证书

域名配置流程

1. 域名申请与 DNS 配置

1.1 域名注册

  • 在域名注册商处注册 waitingtodo.cn
  • 配置域名解析，将 A 记录指向服务器 IP 101.34.246.32

1.2 DNS 记录配置

1
2
3
类型    主机记录    记录值
A       @          101.34.246.32
A       www        101.34.246.32

2. SSL 证书申请与配置

2.1 使用 Certbot 申请免费证书

1
2
3
4
5
# 安装 Certbot
sudo yum install certbot python3-certbot-nginx

# 申请证书
sudo certbot --nginx -d waitingtodo.cn -d www.waitingtodo.cn

2.2 证书自动续期

1
2
3
4
# 添加定时任务
sudo crontab -e
# 添加以下行
0 12 * * * /usr/bin/certbot renew --quiet

2.3 申请腾讯云的免费 SSL 证书

  1. 登录腾讯云控制台，进入 SSL 证书服务
  2. 申请免费 DV 证书，填写域名 waitingtodo.cn
  3. 下载证书文件，包含 .pem 和 .key 文件
  4. 将证书文件上传到服务器 /etc/nginx/ssl/ 目录 或/etc/ssl/certs/目录
  5. 修改 Nginx 配置，使用腾讯云证书，指明证书路径

3. Nginx 反向代理配置

3.1 主配置文件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# /etc/nginx/nginx.conf
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    # 基础配置
    include /etc/nginx/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"';
    
    # 包含站点配置
    include /etc/nginx/conf.d/*.conf;
}

3.2 HTTPS 服务器配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# /etc/nginx/conf.d/waitingtodo.conf
server {
    listen 443 ssl http2;
    server_name waitingtodo.cn www.waitingtodo.cn;
    
    # SSL 证书配置
    ssl_certificate /etc/nginx/ssl/waitingtodo.cn.pem;
    ssl_certificate_key /etc/nginx/ssl/waitingtodo.cn.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    
    # 安全头部
    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    
    # 前端静态文件服务
    location / {
        root /var/www/waitingtodo/dist;
        try_files $uri $uri/ /index.html;
        index index.html;
    }
    
    # API 服务代理
    location /api/ {
        proxy_pass http://127.0.0.1:7070;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 超时设置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
    
    # MinIO 图片服务代理
    location /images/ {
        proxy_pass http://101.34.246.32:9000/images/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # MinIO 特殊头部处理
        proxy_set_header X-Amz-Content-Sha256 $http_x_amz_content_sha256;
        proxy_set_header X-Amz-Date $http_x_amz_date;
        proxy_set_header Authorization $http_authorization;
        
        # 缓存设置
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
    
    # MinIO 文件服务代理
    location /files/ {
        proxy_pass http://101.34.246.32:9000/files/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 文件下载相关头部
        add_header Content-Disposition 'attachment';
        add_header X-Content-Type-Options nosniff;
    }
    
    # 错误页面
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
}

3.3 HTTP 到 HTTPS 重定向

1
2
3
4
5
server {
    listen 80;
    server_name waitingtodo.cn www.waitingtodo.cn;
    return 301 https://$server_name$request_uri;
}

4. 前端配置

4.1 环境变量配置

开发环境 - front/vue/.env.development:

1
2
3
# 开发环境直接访问 MinIO
VITE_API_BASE_URL=http://localhost:7070/api
VITE_PIC_BASE_URL=http://101.34.246.32:9000

生产环境 - front/vue/.env.production:

1
2
3
# 生产环境通过域名访问
VITE_API_BASE_URL=https://waitingtodo.cn/api
VITE_PIC_BASE_URL=https://waitingtodo.cn

遇到的问题及解决方案

问题1: 配置域名后 MinIO 存储服务无法访问

现象:

  • 配置域名后，图片等静态资源无法正常加载
  • 浏览器控制台出现跨域错误
  • 图片链接返回 403 或 404 错误

原因分析:

  1. 前端直接访问 MinIO 服务会遇到跨域问题
  2. HTTPS 页面无法加载 HTTP 资源（混合内容问题）
  3. MinIO 服务没有配置正确的 CORS 策略
  4. 防火墙可能阻止了对 MinIO 端口的直接访问

解决方案:
通过 Nginx 反向代理统一处理所有请求

1
2
3
4
5
6
7
8
# 在 Nginx 配置中添加 MinIO 代理
location /images/ {
    proxy_pass http://127.0.0.1:9000/images/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

优势:

  • 解决跨域问题
  • 统一 HTTPS 访问
  • 隐藏内部服务架构
  • 便于缓存和安全控制

问题2: 图片路径中出现 “undefined”

现象:
访问路径变成 waitingtodo.cn/undefined/images/xxx

原因分析:
生产环境中 VITE_PIC_BASE_URL 环境变量被注释或未正确设置，导致前端获取到 undefined

解决方案:

  1. 检查 .env.production 文件
  2. 确保环境变量正确设置
  3. 重新构建前端项目
1
2
# .env.production
VITE_PIC_BASE_URL=https://waitingtodo.cn

问题3: SSL 证书配置问题

现象:

  • 浏览器显示”不安全”警告
  • HTTPS 访问失败

解决方案:

  1. 确保证书文件路径正确
  2. 检查证书是否过期
  3. 验证域名是否匹配
1
2
3
4
5
# 检查证书有效期
openssl x509 -in /etc/nginx/ssl/waitingtodo.cn.pem -text -noout

# 测试 SSL 配置
nginx -t

问题4: API 请求 404 错误

现象:
前端 API 请求返回 404

原因:
Nginx 代理配置中路径匹配问题

解决方案:
确保 API 路径正确配置

1
2
3
4
5
6
# 正确的 API 代理配置
location /api/ {
    proxy_pass http://127.0.0.1:7070/;  # 注意末尾的斜杠
    # 或者
    proxy_pass http://127.0.0.1:7070/api/;
}

监控与维护

1. 日志监控

1
2
3
4
5
6
7
8
# Nginx 访问日志
tail -f /var/log/nginx/access.log

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

# 应用日志
journalctl -u waitingtodo-api -f

2. 健康检查

1
2
3
4
5
6
7
# 检查服务状态
sudo systemctl status nginx
sudo systemctl status waitingtodo-api

# 检查端口监听
netstat -tlnp | grep :443
netstat -tlnp | grep :7070

3. 证书续期监控

1
2
3
4
5
# 检查证书剩余有效期
certbot certificates

# 手动续期测试
sudo certbot renew --dry-run

安全配置

1. 防火墙设置

1
2
3
4
5
# 只开放必要端口
sudo ufw allow 22    # SSH
sudo ufw allow 80    # HTTP
sudo ufw allow 443   # HTTPS
sudo ufw enable

2. Nginx 安全头部

1
2
3
4
5
6
# 安全头部配置
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header Referrer-Policy "strict-origin-when-cross-origin";

3. 限流配置

1
2
3
4
5
6
7
8
9
10
11
# 限制请求频率
http {
    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
    
    server {
        location /api/ {
            limit_req zone=api burst=20 nodelay;
            proxy_pass http://127.0.0.1:7070;
        }
    }
}

总结

通过本次域名配置实践，我们成功实现了：

  1. 统一的访问入口: 所有服务通过 waitingtodo.cn 域名访问
  2. 安全的 HTTPS 连接: 使用 SSL 证书加密传输
  3. 高效的反向代理: Nginx 统一处理请求分发
  4. 灵活的环境配置: 开发和生产环境分离
  5. 完善的监控体系: 日志、健康检查、性能监控

关键经验总结

  1. 架构设计: 采用反向代理模式，统一入口，便于管理和扩展
  2. 安全优先: HTTPS、安全头部、防火墙、限流等多层防护
  3. 环境分离: 开发、测试、生产环境配置分离，避免混乱
  4. 监控完善: 日志、监控、告警体系，及时发现和解决问题
  5. 文档记录: 详细记录配置过程，便于后续维护和问题排查

后续优化方向

  1. CDN 接入: 提升静态资源加载速度
  2. 负载均衡: 支持多实例部署
  3. 自动化运维: CI/CD 流水线，自动化测试和部署
  4. 性能监控: APM 工具，深入了解应用性能

通过这次完整的域名配置实践，不仅解决了当前的技术需求，也为项目的后续发展奠定了坚实的基础。