如何基于Serverless使用 SCF+COS 快速開發全棧應用

如何基于Serverless使用 SCF+COS 快速開發全棧應用，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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

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

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

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

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

效果展示

• 首頁

• 視頻播放頁

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

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

前端部分

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

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

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

<template lang="pug">
  div()
    div#box(v-bind:class="pc ? 'box_pc' : 'box_phone'" v-bind:value="item.title" v-for="(item,index) in items" @click="playx(index)")
      wired-image(v-bind:class="pc ? 'img_pc' : 'img_phone'" elevation="2" :src="item.cover")
      div(style='width:100%;')
        p() {{ 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 然后點擊右邊的編輯按鈕

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

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

我們這次再刷新一下網頁就可以正常返回數據了。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。