手把手教你给项目配 HTTPS（Nginx 实战教程，前端 + 后端）

优质文章学习记录

— 8 min read
手把手教你给项目配 HTTPS（Nginx 实战教程，前端 + 后端）

本博客是一篇记录性质的实操文章。
所以在本文章中你既能收获"为什么"，也会收获"怎么做"。

为你的项目配置配 HTTPS

在开始之前，我先带大家建立一个心智模型。
从而理解， 配置https的整体流程大致长什么样子：

浏览器 → 域名 → Nginx(443) →

  • 前端静态文件（Vue/Vite 打包后的 dist）
  • 后端 API（反向代理到 Go/Gin）

Nginx 官方对 HTTPS 的最基本要求就是：在 server 块里用 listen 443 ssl;，再指定 ssl_certificate 和 ssl_certificate_key。([nginx.org][1])

总体概念

我们现在要做的事情，其本质上只有 5 步：

  1. 域名解析到你的服务器
  2. 服务器开放 80 和 443 端口
  3. 申请一张证书
  4. Nginx 配置 443 + 证书
  5. 把 80 跳转到 443

这样以后用户访问：

  • http://你的域名 → 自动跳到 https://你的域名
  • Nginx 用证书和浏览器建立加密连接
  • 前端页面通过 HTTPS 打开
  • /api 请求由 Nginx 转发到 Gin

我的建议

对于新手而言，往往可以这样处理：

  • Nginx 负责 HTTPS
  • 后端项目 继续跑 HTTP 内部端口，例如 127.0.0.1:8080
  • Vue 前端走同域名 /api
  • 不要让 后端项目 自己配证书

原因很简单：证书只维护在 Nginx，既可以只配置一处，也最容易排错。

前期准备：

第 1 步：确认你的域名已经指向这台服务器

注：博主用的云服务器是火山云

你要确认：

  • 你的域名 A 记录已经解析到服务器公网 IP
  • 以后访问的网站，就是这个域名，不是 IP
1、获取你的公网IP：

在火山引擎控制台 → 云服务器 ECS → 实例 → 点进你的服务器实例
如：

在这里插入图片描述
2、解析

接下来的操作，是需要你拥有一个自己的域名，并认证过。
在火山引擎控制台 → 域名服务 → 点击解析
大概会出现这样一个界面：

在这里插入图片描述


然后点击添加记录即可。（作用：使这个域名指向你的公网IP）

提醒：
因为 HTTPS 证书是给域名用的，不是给裸 IP 用的。
如果你用浏览器直接访问 https://你的公网IP，大概率会证书不匹配。

第 2 步：开放 80 和 443 端口

你要确保：

  • 火山云安全组放行 80/tcp
  • 火山云安全组放行 443/tcp
  • 服务器本机防火墙没有拦截

第 3 步：先确认当前 Nginx 和 后端项目 是怎么跑的

你现在先自己核对这几个点：

前端

Vue/Vite 是否已经打包过，例如：

npm run build

然后 Nginx 是否已经在提供 dist/ 目录。

后端

Gin 是否监听一个端口，比如：

r.Run("127.0.0.1:8080")
API 请求地址

前端有没有写死这种地址：

http://你的域名/api

或者：

http://你的IP:8080

如果有，后面必须改。
因为页面走 HTTPS 时，请求 HTTP API 会被浏览器拦截。

第 4 步：申请证书

如果你用的也是火山云（申请免费证书）如果你是其他服务器的，这个仍然有借鉴价值。
（一般你买个域名，就会直接送证书）

具体落地方式

接下来，假设你已经拿到证书了。

你现在要做的是：

  1. 从火山引擎下载证书
  2. 上传到服务器
  3. 手动配置 Nginx 的 443
  4. 让 HTTP 跳转到 HTTPS

第 5 步：先把 Nginx 的 HTTP 站点跑通

先确保你现在这个配置能正常访问：

http://metaassist.cn http://www.metaassist.cn

一个典型的 HTTP 配置长这样：

