用 Serverless 優雅地實作圖片藝識訓應用-有解無憂

本文將會分享，如何從零開始搭建一個基于騰訊云 Serverless 的圖片藝識訓應用！作者 @蔣啟鉦

線上 demo 預覽：https://art.x96.xyz/ ，專案已開源，完整代碼見文末，

在完整閱讀文章后，讀者應該能夠實作并部署一個相同的應用，這也是本篇文章的目標，

專案看點概覽：

前端 react（Next.js）、后端 node（koa2）
全面使用 ts 進行開發，極致開發體驗（后端運行時 ts 的方案，雖然性能差點，不過勝在無需編譯，適合寫 demo）
突破云函式代碼 500mb 限制（提供解決方案）
TensorFlow2 + Serverless 擴展想象力邊際
高性能，輕松應對萬級高并發，實作高可用（自信的表情，反正是平臺干的活）
秒級部署，十秒部署上線
開發周期短（本文就能帶你完成開發）

本專案部署借助了 Serverless component，因此當前開發環境需先全域安裝 Serverless 命令列工具

npm install -g serverless

需求與架構

本應用的整體需求很簡單：圖片上傳與展示，

模塊概覽

模塊概覽

上傳圖片

上傳圖片

瀏覽圖片

瀏覽圖片

用物件存盤提供存盤服務

在開發之前，我們先創建一個 oss 用于提供圖片存盤（可以使用你已有的物件存盤）

mkdir oss

在新建的 oss 目錄下添加 serverless.yml

component: cos
name: xart-oss
app: xart
stage: dev

inputs:
  src:
    src: ./
    exclude:
      - .env # 防止密鑰被上傳
  bucket: ${name} # 存盤桶名稱，如若不添加 AppId 后綴，則系統會自動添加，后綴為大寫（xart-oss-<你的appid>）
  website: false
  targetDir: /
  protocol: https
  region: ap-guangzhou # 配置區域，盡量配置在和服務同區域內，速度更快
  acl:
    permissions: public-read # 讀寫配置為，私有寫，共有讀

執行 sls deploy 幾秒后，你應該就能看到如下提示，表示新建物件存盤成功，

新建物件存盤

這里，我們看到 url https://art-oss-.cos.ap-guangzhou.myqcloud.com，可以發現默認的命名規則是 https://<名字-appid>.cos.<地域>.myqcloud.com

簡單記錄一下，在后面服務中會用到，忘記了也不要緊，看看 .env 內 TENCENT_APP_ID 欄位（部署后會自動生成 .env）

實作后端服務

新建一個目錄并初始化

mkdir art-api && cd art-api && npm init

安裝依賴（期望獲取 ts 型別提示，請自行安裝 @types）

npm i koa @koa/router @koa/cors koa-body typescript ts-node cos-nodejs-sdk-v5 axios dotenv

配置 tsconfig.json

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "lib": ["es2018", "esnext.asynciterable"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true
  }
}

入口檔案 sls.js

require("ts-node").register({ transpileOnly: true }); // 載入 ts 運行時環境，配置忽略型別錯誤
module.exports = require("./app.ts"); // 直接引入業務邏輯，下面我會和你一起實作

補充兩個實用知識點：

node -r

在入口檔案中引入 require("ts-node").register({ transpileOnly: true }) 實際等同于 node -r ts-node/register/transpile-only

所以 node -r 就是在執行之前載入一些特定模塊，利用這個能力，能快速實作對一些功能的支持

比如 node -r esm main.js 通過 esm 模塊就能在無需 babel、webpack 的情況下快速 import 與 export 進行模塊加載與匯出

ts 加載路徑

如果不希望用 ../../../../../ 來加載模塊，那么

在 tsconfig.json 中配置 baseUrl: "."
ts-node -r tsconfig-paths/register main.ts 或 require("tsconfig-paths").register()
import utils from 'src/utils' 即可愉快地從專案根路徑加載模塊

下面來實作具體邏輯：

app.ts

require("dotenv").config(); // 載入 .env 環境變數，可以將一些密鑰配置在環境變數中，并通過 .gitignore 阻止提交
import Koa from "koa";
import Router from "@koa/router";
import koaBody from "koa-body";
import cors from '@koa/cors'
import util from 'util'
import COS from 'cos-nodejs-sdk-v5'
import axios from 'axios'

