如何基于Serverless使用 SCF+COS 快速開發(fā)全棧應(yīng)用

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

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

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

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

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

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

效果展示

• 首頁

• 視頻播放頁

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

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

前端部分

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

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

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

<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>

具體的開發(fā)過程就不細講了，因為我本身只是前端初學(xué)者，繼續(xù)講下去難免有班門弄斧，誤導(dǎo)他人的嫌疑~

然后這篇文章主要是講如何借助騰訊云 SCF+COS快速實現(xiàn)網(wǎng)頁的后端能力，下面我們就直接進入后端部分了。

后端部分

這一部分那我會分成兩點展開，一個是騰訊云 Severless 開發(fā)環(huán)境的配置，另一個是本地云函數(shù)的開發(fā)調(diào)試和上線過程。

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

1. 安裝 Tencent Serverless Toolkit for VS Code

所謂工欲善其事，必先利其器。為了更快速的開發(fā)調(diào)試發(fā)布云函數(shù)，我們需要先安裝騰訊云官方的 Tencent Serverless 插件

相信我，你會愛死它的，它打通了云函數(shù)編寫、調(diào)試和上線發(fā)布的所有流程，真正做到了一條龍服務(wù)

官方文檔在這一塊講的還是蠻細致用心的，贊！感興趣的同學(xué)可以去看下《使用VS Code插件創(chuàng)建函數(shù) 》

2. 編寫云函數(shù)

安裝好了 Tencent Serverless Toolkit for VS Code 插件，接著新建一個 python 環(huán)境下的 demo 云函數(shù)

再來看下 template.yamal 文件里的函數(shù)配置

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，這樣我們就創(chuàng)建好了一個新的云函數(shù)，下面開始編寫業(yè)務(wù)邏輯。

首先我們來看一下函數(shù)上線后，通過 Timer 或者 Api 網(wǎng)關(guān)觸發(fā)函數(shù)時，main\_handler(event, context) 入口函數(shù)里的 event 長啥樣？

假設(shè)我們通過訪問 api 網(wǎng)關(guān)

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

POST 提交了

我是請求體

來觸發(fā)云函數(shù)，那么通過打印 event 變量我們發(fā)現(xiàn)，這里的 event 大概長這個模樣，它是一個 map

這樣的話我們就可以得到以下對應(yīng)關(guān)系

注意，API 網(wǎng)關(guān)觸發(fā)函數(shù)時 event 里沒有 Time 鍵值對這一項，這一點可以用來鑒別云函數(shù)是否是通過 Timer 定時器觸發(fā)的

OK，知道 event 長啥樣之后我們就可以解析前端發(fā)過來的請求，然后根據(jù)請求的參數(shù)返回結(jié)果了，但是需要注意的是，我們需要按照特定的格式給前端返回數(shù)據(jù)（API 網(wǎng)關(guān)需要開啟響應(yīng)集成）。

假設(shè)我們要返回一段 json 數(shù)據(jù)

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

現(xiàn)在來定義一個函數(shù)處理一下返回數(shù)據(jù)的格式

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' 聲明我們返回的數(shù)據(jù)格式是json

"Access-Control-Allow-Origin": "*" 聲明我們返回的數(shù)據(jù)是允許跨域調(diào)用的

json.dumps() 將我們要返回的 json 對象（一個 map）轉(zhuǎn)成字符串

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

之后網(wǎng)頁前端就可以拿到我們返回的 json 了

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

當然一個完整的后端是需要數(shù)據(jù)的增刪查改功能的，這里剛好我也需要做一個搜索黑名單的功能。

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

考慮到搜索關(guān)鍵詞黑名單管理起來比較簡單，這里我們直接接入騰訊云 COS對象存儲來讀寫黑名單

相關(guān)代碼如下

# 是否開啟本地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 環(huán)境安裝的騰訊云對象存儲依賴庫是 qcloud\_cos，但是在云函數(shù)在線運行環(huán)境中，已經(jīng)安裝的是 qcloud\_cos\_v5 的依賴庫，

為了方便本地調(diào)試，這里我設(shè)置了一個 debug 開關(guān)，來動態(tài)導(dǎo)入 qcloud\_cos 依賴。這樣我們現(xiàn)在就可以讀寫 cos 存儲桶里的文件了，像黑名單這種數(shù)據(jù)可以直接保存成文本，每行記錄一個黑名單關(guān)鍵詞即可，用的時候可以按行分割成黑名單 List，也可以直接判斷黑名單中是否有當前請求的關(guān)鍵詞。

這樣我們就實現(xiàn)了后端云函數(shù)的數(shù)據(jù)存取問題，不過這種方法也有一些缺點，比如不方便更改數(shù)據(jù)等。這里我建議大家可以把數(shù)據(jù)處理成 map 鍵值對，然后使用 json.dumps 轉(zhuǎn)成字符串存儲到 cos 存儲桶里，

這樣最大的好處就是在后面用到之前的數(shù)據(jù)時可以直接 json.loads 加載回來，方便增刪查改數(shù)據(jù)（對應(yīng) map 鍵值的增刪查改）

例如

def getBlacks():
    blackMap = {}
    blackTxt = cosRead('blacks.txt')  # 讀取數(shù)據(jù)
    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. 云函數(shù)上線發(fā)布

OK，終于來到最后一步了，下面我們再去看一下前面提到的 template.yaml 云函數(shù)配置文件

Resources:
  default:
    Type: 'TencentCloud::Serverless::Namespace'
    demo:
      Properties:
        CodeUri: ./
        Type: Event
        Environment:
          Variables:
        Description: 這是一個測試函數(shù) 
        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'

可以看到，這里我們已經(jīng)配置好了 API 網(wǎng)關(guān)觸發(fā)器，如果你們沒有創(chuàng)建過 API 網(wǎng)關(guān)的話，這里 ServiceId 可以先留空，記得等云函數(shù)上傳發(fā)布成功后在騰訊云控制臺拿到 ServiceId 再填上就好了

云函上傳成功后會有提示，并幫我們自動創(chuàng)建了 API 網(wǎng)關(guān)觸發(fā)器

這里我們登錄騰訊云控制臺去看一下云函數(shù)有沒有創(chuàng)建好，順便配置一下 API 網(wǎng)關(guān)

現(xiàn)在我們就可以把生成的 ServiceId 填到本地的云函數(shù)配置文件里了，不然下次上傳云函數(shù)系統(tǒng)還會自動幫我們新建 API 網(wǎng)關(guān)，然后我們先打開最底下那個藍色的訪問路徑看下返回了什么

可以看到，云函數(shù)響應(yīng)了我們 main\_handler 函數(shù)返回的 map 數(shù)據(jù)，不過我們想要的只是 body 部分，headers 之類的是要告訴瀏覽器的，這是因為我們的 API 網(wǎng)關(guān)還沒有開啟響應(yīng)集成，下面打開云函數(shù)觸發(fā)方式頁面的第一個藍色的箭頭，轉(zhuǎn)到 API 網(wǎng)關(guān)管理頁面，選擇編輯。

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

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

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

我們這次再刷新一下網(wǎng)頁就可以正常返回數(shù)據(jù)了。

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