server { listen 80; server_name metaassist.cn www.metaassist.cn; root /www/your-project/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

说明：

  • root 指向 Vue/Vite 打包后的 dist
  • try_files ... /index.html 是给 Vue history 路由兜底
  • /api/ 反向代理到 Gin

这一步的目标不是 HTTPS，而是先确认：

  • 域名解析正常
  • 80 端口已放行
  • Nginx 站点能正常打开

第 6 步：从火山引擎下载证书并上传到服务器

1. 在火山引擎证书中心下载证书

进入证书管理页，找到你的证书

下载时优先选择： Nginx

在这里插入图片描述

然后可以解压成 PEM / KEY 格式：

在这里插入图片描述

通常你最终会拿到两类文件：

  • 证书文件：.pem 或 .crt
  • 私钥文件：.key
2. 上传到服务器

建议把证书放到类似目录：

/etc/nginx/ssl/

例如：

/etc/nginx/ssl/metaassist.cn.pem /etc/nginx/ssl/metaassist.cn.key

如果目录不存在，可以先创建：

sudomkdir-p /etc/nginx/ssl

然后把证书和私钥上传进去。

第 7 步：手动配置 Nginx 的 HTTPS

可以把 Nginx 配置改成这样：

server { listen 80; server_name metaassist.cn www.metaassist.cn; return 301 https://$host$request_uri; } server { listen 443 ssl; server_name metaassist.cn www.metaassist.cn; ssl_certificate /etc/nginx/ssl/metaassist.cn.pem; ssl_certificate_key /etc/nginx/ssl/metaassist.cn.key; root /www/your-project/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; 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 https; } }

说明：

  • 第一个 server 负责把 HTTP 自动跳转到 HTTPS
  • 第二个 server 负责真正提供 HTTPS 服务
  • ssl_certificate 指向你的证书文件
  • ssl_certificate_key 指向你的私钥文件

第 8 步：检查配置并重载 Nginx

每次改完配置后，都先检查语法：

sudo nginx -t

如果输出类似：

syntax is ok test is successful

再执行：

sudo systemctl reload nginx

如果你系统里没有 systemctl，也可能需要：

sudoservice nginx reload

需要避免的坑

1. 证书文件路径写错

ssl_certificate 和 ssl_certificate_key 指向的路径必须真实存在。

2. 文件权限不对

Nginx 进程需要有权限读取证书和私钥。

3. 443 端口没放行

即使 Nginx 配好了，如果火山引擎安全组或系统防火墙没放 443，也无法访问 HTTPS。

4. 域名没解析好

如果 metaassist.cn 没正确解析到你的服务器公网 IP，HTTPS 也不会正常工作。

5. Vue history 路由没配 try_files

这样刷新页面时可能会返回 404。

回顾

第一轮

  1. 确认域名已经解析到服务器
  2. 确认 80 和 443 已放行
  3. 确认 http://metaassist.cn 可以访问
  4. 确认证书已经从火山引擎下载下来
  5. 确认证书已经上传到服务器

第二轮

  1. 修改 Nginx 配置
  2. 配置 ssl_certificate 和 ssl_certificate_key
  3. 执行 sudo nginx -t
  4. 执行 sudo systemctl reload nginx

第三轮

  1. 浏览器测试 https://metaassist.cn
  2. 检查前端 /api 请求
  3. 排查是否还有 Mixed Content

记录：

/opt/personal_assistant/certs/metaassist.cn.pem /opt/personal_assistant/certs/metaassist.cn.key

Read more

前端微前端：大型应用的模块化解决方案

前端微前端：大型应用的模块化解决方案 毒舌时刻 前端微前端？这不是过度设计吗？ "我的应用不大，不需要微前端"——结果应用越来越大，维护困难， "微前端太复杂了，不如一个大单体"——结果团队协作困难，部署冲突， "我用iframe就够了"——结果性能差，用户体验差。 醒醒吧，微前端不是银弹，但对于大型应用来说，它是一个有效的解决方案！ 为什么你需要这个？ * 团队协作：不同团队可以独立开发和部署 * 技术栈灵活：不同微前端可以使用不同的技术栈 * 独立部署：单个微前端可以独立部署，不影响其他部分 * 可扩展性：可以轻松添加新的微前端 反面教材 <!-- 反面教材：使用iframe实现微前端 --> <!DOCTYPE html> <html>

Hunyuan-MT-7B-WEBUI性能优化，GPU显存占用更低

Hunyuan-MT-7B-WEBUI性能优化，GPU显存占用更低 在部署大语言模型时，显存瓶颈往往是横亘在用户面前的第一道墙。尤其对翻译这类需要长上下文、高精度解码的任务，70亿参数的模型常被默认划入“需A100起步”的高门槛阵营。但现实需求却很朴素：高校实验室只有一张A10，地方政府云平台仅配了24GB显存的V100，中小企业测试环境甚至只有RTX 4090——它们同样需要高质量的民汉互译能力。 Hunyuan-MT-7B-WEBUI 正是为这类真实约束而生的工程答案。它不是简单地把模型“塞进”网页界面，而是在模型加载、推理调度、内存管理三个层面做了系统性瘦身。实测表明：在保持WMT25与Flores200评测SOTA质量的前提下，其GPU显存峰值占用比标准HuggingFace加载方式降低38%~46%，单卡A10（24GB）可稳定承载并发3路实时翻译请求，且首字延迟控制在1.2秒内。本文将拆解这套轻量化落地方案的技术细节，不讲理论推导，只说你部署时真正能用上的优化点。 1. 显存为何居高不下？从加载到推理的三重开销 很多用户反馈：“明明模型权重才13GB，为什么加载后
零基础快速入门前端DOM 操作核心知识与实战解析（完整汇总版）(可用于备赛蓝桥杯Web应用开发)

零基础快速入门前端DOM 操作核心知识与实战解析（完整汇总版）(可用于备赛蓝桥杯Web应用开发)

DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 文档的桥梁，它将网页转换为一棵 “树”，每个 HTML 标签、属性、文本都是树上的节点。掌握 DOM 操作，就能动态改变网页内容、样式和交互。本文结合实战代码，从基础到进阶系统梳理 DOM 核心知识。 一、DOM 元素获取：找到要操作的 “节点” 操作 DOM 的第一步是 “找到元素”，常用方法如下： 方法 描述 示例 querySelector() 通过 CSS 选择器获取单个元素 document.querySelector(".div1") getElementById() 通过

前端Canvas：让你的网站更具视觉冲击力

前端Canvas：让你的网站更具视觉冲击力 毒舌时刻 前端Canvas？这不是游戏开发才用的吗？ "Canvas性能差，我不用"——结果错过了丰富的视觉效果， "Canvas太复杂了，我学不会"——结果只能用静态图片， "我用CSS就够了，要Canvas干嘛"——结果无法实现复杂的动画效果。 醒醒吧，Canvas不是游戏开发的专利，前端也可以用它来创建丰富的视觉效果！ 为什么你需要这个？ * 丰富的视觉效果：创建动态图形、动画和游戏 * 高性能：直接操作像素，性能优异 * 交互性：支持鼠标、触摸等交互 * 数据可视化：绘制图表、仪表盘等 * 跨平台：在所有现代浏览器中运行 反面教材 // 反面教材：简单的Canvas绘制 function drawCircle() { const canvas = document.getElementById('canvas'