const app = new Koa();
const router = new Router();

var cos = new COS({
  SecretId: process.env.SecretId // 你的id,
  SecretKey: process.env.SecretKey // 你的key,
});

const cosInfo = {
  Bucket: "xart-oss-<你的appid>", // 部署oss后獲取
  Region: "ap-guangzhou",
}

const putObjectSync = util.promisify(cos.putObject.bind(cos));
const getBucketSync = util.promisify(cos.getBucket.bind(cos));

router.get("/hello", async (ctx) => {
  ctx.body = 'hello world!'
})

router.get("/api/images", async (ctx) => {
  const files = await getBucketSync({
    ...cosInfo,
    Prefix: "result",
  });

  const cosURL = `https://${cosInfo.Bucket}.cos.${cosInfo.Region}.myqcloud.com`;
  ctx.body = files.Contents.map((it) => {
    const [timestamp, size] = it.Key.split(".jpg")[0].split("__");
    const [width, height] = size.split("_");
    return {
      url: `${cosURL}/${it.Key}`,
      width,
      height,
      timestamp: Number(timestamp),
      name: it.Key,
    };
  })
    .filter(Boolean)
    .sort((a, b) => b.timestamp - a.timestamp);
});

router.post("/api/images/upload", async (ctx) => {
  const { imgBase64, style } = JSON.parse(ctx.request.body)
  const buf = Buffer.from(imgBase64.replace(/^data:image\/\w+;base64,/, ""), 'base64')
  // 呼叫預先提供tensorflow服務加工圖片，后面替換成你自己的服務
  const { data } = await axios.post('https://service-edtflvxk-1254074572.gz.apigw.tencentcs.com/release/', {
    imgBase64: buf.toString('base64'),
    style
  })
  if (data.success) {
    const afterImg = await putObjectSync({
      ...cosInfo,
      Key: `result/${Date.now()}__400_200.jpg`,
      Body: Buffer.from(data.data, 'base64'),
    });
    ctx.body = {
      success: true,
      data: 'https://' + afterImg.Location
    }
  }
});

app.use(cors());
app.use(koaBody({
  formLimit: "10mb",
  jsonLimit: '10mb',
  textLimit: "10mb"
}));
app.use(router.routes()).use(router.allowedMethods());

const port = 8080;
app.listen(port, () => {
  console.log("listen in http://localhost:%s", port);
});

module.exports = app;

在代碼里可以看到，在圖片上傳采用了 base64 的形式，這里需要注意，通過 api 網關觸發 scf 的時候，網關無法透傳 binary，具體上傳規則可以參閱官方檔案：

再補充一個知識點：實際我們訪問的是 api 網關，然后觸發云函式，來獲得請求回傳結果，所以 debug 時需要關注全鏈路

回歸正題，接著配置環境變數 .env

NODE_ENV=development

# 配置 oss 上傳所需密鑰，需要自行配置，配好了也別告訴我：）
# 密鑰查看地址：https://console.cloud.tencent.com/cam/capi
SecretId=xxxx
SecretKey=xxxx

以上，server 部分就開發完成了，我們可以通過在本地執行 node sls.js 來驗證一下，應該可以看到服務啟動的提示了，

listen in http://localhost:8080

來簡單配置一下 serverless.yml，把服務部署到線上，后面再進一步使用 layer 進行優化

component: koa # 這里填寫對應的 component
app: art
name: art-api
stage: dev

inputs:
  src:
    src: ./
    exclude:
      - .env
  functionName: ${name}
  region: ap-guangzhou
  runtime: Nodejs10.15
  functionConf:
    timeout: 60 # 超時時間配置的稍微久一點
    environment:
      variables: # 配置環境變數，同時也可以直接在scf控制臺配置
        NODE_ENV: production
  apigatewayConf:
    enableCORS: true
    protocols:
      - https
      - http
    environment: release

之后執行部署命令 sls deploy

等待數十秒，應該會得到如下的輸出結果（如果是第一次執行，需要平臺方授權）

其中 url 就是當前服務部署在線上的地址，我們可以試著訪問一下看看，是否看到了預設的 hello world，

