hexo静态网站部署到腾讯云cos - 2

开启cos静态网站功能

将网站文件上传到 COS 还不够，需要开启 COS 的静态网站功能，打开存储桶 -> 基础配置 -> 静态网站，按照下图所示进行配置：

这时就可以通过图中的访问节点提供的域名来访问网站了，当然也可以绑定自定义域名，前提是域名已经备案。

cdn加速

创建域名

如果域名有备案的话，同时可以使用腾讯云 CDN 加速 COS 静态网站，配置十分简单，在 CDN 页面中创建一个域名，按下图所示进行配置：

配置缓存

缓存配置十分重要，由于站点是静态站点，网站的内容变化比较少，为了降低 CDN 的回源请求，一定要配置节点缓存策略，可以参考我的配置如下，其中浏览器缓存可以按需配置：

注意：这里不用担心节点缓存时间配置的过长会导致页面无法更新，后面我会讲如何配置缓存的自动刷新。

关于 CDN 配置的更多细节就不讲了，都很简单，一看就懂。

cdn节点缓存自动刷新

官方方案

由于上一步中配置了 CDN 节点的缓存策略，请求只要能够命中缓存，就不会进行回源请求了，这会导致我们的页面更新不能及时的展现给用户，因此需要考虑如何进行 CDN 节点的缓存自动刷新。

腾讯云官方给我们提供了一个解决方案，可以在 COS 存储桶的函数计算 ->CDN 缓存刷新函数中配置一个函数，可参考下图所示配置：

但这个方案存在一个问题，由于我们的静态网站有默认索引页面 index.html，而官方提供的这个函数只会刷新对应的文件的 URL，而不会刷新索引 URL，例如 blog.boringhex.top/index.html 这个文件，通常我们的请求是 blog.boringhex.top/，因此官方的方案针对于…

优化方案

可以通过简单修改官方的函数来解决这个问题，点击刚刚创建的 CDN缓存刷新函数列表中的函数名称，可以跳转的函数的编辑页面：

将 index.js 文件内容替换为下面的代码，最后点击右上角的 “部署” 按钮即可：

'use strict'

const CosSdk = require('cos-nodejs-sdk-v5')
const CdnSdk = require('./common/CdnSdk')
const CdnRefreshTask = require('./common/CdnRefreshTask')
const {
  getParams,
  getObjectUrl,
  logger,
  getLogSummary
} = require('./common/utils')

exports.main_handler = async (event, context, callback) => {
  /**
   * parse param from event and process.env
   */
  const { objects, cdnHosts, secretId, secretKey, token } = getParams(event)

  logger({
    title: 'param is parsed success, param as follow: ',
    data: { objects, cdnHosts, event }
  })
  /**
   * init cos instance
   */
  if (!secretId || !secretKey || !token) {
    throw new Error(`secretId, secretKey or token is missing`)
  }

  const cdnSdkInstance = new CdnSdk({ secretId, secretKey, token })
  const cosInstance = new CosSdk({
    SecretId: secretId,
    SecretKey: secretKey,
    XCosSecurityToken: token
  })

  const taskList = objects.map(({ bucket, region, key }) => {
    const purgeUrls = [];
    // 主要变更内容在这个位置
    cdnHosts.forEach(host => {
      const tempUrl = getObjectUrl({
        cosInstance,
        bucket,
        region,
        key,
        origin: `${/^(http\:\/\/|https\:\/\/)/.test(host) ? '' : 'https://'}${host}`
      });
      purgeUrls.push(tempUrl);
      // 如果以 /index.html 结尾，则增加目录首页/
      // 例如 https://www.xxxx.com/index.html, 则增加 https://www.xxxx.com/
      if(tempUrl.lastIndexOf('/index.html') == (tempUrl.length - 11)){
        purgeUrls.push(tempUrl.substr(0, tempUrl.length - 10))
      }
    });
    return new CdnRefreshTask({
      cdnSdkInstance,
      urls: purgeUrls
    })
  })

  const taskResults = []
  for (const task of taskList) {
    const results = await task.runPurgeTasks()
    taskResults.push(...results)
  }

  logger({
    title: 'cdn refresh full logs:',
    data: taskResults
  })

  const { status, messages } = getLogSummary(taskResults)

  logger({
    messages: messages.map(item => item.replace(/\,\ /g, '\n'))
  })

  if (status === 'fail') {
    throw messages.join('; ')
  } else {
    return messages.join('; ')
  }
}

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情