前言

为了在你的前后端分离的Web项目上配置HTTPS，你需要在你的Ubuntu服务器上安装并配置一个反向代理服务器，通常使用Nginx或Apache，来处理HTTPS连接，并将请求转发到你的前端和后端应用。

这是ChatGPT告诉我的 最近在开发一个前后端分离项目 前端使用的vite 所以理所当然的搜索vite配置https 查了一圈没个正经 索性还是问问AI吧 这一问 才发现我陷入了思维误区了

所以这里记录一下

安装Nginx

sudo apt install nginx

ssl证书

因为我域名是在阿里买的 所以域名可以申请一个免费的ssl证书 这个证书CA是认的

也可以自己生成自签名的证书 不过自签名的证书CA不认 所以浏览器会提示不安全

有钱的大佬也可以直接买 这里不再赘述

不管买还是生成 最终得到的证书是 .crt后缀的证书 和 .key后缀的密钥

配置

创建配置文件

进入 /etc/nginx/sites-available 路径

可以看到有个 default 的配置文件 这是默认的配置文件 我们不管它

然后 touch redcraft 这里我创建了一个叫redcraft的配置文件

使用 vim redcraft 打开就可以编辑了

配置解析

这里我以我的域名和证书为例子

域名是 redcraft.cn

证书名称是 redcraft.cn.pem 和 redcraft.cn.key

证书存放在 /home/ubuntu/redmc/ssl 路径下

前端项目采用442端口 后端使用8888端口

并且将http 重定向到了 https

server {
    listen 80;
    server_name redcraft.cn www.redcraft.cn;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name redcraft.cn www.redcraft.cn;

    ssl_certificate /home/ubuntu/redmc/ssl/redcraft.cn.pem;
    ssl_certificate_key /home/ubuntu/redmc/ssl/redcraft.cn.key;

    location / {
        proxy_pass http://localhost:442; # 前端应用监听的端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /api {
        proxy_pass http://localhost:8888; # 后端应用监听的端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

启用

# 启用你的配置
sudo ln -s /etc/nginx/sites-available/redcraft /etc/nginx/sites-enabled/
# 检查配置文件是否正确
sudo nginx -t  
# 重启 nginx 服务
sudo systemctl restart nginx