萬物皆可 Serverless 之使用 SCF+COS 快速開發全堆疊應用

我一直想做一個網頁應用，奈何沒有系統學習過前端，直到后來我接觸到騰訊云無服務器云函式 SCF，讓前端可以快速獲得后端的能力同時，一并解決了前端資料請求跨域的問題，

本文來自 Serverless 社區用戶「乂乂又又」供稿

沒錯，云函式 SCF 就是那種一旦用了就無法回到原來那種神奇的東西，讓人不禁感嘆為什么沒有早點遇到 SCF

然后我花了大概一天的時間撰寫除錯上線發布云函式（應用后端），然后又用了一天的時間學了下前端，主要是確定要用到的技術堆疊（后面我會再講到這個問題），然后第三天正式開始開發應用，將云函式引入前端呼叫，測驗資料，調整布局，打包網頁發布到 coding pages，

所以在我是一個前端初學者的背景下，前后僅花了大概三天的時間，就完成了這樣一個比較簡單的網頁應用

這就是 Severless 的魅力所在，它可以讓你快速開發上線全堆疊應用，無論你是前端或是后端開發者都可以獲益許多，

效果展示

• 首頁

• 視頻播放頁

更詳細的體驗可訪問 https://wo-cao.cn/ ，僅做測驗之用，不要亂搞哦~

是不是有點躍躍欲試涅？讓我們開始吧~

前端部分

由于初涉前端，前端豐富得讓人眼花繚亂的生態讓我花費了一整天的時間來確定所要用的框架，

這里大體說下我用到的前端技術堆疊，幫助小伙伴快速進入實際開發狀態，不要像我這個前端小白一樣在框架的選擇上耗費太多時間

然后貼一下搜索串列頁面的原始碼，展示一下 Vue+Pug+TypeScript+Stylus 寫起網頁來有多酸爽

