使用 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
  )
}

其中:

  1. markdown : 必填,你需要转换的 markdown 内容
  2. endpoint : 选填,browserless 中的服务接口,也可自建服务,默认值为
    wss://chrome.browserless.io/
  3. theme : 选填,mdnice 中的主题名称,默认为
    蔷薇紫
  4. 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,内含我在实际工作中碰到的问题、关于业务的思考及在全栈方向上的学习

  • 前端工程化系列

  • Node进阶系列码添加我的微信,备注进群,加入高级前端进阶群

加我微信拉你进入面试交流群

欢迎关注公众号【全栈成长之路】,定时推送 Node 原创及全栈成长文章

欢迎关注全栈成长之路