到這里，server 基本上已經部署完成了，如果代碼有改動，那就修改后再次執行 sls deploy，官方為代碼小于 10M 的專案提供了在線編輯的能力，

但是，隨著專案復雜度的增加，deploy 上傳會變慢，所以，讓我們再優化一下，

新建 layer 目錄

mkdir layer

在 layer 目錄下添加 serverless.yml

component: layer
app: art
name: art-api-layer
stage: dev

inputs:
  region: ap-guangzhou
  name: ${name}
  src: ../node_modules # 將 node_modules 打包上傳
  runtimes:
    - Nodejs10.15 # 注意配置為相同環境

回到專案根目錄，調整一下根目錄的 serverless.yml

component: koa # 這里填寫對應的 component
app: art
name: art-api
stage: dev

inputs:
  src:
    src: ./
    exclude:
      - .env
      - node_modules/** # deploy 時排除 node_modules
  functionName: ${name}
  region: ap-guangzhou
  runtime: Nodejs10.15
  functionConf:
    timeout: 60 # 超時時間配置的稍微久一點
    environment:
      variables: # 配置環境變數，同時也可以直接在 scf 控制臺配置
        NODE_ENV: production
  apigatewayConf:
    enableCORS: true
    protocols:
      - https
      - http
    environment: release
  layers:
    - name: ${output:${stage}:${app}:${name}-layer.name} # 配置對應的 layer
      version: ${output:${stage}:${app}:${name}-layer.version} # 配置對應的 layer 版本

接著執行命令 sls deploy --target=./layer 部署 layer，然后這次部署看看速度應該已經在 10s 左右了

sls deploy

關于 layer 和云函式，補充兩個知識點：

layer 的加載與訪問

layer 會在函式運行時，將內容解壓到 /opt 目錄下，如果存在多個 layer，那么會按時間循序進行解壓，如果需要訪問 layer 內的檔案，可以直接通過 /opt/xxx 訪問，如果是訪問 node_module 則可以直接 import，因為 scf 的 NODE_PATH 環境變數默認已包含 /opt/node_modules 路徑，

配額

云函式 scf 針對每個用戶帳號，均有一定的配額限制：

其中需要重點關注的就是單個函式代碼體積 500mb 的上限，在實際操作中，云函式雖然提供了 500mb，但也存在著一個 deploy 解壓上限，

關于繞過配額問題：

如果超的不多，那么使用 npm install --production 就能解決問題
如果超的太多，那就通過掛載 cfs 檔案系統來進行規避，我會在下面部署 tensorflow 演算法模型服務章節里面，展開聊聊如何把 800mb tensorflow 的包 + 模型部署到 SCF 上

實作前端 SSR 服務

下面將使用 next.js 來構建一個前端 SSR 服務，

新建目錄并初始化專案：

mkdir art-front && cd art-front && npm init

安裝依賴：

npm install next react react-dom typescript @types/node swr antd @ant-design/icons dayjs

增加 ts 支持（next.js 跑起來會自動配置）：

touch tsconfig.json

打開 package.json 檔案并添加 scripts 配置段：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

撰寫前端業務邏輯（文中僅展示主要邏輯，原始碼在 GitHub 獲取）

pages/_app.tsx

import React from "react";
import "antd/dist/antd.css";
import { SWRConfig } from "swr";

export default function MyApp({ Component, pageProps }) {
  return (
    <SWRConfig
      value=https://www.cnblogs.com/serverlesscloud/archive/2020/09/25/{{
        refreshInterval: 2000,
        fetcher: (...args) => fetch(args[0], args[1]).then((res) => res.json()),
      }}
    >
      
    
  );
}

pages/index.tsx 完整代碼

import React from "react";
import { Card, Upload, message, Radio, Spin, Divider } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import useSWR from "swr";

let origin = 'http://localhost:8080'
if (process.env.NODE_ENV === 'production') {
  // 使用你自己的部署的art-api服務地址
  origin = 'https://service-5yyo7qco-1254074572.gz.apigw.tencentcs.com/release' 
}

// 略...
export default function Index() {
  const { data } = useSWR(`${origin}/api/images`);

  const [img, setImg] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const uploadImg = React.useCallback((file, style) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = async () => {
      const res = await fetch(
        `${origin}/api/images/upload`, {
        method: 'POST',
        body: JSON.stringify({
          imgBase64: reader.result,
          style
        }),
        mode: 'cors'
      }
      ).then((res) => res.json());

      if (res.success) {
        setImg(res.data);
      } else {
        message.error(res.message);
      }
      setLoading(false);
    }
  }, []);

  const [artStyle, setStyle] = React.useState(STYLE_MODE.cube);

  return (
        <Dragger
          style={{ padding: 24 }}
          {...{
            name: "art_img",
            showUploadList: false,
            action: `${origin}/api/upload`,
            onChange: (info) => {
              const { status } = info.file;
              if (status !== "uploading") {
                console.log(info.file, info.fileList);
              }
              if (status === "done") {
                setImg(info.file.response);
                message.success(`${info.file.name} 上傳成功`);
                setLoading(false);
              } else if (status === "error") {
                message.error(`${info.file.name} 上傳失敗`);
                setLoading(false);
              }
            },
            beforeUpload: (file) => {
              if (
                !["image/png", "image/jpg", "image/jpeg"].includes(file.type)
              ) {
                message.error("圖片格式必須是 png、jpg、jpeg");
                return false;
              }
              const isLt10M = file.size / 1024 / 1024 < 10;
              if (!isLt10M) {
                message.error("檔案大小超過10M");
                return false;
              }
              setLoading(true);

              uploadImg(file, artStyle);
              return false;
            },
          }}
      // 略...

使用 npm run dev 把前端跑起來看看，看到以下提示就是成功了

ready - started server on http://localhost:3000

接著配置 serverless.yml（如果有需要可以參考前文，使用 layer 優化部署體驗）

component: nextjs
app: art
name: art-front
stage: dev

inputs:
  src:
    dist: ./
    hook: npm run build
    exclude:
      - .env
  region: ap-guangzhou
  functionName: ${name}
  runtime: Nodejs12.16
  staticConf:
    cosConf:
      bucket: art-front # 將前端靜態資源部署到oss，減少scf的呼叫頻次
  apigatewayConf:
    enableCORS: true
    protocols:
      - https
      - http
    environment: release
    # customDomains: # 如果需要，可以自己配置自定義域名
    #   - domain: xxxxx 
    #     certificateId: xxxxx # 證書 ID
    #     # 這里將 API 網關的 release 環境映射到根路徑
    #     isDefaultMapping: false
    #     pathMappingSet:
    #       - path: /
    #         environment: release
    #     protocols:
    #       - https
  functionConf:
    timeout: 60
    memorySize: 128
    environment:
      variables:
        apiUrl: ${output:${stage}:${app}:art-api.apigw.url} # 此處可以將api通過環境變數注入

由于我們額外配置了 oss，所以需要額外配置一下 next.config.js

const isProd = process.env.NODE_ENV === "production";

const STATIC_URL =
  "https://art-front-<你的appid>.cos.ap-guangzhou.myqcloud.com/";

module.exports = {
  assetPrefix: isProd ? STATIC_URL : "",
};

提供 Tensorflow 2.x 演算法模型服務

在上面的例子中，我們使用的 Tensorflow，暫時還是呼叫我預先提供的介面，

接著讓我們會把它替換成我們自己的服務，

基礎資訊

tensoflow2.3
model

scf 在 python 環境下，默認提供了 tensorflow1.9 依賴包，使用 python 可以用較低的成本直接上手，

問題所在

但如果你想使用 2.x 版本，或不熟悉 python，想用 node 來跑 tensorflow，那么就會遇到代碼包大小的限制的問題，

Python 中 Tensorflow 2.3 包體積 800mb 左右
node 中 tfjs-node2.3 安裝后，同樣會超過 400mb（tfjs core 版本，非常小，不過速度太慢）

怎么解決 —— 檔案存盤服務！

先看看 CFS 檔案的介紹

掛載后，就可以正常使用了，騰訊云提供了一個簡單例子，

var fs = requiret('fs');
exports.main_handler = async (event, context) => {
  await fs.promises.writeFile('/mnt/myfolder/filel.txt', JSON.stringify(event)); 
  return event;
};

既然能正常讀寫，那么就能夠正常的載入 npm 包，可以看到我直接加載了 /mnt 目錄下的包，同時 model 也放在 /mnt 下

  tf = require("/mnt/nodelib/node_modules/@tensorflow/tfjs-node");
  jpeg = require("/mnt/nodelib/node_modules/jpeg-js");
  images = require("/mnt/nodelib/node_modules/images");
  loadModel = async () => tf.node.loadSavedModel("/mnt/model");

如果你使用 Python，那么可能會遇到一個問題，那就是 scf 默認環境下提供了 tensorflow 1.9 的依賴包，所以需要使用 insert，提高 /mnt 目錄下包的優先級

sys.path.insert(0, "./mnt/xxx")

上面提供了解決方案，那么具體開發中可能會感覺很麻煩，因為 csf 必須和 scf 配置在同一個子網內，無法掛載到本地進行操作，

所以，在實際部署程序中，可以在對應網路下，購置一臺按需計費的 ecs 云服務器實體，然后將硬碟掛載后，直接進行操作，最后在云函式成功部署后，銷毀實體：）

sudo yum install nfs-utils
mkdir <待掛載目標目錄>
sudo mount -t nfs -o vers=4.0，noresvport <掛載點IP>:/ <待掛載目錄>

具體業務代碼如下：

const fs = require("fs");
let tf, jpeg, loadModel, images;

if (process.env.NODE_ENV !== "production") {
  tf = require("@tensorflow/tfjs-node");
  jpeg = require("jpeg-js");
  images = require("images");
  loadModel = async () => tf.node.loadSavedModel("./model");
} else {
  tf = require("/mnt/nodelib/node_modules/@tensorflow/tfjs-node");
  jpeg = require("/mnt/nodelib/node_modules/jpeg-js");
  images = require("/mnt/nodelib/node_modules/images");
  loadModel = async () => tf.node.loadSavedModel("/mnt/model");
}

exports.main_handler = async (event) => {
  const { imgBase64, style } = JSON.parse(event.body)
  if (!imgBase64 || !style) {
    return { success: false, message: "需要提供完整的引數imgBase64、style" };
  }
  time = Date.now();
  console.log("決議圖片--");
  const styleImg = tf.node.decodeJpeg(fs.readFileSync(`./imgs/style_${style}.jpeg`));
  const contentImg = tf.node.decodeJpeg(
    images(Buffer.from(imgBase64, 'base64')).size(400).encode("jpg", { operation: 50 }) // 壓縮圖片尺寸
  );
  const a = styleImg.toFloat().div(tf.scalar(255)).expandDims();
  const b = contentImg.toFloat().div(tf.scalar(255)).expandDims();
  console.log("--決議圖片 %s ms", Date.now() - time);


  time = Date.now();
  console.log("載入模型--");
  const model = await loadModel();
  console.log("--載入模型 %s ms", Date.now() - time);


  time = Date.now();
  console.log("執行模型--");
  const stylized = tf.tidy(() => {
    const x = model.predict([b, a])[0];
    return x.squeeze();
  });
  console.log("--執行模型 %s ms", Date.now() - time);

  time = Date.now();

  const imgData = await tf.browser.toPixels(stylized);
  var rawImageData = {
    data: Buffer.from(imgData),
    width: stylized.shape[1],
    height: stylized.shape[0],
  };

  const result = images(jpeg.encode(rawImageData, 50).data)
    .draw(
      images("./imgs/logo.png"),
      Math.random() * rawImageData.width * 0.9,
      Math.random() * rawImageData.height * 0.9
    )
    .encode("jpg", { operation: 50 });

  return { success: true, data: result.toString('base64') };
};

最后

感謝閱讀，以上代碼均經過實測，如果發現例外，那就再看一遍：）

有其他問題或想法，可以移步原文鏈接討論，

原始碼：jiangqizheng/art，歡迎 star，

One More Thing

立即體驗騰訊云 Serverless Demo，領取 Serverless 新用戶禮包 ?? serverless/start

歡迎訪問：Serverless 中文網！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/127208.html

標籤：其他

上一篇：程式員如何提升個人的技術影響力？想讓別人膜拜你，就要這樣做！

下一篇：阿里Java架構師必備的軟實力，資料結構與演算法PDF分享