<template lang="pug">
  div(style="margin:2.5vw;display: flex;flex-wrap: wrap;")
    div#box(v-bind:class="pc ? 'box_pc' : 'box_phone'" v-bind:value=https://www.cnblogs.com/serverlesscloud/p/"item.title" v-for="(item,index) in items" @click="playx(index)")
      wired-image(v-bind:class="pc ?'img_pc' : 'img_phone'" elevation="2" :src=https://www.cnblogs.com/serverlesscloud/p/"item.cover")
      div(style='width:100%;')
        p(style="text-align: center;font-size:1rem;") {{ item.title }}
</template>

<script lang="ts">
import 'wired-elements'
import { open, pc, refreshPath } from '../app/tools/window'

export default {
  name: 'ResultList',
  data() {
    return {
      pc: true,
      items: this.$store.getters.getJsonState
    }
  },
  mounted() {
    this.pc = pc ? true : false
  },
  methods: {
    playx(index: number) {
      let video = this.items[index]
      this.$store.commit('setPlayState', video)
      open(this, video.title, '/play')
    }
  }
}
</script>

<style lang="stylus" scoped>
.img_pc
  max-width 17vw
.img_phone
  max-width 22vw
.box_pc
  margin:3vw;
  flex: 0 0 13%;
.box_phone
  margin:2.5vw;
  flex: 0 0 28%; 
</style>

具體的開發程序就不細講了，因為我本身只是前端初學者，繼續講下去難免有班門弄斧，誤導他人的嫌疑~

然后這篇文章主要是講如何借助騰訊云 SCF+COS快速實作網頁的后端能力，下面我們就直接進入后端部分了，

后端部分

這一部分那我會分成兩點展開，一個是騰訊云 Severless 開發環境的配置，另一個是本地云函式的開發除錯和上執行緒序，

下面就讓我們一起來解開 Severless 的神秘面紗一探究竟吧~

1. 安裝 Tencent Serverless Toolkit for VS Code

所謂工欲善其事，必先利其器，為了更快速的開發除錯發布云函式，我們需要先安裝騰訊云官方的 Tencent Serverless 插件

相信我，你會愛死它的，它打通了云函式撰寫、除錯和上線發布的所有流程，真正做到了一條龍服務

官方檔案在這一塊講的還是蠻細致用心的，贊！感興趣的同學可以去看下《使用VS Code插件創建函式 》

2. 撰寫云函式

安裝好了 Tencent Serverless Toolkit for VS Code 插件，接著新建一個 python 環境下的 demo 云函式

再來看下 template.yamal 檔案里的函式配置

Resources:
  default:
    Type: 'TencentCloud::Serverless::Namespace'
    demo:
      Properties:
        CodeUri: ./
        Description: This is a template function
        Environment:
          Variables:
            ENV_FIRST: env1
            ENV_SECOND: env2
        Handler: index.main_handler
        MemorySize: 128
        Timeout: 3
        Role: QCS_SCFExcuteRole
        Runtime: Python3.6
        # VpcConfig:
        #   VpcId: 'vpc-qdqc5k2p'
        #   SubnetId: 'subnet-pad6l61i'
        # Events:
        #   timer:
        #     Type: Timer
        #     Properties:
        #       CronExpression: '*/5 * * * *'
        #       Enable: True
        #   cli-appid.cos.ap-beijing.myqcloud.com: # full bucket name
        #     Type: COS
        #     Properties:
        #       Bucket: cli-appid.cos.ap-beijing.myqcloud.com
        #       Filter:
        #         Prefix: filterdir/
        #         Suffix: .jpg
        #       Events: cos:ObjectCreated:*
        #       Enable: True
        #   topic:            # topic name
        #     Type: CMQ
        #     Properties:
        #       Name: qname
        #   hello_world_apigw:  # ${FunctionName} + '_apigw'
        #     Type: APIGW
        #     Properties:
        #       StageName: release
        #       ServiceId: 
        #       HttpMethod: ANY
      Type: 'TencentCloud::Serverless::Function'
Globals:
  Function:
    Timeout: 10

OK，這樣我們就創建好了一個新的云函式，下面開始撰寫業務邏輯，

首先我們來看一下函式上線后，通過 Timer 或者 Api 網關觸發函式時，main\_handler(event, context) 入口函式里的 event 長啥樣？

假設我們通過訪問 api 網關

https://service-xxxxx-66666666.sh.apigw.tencentcs.com/release/demo?key=葉問

POST 提交了

我是請求體

來觸發云函式，那么通過列印 event 變數我們發現，這里的 event 大概長這個模樣，它是一個 map

這樣的話我們就可以得到以下對應關系

注意，API 網關觸發函式時 event 里沒有 Time 鍵值對這一項，這一點可以用來鑒別云函式是否是通過 Timer 定時器觸發的

OK，知道 event 長啥樣之后我們就可以決議前端發過來的請求，然后根據請求的引數回傳結果了，但是需要注意的是，我們需要按照特定的格式給前端回傳資料（API 網關需要開啟回應集成），

假設我們要回傳一段 json 資料

json = {
    "flag":"true",
    "message":"請求成功"
}

現在來定義一個函式處理一下回傳資料的格式

def apiReply(reply, code=200):
    return {
        "isBase64Encoded": False,
        "statusCode": code,
        "headers": {'Content-Type': 'application/json', "Access-Control-Allow-Origin": "*"},
        "body": json.dumps(reply, ensure_ascii=False)
    }

'Content-Type': 'application/json' 宣告我們回傳的資料格式是json

"Access-Control-Allow-Origin": "*" 宣告我們回傳的資料是允許跨域呼叫的

json.dumps() 將我們要回傳的 json 物件（一個 map）轉成字串

ensure_ascii=False 是為了防止 json 中的中文在 json.dumps 之后亂碼

之后網頁前端就可以拿到我們回傳的 json 了

{
    "flag":"true",
    "message":"請求成功"
}

當然一個完整的后端是需要資料的增刪查改功能的，這里剛好我也需要做一個搜索黑名單的功能，

（有些影視資源可能是侵犯著作權的，我們要第一時間給予下架，保護正版，打擊盜版）

考慮到搜索關鍵詞黑名單管理起來比較簡單，這里我們直接接入騰訊云 COS物件存盤來讀寫黑名單

相關代碼如下

# 是否開啟本地debug模式
debug = False

# 騰訊云物件存盤依賴
if debug:
    from qcloud_cos import CosConfig
    from qcloud_cos import CosS3Client
    from qcloud_cos import CosServiceError
    from qcloud_cos import CosClientError
else:
    from qcloud_cos_v5 import CosConfig
    from qcloud_cos_v5 import CosS3Client
    from qcloud_cos_v5 import CosServiceError
    from qcloud_cos_v5 import CosClientError
    
# 配置存盤桶
appid = '66666666666'
secret_id = u'xxxxxxxxxxxxxxx'
secret_key = u'xxxxxxxxxxxxxxx'
region = u'ap-chongqing'
bucket = 'name'+'-'+appid

# 物件存盤實體
config = CosConfig(Secret_id=secret_id, Secret_key=secret_key, Region=region)
client = CosS3Client(config)

# cos 檔案讀寫
def cosRead(key):
    try:
        response = client.get_object(Bucket=bucket, Key=key)
        txtBytes = response['Body'].get_raw_stream()
        return txtBytes.read().decode()
    except CosServiceError as e:
        return ""

def cosWrite(key, txt):
    try:
        response = client.put_object(
            Bucket=bucket,
            Body=txt.encode(encoding="utf-8"),
            Key=key,
        )
        return True
    except CosServiceError as e:
        return False

這里需要注意一點，我在本地 python 環境安裝的騰訊云物件存盤依賴庫是 qcloud\_cos，但是在云函式在線運行環境中，已經安裝的是 qcloud\_cos\_v5 的依賴庫，

為了方便本地除錯，這里我設定了一個 debug 開關，來動態匯入 qcloud\_cos 依賴，這樣我們現在就可以讀寫 cos 存盤桶里的檔案了，像黑名單這種資料可以直接保存成文本，每行記錄一個黑名單關鍵詞即可，用的時候可以按行分割成黑名單 List，也可以直接判斷黑名單中是否有當前請求的關鍵詞，

這樣我們就實作了后端云函式的資料存取問題，不過這種方法也有一些缺點，比如不方便更改資料等，這里我建議大家可以把資料處理成 map 鍵值對，然后使用 json.dumps 轉成字串存盤到 cos 存盤桶里，

這樣最大的好處就是在后面用到之前的資料時可以直接 json.loads 加載回來，方便增刪查改資料（對應 map 鍵值的增刪查改）

例如

def getBlacks():
    blackMap = {}
    blackTxt = cosRead('blacks.txt')  # 讀取資料
    if len(blackTxt) > 0:
        blackMap = json.loads(blackTxt)
    return blackMap

def addBlacks(black):
    blackMap = getBlacks()
    if len(blackMap) > 0:
        blackMap[black]='我是黑名單'
    return cosWrite('blacks.txt', json.dumps(blackMap, ensure_ascii=False)) if len(blackMap) > 0 else False


def delBlacks(black):
    blackMap = getBlacks()
    if len(blackMap) > 0:
        blackMap.pop(black)
    return cosWrite('blacks.txt', json.dumps(blackMap, ensure_ascii=False)) if len(blackMap) > 0 else False

2. 云函式上線發布

OK，終于來到最后一步了，下面我們再去看一下前面提到的 template.yaml 云函陣列態檔

Resources:
  default:
    Type: 'TencentCloud::Serverless::Namespace'
    demo:
      Properties:
        CodeUri: ./
        Type: Event
        Environment:
          Variables:
        Description: 這是一個測驗函式 
        Handler: index.main_handler
        MemorySize: 64
        Timeout: 3
        Runtime: Python3.6
        Events:
          demo_apigw:  # ${FunctionName} + '_apigw'
            Type: APIGW
            Properties:
              StageName: release
              ServiceId: 
              HttpMethod: ANY
      Type: 'TencentCloud::Serverless::Function'

可以看到，這里我們已經配置好了 API 網關觸發器，如果你們沒有創建過 API 網關的話，這里 ServiceId 可以先留空，記得等云函式上傳發布成功后在騰訊云控制臺拿到 ServiceId 再填上就好了

云函上傳成功后會有提示，并幫我們自動創建了 API 網關觸發器

這里我們登錄騰訊云控制臺去看一下云函式有沒有創建好，順便配置一下 API 網關

現在我們就可以把生成的 ServiceId 填到本地的云函陣列態檔里了，不然下次上傳云函式系統還會自動幫我們新建 API 網關，然后我們先打開最底下那個藍色的訪問路徑看下回傳了什么

可以看到，云函式回應了我們 main\_handler 函式回傳的 map 資料，不過我們想要的只是 body 部分，headers 之類的是要告訴瀏覽器的，這是因為我們的 API 網關還沒有開啟回應集成，下面打開云函式觸發方式頁面的第一個藍色的箭頭，轉到 API 網關管理頁面，選擇編輯，

找到 demo 的 API 然后點擊右邊的編輯按鈕

然后來到第二步，勾選啟用回應集成選項后點擊下一步保存

回到發布頁點擊右上角發布，填寫備注后，點擊提交即可，

我們這次再重繪一下網頁就可以正常回傳資料了，

Serverless Framework 30 天試用計劃

我們誠邀您來體驗最便捷的 Serverless 開發和部署方式，在試用期內，相關聯的產品及服務均提供免費資源和專業的技術支持，幫助您的業務快速、便捷地實作 Serverless！

詳情可查閱：Serverless Framework 試用計劃

One More Thing

3 秒你能做什么？喝一口水，看一封郵件，還是 —— 部署一個完整的 Serverless 應用？

復制鏈接至 PC 瀏覽器訪問：https://serverless.cloud.tencent.com/deploy/express

3 秒極速部署，立即體驗史上最快的 Serverless HTTP 實戰開發！

傳送門：

• GitHub: github.com/serverless
• 官網：serverless.com

歡迎訪問：Serverless 中文網，您可以在 最佳實踐 里體驗更多關于 Serverless 應用的開發！

推薦閱讀：《Serverless 架構：從原理、設計到專案實戰》

標籤：其他

上一篇：萬物皆可 Serverless 之使用云函式 Timer 觸發器實作每天自動定時打卡

下一篇：江娛互動「世界爭霸」產品遷移至騰訊云云函式的實踐