记录网站由http改为https的历程

网站现状

网站前端为vue的架构，实现了一个价格测算的平台，用户需要登录后访问，网站的发布为nginx，采用前后端分离架构，后台为django，Django只负责解决路由和视图等基本功能，不涉及任何django逻辑的界面，后端的服务由uwsgi启动。

我采用的是阿里云服务器，ubuntu 2404，1c2g，跑一个普通的后台完全没有压力，今天看了下续费，5年只要980，简直不要太爽，对于流量小的网站来说非常的合适，有图为证

安装申请证书的包

之前对申请证书这个事尝试过，但是由于过程比较复杂，往往在某个环节就卡壳了，这次是借着大数据的能力，一次行跑完了整个流程，特此记录。

申请证书的过程在ubuntu上并不复杂，

sudo apt update && sudo apt upgrade -y // 更新系统包
sudo apt install certbot python3-certbot-nginx -y //安装 Certbot 和 Nginx 插件
certbot --version //查看是否安装成功

获取证书

这时需要注意一些系统的准备工作，

• 使用nginx部署且已经上线的应用；
• 域名需已经解析到当前服务器的IP地址；
  如果还在开发阶段，或者是未上线，用这个方法是行不通的，因为certbot的工作逻辑是到拿你申请的信息到网站上作比对，如果比对错误，比如这个域名指定的IP地址不是当前的地址，则会报错，申请失败。
• 检查nginx配置

nginx -v //检查nginx的配置
server {
listen 80;
server_name abc.example.com; # 替换为你的域名
root /path/to/your/web/root; # 替换为你的网站根目录
index index.html;
}配置里需要明确写需要申请的域名，如果申请的是主网站，则为 www.example.com，如果是子网站则为abc.example.com，大模型给我的示例写了两个，申请自然没成功，我就在这饶了半天。

• 申请证书

sudo certbot --nginx -d abc.example.com
如果nginx安装的位置是在 /etc/nginx/ 则应该就成功了，我的位置是在/usr/local/nginx则需要
sudo ln -sf /usr/local/nginx/sbin/nginx /usr/sbin/nginx
我是做了这个软连接，就成功了，如果不成功各位再尝试
另外如果不是默认的安装位置，申请的时候还需要带上–nginx-server-root参数
sudo certbot --nginx abc.example.com --nginx-server-root /usr/local/nginx/conf
我是用这个命令就搞定了

• 查看 nginx.conf 就可以看到已经被改为支持 https了

server {
listen 80;
server_name example.com www.example.com;
return 301 https://$host$request_uri; # 重定向 HTTP 到 HTTPS
}
server {
listen 443 ssl;
server_name example.com www.example.com;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
root /path/to/your/web/root;
index index.html;
}

证书自动续期

前面证书安装成功了，这个命令就是一行代码的事，及其轻松

sudo systemctl list-timers certbot.timer

显示这个信息应该就可以了

• 测试自动续期

sudo certbot renew --dry-run --nginx-server-root /usr/local/nginx/conf

这样应该是自动需求就通过了

跳坑

• nginx安装位置不对

certbot 支持的默认nginx安装位置为

• 阿里云开端口

阿里云服务器有安全组设置，需要在里面开通443端口才可以访问。

• 前端程序改地址

我的前端VUE程序是按照IP地址定位的，当改为https后，相当于https调用不安全的IP地址了，所以这个地方要改为新的 https的地址，后面要加上/ ,如我的配置
接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = https://abc.example.com/

• 后端增加跨域许可，我的后端为django，默认有cros的安全要求，增加进去

设置允许跨域请求的来源
CORS_ORIGIN_WHITELIST = [
‘http://localhost:9000’, # 允许来自 localhost:9000 的请求
‘http://127.0.0.1:9000’, # 可以同时指定 http 和 https 协议
‘https://abc.example.com’,
]