使用 GraphQL 與 Serverless 開發一個 md2html 服務

❝

本文收錄於 GitHub 山月行博客: shfshanyue/blog，內含我在實際工作中碰到的問題、關於業務的思考及在全棧方向上的學習

前端工程化系列
Node進階系列

❞

藉助於優秀的開源工具 mdnice ，根據 mardown 生成美化 html 的 GraphQL API 服務。

快來試一試效果~

mardown to html

❝

快來在 GraphQL Playground 中試一試效果

❞

query HTML (
  $markdown: String!
  $endpoint: String
  $theme: String
  $formatType: FormatType
) {
  html (
    markdown: $markdown,
    browserWSEndpoint: $endpoint,
    theme: $theme
    formatType: $formatType
  )
}

其中:

markdown : 必填，你需要轉換的 markdown 內容
endpoint : 選填，browserless 中的服務接口，也可自建服務，默認值爲 wss://chrome.browserless.io/
theme : 選填，mdnice 中的主題名稱，默認爲 薔薇紫

formatType
[JUEJIN | WECHAT | ZHIHU ]
JUEJIN

示例如下：

{
  "markdown": "## Hello, shanyue",
  "endpoint": "wss://chrome.shanyue.tech",
  "theme": "全棧藍",
  "formatType": "WECHAT"
}

根據 markdown 生成 html

Develop

可以通過以下方式快速基於此項目開發，並歡迎提交 PR 及 Fork

# 本地啓動，快速調試項目
$ npm run dev

# 調試 pptr
$ DEBUG=* npm run dev

# 在本地瀏覽器調試 pptr (在本地調試時如果不是 MAC，需要手動指定 chrome 位置)
$ DEBUG=1 npm run dev

本項目部署在騰訊雲 serverless 中，在部署前可以指定以下環境變量，如未指定，則默認環境變量取以下的值

# browserless 的服務入口地址，可使用自己的付費地址或自建
DEFAULT_ENDPOINT="wss://chrome.browserless.io/"

# mdnice 官網地址
MD_NICE="https://mdnice.com"

其中：

DEFAULT_ENDPOINT : browserless 中的服務接口，也可自建服務，默認值爲 wss://chrome.browserless.io/
MD_NICE : mdnice 地址，可自建服務

快速部署：

$ npm i -g serverless
$ sls --debug

部署資源配置文件 serverless.yml 由於是高延遲服務，記得把函數超時及網關超時設置到 200s，如下所示:

component: express # (required) name of the component. In that case, it's express.
name: markdown-to-html-api
org: shanyue

inputs:
  src: ./ # (optional) path to the source folder. default is a hello world app.
  functionName: mardown-api
  region: ap-shanghai
  runtime: Nodejs12.16
  exclude:
    - .env
  functionConf:
    timeout: 200
    memorySize: 128
  apigatewayConf:
    protocols:
      - http
      - https
    environment: release
    enableCORS: true #  允許跨域
    serviceTimeout: 200

❝

本文收錄於 GitHub 山月行博客: shfshanyue/blog，內含我在實際工作中碰到的問題、關於業務的思考及在全棧方向上的學習