【Web】腾讯云 COS 静态网站部署与自定义域名 HTTPS 全流程

什么是静态网站？

静态网站是指所有页面内容都以静态文件（如 HTML、CSS、JavaScript、图片等）形式存在，用户访问时服务器直接返回这些文件，无需后端动态渲染。常见的前端框架（如 Vue、React）打包后的项目就是静态网站，非常适合部署在对象存储（如腾讯云 COS）等静态托管平台。

腾讯云 COS 静态网站部署与自定义域名 HTTPS 全流程

1. 本地项目构建

在项目根目录执行 npm run build 或 yarn build，生成 dist 或 build 文件夹，里面包含所有静态资源。

2. 创建 COS 存储桶

登录腾讯云控制台，进入对象存储（COS）服务。
创建存储桶，建议选择靠近目标用户的地域。
访问权限建议选“公有读私有写”或“公有读”，便于外部访问。

3. 上传静态资源

进入存储桶详情页，选择“文件列表”。
上传 dist 文件夹内部所有内容（不是整个 dist 文件夹）到存储桶根目录。
保持目录结构一致，避免入口文件（如 index.html）嵌套在子目录。

4. 配置静态网站托管

存储桶详情页左侧“基础配置”→“静态网站”→开启。
索引文档填写 index.html，错误文档可填写 404.html。
保存设置后，COS 会分配一个默认访问网址。

5. 绑定自定义域名

存储桶左侧“域名管理”→“绑定自定义域名”，输入你的域名（如 www.example.com）。
系统生成 CNAME 地址（如 xxx.cos-website.ap-guangzhou.myqcloud.com）。
到域名服务商处设置 CNAME 解析，指向该地址。
等待 DNS 解析生效。

6. 配置 HTTPS 证书

“域名管理”页面，找到已绑定域名，点击“证书管理”或“配置证书”。
可申请腾讯云免费 SSL 证书或上传自有证书（需 .pem 和 .key 文件）。
配置完成后，COS 会自动为自定义域名启用 HTTPS。

7. 验证访问效果

通过 https://你的域名 访问，确认页面可正常渲染且有安全锁标志。
若出现下载文件而非网页渲染，检查：

静态网站配置（索引文档、MIME 类型）
上传路径是否正确（必须是 dist 内部内容）
清除浏览器缓存

8. 常见问题排查

Access Denied：检查存储桶权限、静态网站配置。
CDN 缓存问题：如用 CDN，尝试刷新缓存。
页面打不开或样式错乱：检查资源路径、文件上传完整性。

总结流程要点

本地构建生成静态资源
创建 COS 存储桶并设置合适权限
上传 dist 内所有内容到存储桶根目录
开启静态网站托管并设置索引/错误文档
绑定自定义域名并配置 CNAME 解析
配置 HTTPS 证书，启用安全访问
验证访问效果，排查常见问题

通过以上步骤，即可实现前端项目的高效、安全、专业的静态网站部署与访问。