Coding+COS+CDN+vue部署网站

文章目录

• 前言
• 一、静态网站是什么？
• 二、使用步骤
  • 1.创建存储桶
  • 2.vue打包
  • 3.开启COS上静态网站功能
  • 4.开启CDN，并配置安全规则
  • 5、测试验证
  • 6、可能存在问题
• 总结

---

前言

   近期在把品小美服务平台的三个管理后台迁移部署到腾讯云，在考虑是clb+cvm部署还是把打包好的vue文件制作成镜像放到容器中部署，发现了cos下有个静态网站的功能，看完文档后决定尝试一翻。

一、静态网站是什么？

       静态网站指包含静态内容（例如 HTML）或客户端脚本的网站，用户可以通过控制台对已绑定自定义域名的存储桶，配置静态网站。可以通过对象存储控制台，把一个存储桶设置为托管静态网站，并且通过访问存储桶的访问域名来访问静态网站。

二、使用步骤

1.创建存储桶

        为管理后台单独创建存储桶，设置好访问权限为公共读私有写，并开启版本控制。

 

 

2.vue打包

       我们使用了coding来做代码仓库及流水线，将打包好的vue文件推送到
    （1）上传最新代码到代码仓库；
    （2）创建构建计划
       配置好环境变量，包含cos的相关信息；根据项目实际编写适合自己的shell脚本来安装依赖和编译；最后上传到指定的cos存储桶：

3.开启COS上静态网站功能

4.开启CDN，并配置安全规则

     （1）配置cdn加速域名，设置回源地址，选择COS源，设置源站回源协议、源站地址，还可以配置好缓存过期时间及可提供带宽封顶值：
 

     （2）在域名解析中添加域名cname指向：
     （3）在CDN域名管理里，配置https证书跟访问控制，可选择配置referer白名单、IP黑名单、IP访问限频，提高安全性： 

5.测试验证

       vue项目服务可对外提供服务。

 

6.可能存在问题

        在实际应用中，还会遇到跨域问题的解决、如何实现代码打包上传后更新CDN节点问题，这些内容我们在后面去分析。

---

总结

        使用Coding+COS+CDN+vue，我们实现了管理平台页面免服务器化自动化部署，借用cos及cdn的安全访问控制，保障了页面内容安全及高可用流量并发请求的服务支撑。