前后端分离案例--使用sls把前端页面放进cos桶里

原创

haimingli

发布于 2020-12-29 09:48:32

8340

发布于 2020-12-29 09:48:32

背景

前后端分离已成为互联网项目开发的业界标准使用方式。以Web应用为例子，核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。其中，前端资源通常由Web服务器进行解析，比如Nginx、Apache，后端资源由应用服务器进行解析，比如运行有Java应用的内网服务器。对于前端资源的解析，目前比较流行的方案是使用负载均衡加上Web服务器的配置，这种方案会产生较高成本，主要体现在运维成本高。需要运维Web服务器。

在这里，从节约成本的角度出发。可以考虑将前端资源解析方案从负载均衡加上Web服务器变更为只使用对象存储桶。

原理

使用Sls Website的原理可以简单总结为一句话，生成静态博客文件后再将其上传到cos桶里面。生成静态博客可以使用目前比较流行的方案比如Hexo、Hugo等等，接着使用Sls Website组件将网站文件上传到cos桶里面。这里Sls Website组件能够自动处理许多部署需求，比如绑定域名等等。

详细方案

以Hexo为例子，只需要两步

首先生成Hexo博客，博客的目录如下所示

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

然后在该目录下新建serverless.yml，文件内容大致长下面这样

# serverless.yml

component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件
name: hexodemo # (必填) 该 website 组件创建的实例名称
org: test # (可选) 用于记录组织信息，默认值为您的腾讯云账号 APPID
app: websiteApp # (可选) 该 website 应用名称
stage: dev # (可选) 用于区分环境信息，默认值是 dev

inputs:
  src:
    src: ./public # Upload static files generated by HEXO
    index: index.html
    # dist: ./dist
    # hook: npm run build
    # websitePath: ./
  region: ap-guangzhou
  bucketName: my-bucket
  protocol: https
完成的目录结构如下所示：

.
├── .serverless
└── hexo
    ├── public
    ├── ...
    ├── serverless.yml 
    ├── ...
    └── source
接着即可部署验证。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

hexo