update

no-vps/meta.json

@@ -13,15 +13,23 @@
     "path": "deploy-fe-with-netlify"
   },
   {
-    "sideTitle": "4. AliOSS: 国内托管",
+    "sideTitle": "4. AliOSS(国内): 前端托管",
     "path": "deploy-fe-with-alioss"
   },
   {
-    "sideTitle": "5. Vercel: API 服务",
+    "sideTitle": "5. Serverless Framework",
+    "path": "serverless"
+  },
+  {
+    "sideTitle": "6. Serverless: 前端托管",
+    "path": "serverless-fe"
+  },
+  {
+    "sideTitle": "7. Vercel: API 服务",
     "path": "api"
   },
   {
-    "sideTitle": "6. Sentry: 异常监控",
+    "sideTitle": "8. Sentry: 异常监控",
     "path": "sentry"
   }
 ]

no-vps/serverless-fe.md

@@ -0,0 +1,79 @@
+---
+title: 使用腾讯云的 Serverless 托管你的前端应用
+date: 2021-01-13 11:48
+loc: 杭州江干区
+---
+
+# 使用 Serverless 部署前端应用
+
+无论选择 `vercel`、`netlify` 还是 `alioss` 部署前端应用，以下三项配置都是必不可少的:
+
+``` toml
+[build]
+  # 项目的根目录，及 npm 命令执行的目录
+  base = ""
+
+  # 将要服务化的静态文件，也是打包后生成的目录
+  publish = ".vuepress/dist"
+
+  # 打包命令
+  command = "npm run build"
+```
+
+## Serverless 部署
+
+在腾讯云的 Serverless 中，需要配置文件来部署应用。部署纯前端页面的话，需要使用一个 `tencent-website` 的组件，并使用以上配置进行部署。
+
+以下是使用 `vuepress` 搭建我的博客的 Serverless 配置文件，在根目录新疆配置文件 `serverless.yaml`，配置如下:
+
+> 更详细的配置请看过来：[Serverless Website 全配置](https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md)
+
+``` yaml
+component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件
+name: shanyue-blog # (必填) 该 website 组件创建的实例名称
+
+inputs:
+  src:
+    src: .
+    index: index.html
+    dist: .vuepress/dist
+    hook: npm run build
+    # websitePath: ./
+  region: ap-guangzhou
+  bucketName: my-bucket
+  protocol: https
+```
+
+执行命令前设置两个环境变量(我偷懒直接全部扔到了 `bashrc` 下)，在腾讯云的账号体系中可以找到：
+
+``` shell
+export TENCENT_SECRET_ID=shanyue-id
+export TENCENT_SECRET_KEY=shanyue-key
+```
+
+万事俱备只欠东风，一个命令搞定：
+
+``` bash
+# 需提前下载: npm i -g serverless
+$ sls
+
+serverless ⚡framework
+Action: "deploy" - Stage: "dev" - App: "shanyue-blog" - Instance: "shanyue-blog"
+
+region:  ap-guangzhou
+website: https://my-bucket-1257314149.cos-website.ap-guangzhou.myqcloud.com
+
+Full details: https://serverless.cloud.tencent.com/apps/shanyue-blog/shanyue-blog/dev
+
+103s › shanyue-blog › Success
+```
+
+## Serverless 域名
+
+此时可以通过域名: <https://my-bucket-1257314149.cos-website.ap-guangzhou.myqcloud.com> 访问我的博客，不过域名好像过长？
+
+在腾讯云的 Serverless 中使用自己的域名需要备案，这里就不细讲了。
+
+## 总结
+
+结合 Github Actions 能够实现与 `vercel` 和 `netlify` 差不多的自动部署，他最大的优势是在国内有着稳定的网络，且免费的托管方案。如果有一点麻烦，那就是自定义域名，如果你仅仅想用它做一个示例 Demo，那完全够用！

no-vps/serverless.md

@@ -1,5 +1,9 @@
 # serverless framework 初识
 
+::: warning
+本篇文章有可能已过时，可使用最新的 Serverless Component
+:::
+
 `serverless` 是各大云服务商提供出来的一种无服务的计算资源。为什么叫无服务呢，因为如果你使用 `serverless`，你只需要关注应用层，而无需关心底层基础设施，无需运维。简而言之，`serverless` 并不是真的无服务，而是关于有服务的不归你管，云服务商帮你搞定，比如 `google`，`aws` 或者 `aliyun`。
 
 关注点分离，好呀好，有了 `serverless` 以后只需要也只能关心业务了，这也不知是喜是忧。但你也无需过于担心，这是对已有并且成熟的开发模式的挑战，解决痛点有限，因此很多团队对于替换为 `serverless` 也动力不足。
@@ -14,7 +18,7 @@
 
 ## 快速开始
 
-![serverless](https://user-gold-cdn.xitu.io/2020/4/15/1717e3a95e071494?w=600&h=374&f=gif&s=232161)
+![serverless](./assets/sls.gif)
 
 `serverless framework` 与腾讯云的函数计算来开始一个 `hello, world` 吧
 

serverless.yaml

@@ -0,0 +1,13 @@
+component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件
+name: shanyue-blog # (必填) 该 website 组件创建的实例名称
+
+inputs:
+  src:
+    src: .
+    index: index.html
+    dist: .vuepress/dist
+    hook: npm run build
+    # websitePath: ./
+  region: ap-guangzhou
+  bucketName: my-bucket
+  protocol: https