用 Serverless 優雅地實現圖片藝術化應用

時間 2020-10-03 標籤 serverless 優雅地實現圖片藝術化應用

本文將會分享，如何從零開始搭建一個基於騰訊雲 Serverless 的圖片藝術化應用！做者 @蔣啓鉦css

線上 demo 預覽：https://art.x96.xyz/ ，項目已開源，完整代碼見文末。前端

在完整閱讀文章後，讀者應該可以實現並部署一個相同的應用，這也是本篇文章的目標。node

項目看點概覽：python

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

本項目部署藉助了 Serverless component，所以當前開發環境需先全局安裝 Serverless 命令行工具react

npm install -g serverless

需求與架構

本應用的總體需求很簡單：圖片上傳與展現。webpack

模塊概覽

上傳圖片

瀏覽圖片

用對象存儲提供存儲服務

在開發以前，咱們先建立一個 oss 用於提供圖片存儲（可使用你已有的對象存儲）ios

mkdir oss

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

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 幾秒後，你應該就能看到以下提示，表示新建對象存儲成功。github

這裏，咱們看到 url https://art-oss- .cos.ap-guangzhou.myqcloud.com，能夠發現默認的命名規則是 https://<名字-appid>.cos.<地域>.myqcloud.com web

簡單記錄一下，在後面服務中會用到，忘記了也沒關係，看看 .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://www.noobyard.com/tag/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={{
        refreshInterval: 2000,
        fetcher: (...args) => fetch(args[0], args[1]).then((res) => res.json()),
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  );
}

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: "須要提供完整的參數imgBase6四、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 中文網！