GraphQLのスキーマドキュメントをspectaql+github actionsでgithub.ioに公開したメモ


概要

GraphQLのドキュメントをHTMLで読みやすい形にしてgithub.ioで公開をしたかった。
今回は、graphqlのスキーマについて試した。ついでにdraw.ioもActionsで画像を生成できるようにした。
公開はGitHub Actionsを使い、docsブランチをpushしたタイミングで公開されるようにする。

ソースコード

公開したgithub.io

draw.io

drawio-export-actionを利用する。

graphql

spectaqlを利用する。

パイプライン

gh-pages.hml
name: github pages

on:
  push:
    branches:
      - docs  # Set a branch name to trigger deployment

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2

      - name: Create gh-pages-dir
        run: |
          mkdir -p ./docs/publish


+ # draw.io
+      - name: Export draw.io
+        uses: rlespinasse/[email protected]
+        with:
+          path: documents/draw.io
+          format: png
+          output: ../../docs/publish/drawio
+          transparent: true

# npm 準備
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'


# # REST スキーマ

      - name: OpenAPI Setup
        run: npm ci
        working-directory: ./documents/api-schema

      - name: OpenAPI Make
        run: npm run redoc
        working-directory: ./documents/api-schema


      - name: OpenAPI Move files
        run: |
          mkdir -p ./docs/publish/api-schema
          mv ./documents/api-schema/dist/index.html ./docs/publish/api-schema/


+ # GraphQL スキーマ
+      - name: GraphQL Setup
+        run: npm ci
+        working-directory: ./documents/graphql-schema
+      - name: GraphQL Make
+        run: npm run build
+        working-directory: ./documents/graphql-schema
+      - name: GraphQL Move files
+        run: |
+          mkdir -p ./docs/publish/graphql-schema
+          mv ./documents/graphql-schema/public/* ./docs/publish/graphql-schema/

# markdown to HTML
# Gatsby
      - name: Gatsby Setup
        run: npm ci
        working-directory: ./documents/design

      - name: Gatsby Make
        run: npm run build
        working-directory: ./documents/design

      - name: Gatsby Move files
        run: |
          mkdir -p ./docs/publish
          mv ./documents/design/public ./docs/publish/design
# pandoc

      - uses: docker://pandoc/core:2.9
        with:
          args: >- # allows you to break string into multiple lines
            --standalone
            --output=docs/index.html
            documents/index.md

# デプロイ
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs

参考

spectaqlブログ
drawio-export-action
GitHub Actionsを使ってGithub PagesにOpen APIのドキュメントを公開したメモ
GitHub Actionsを使ってGithub PagesにStorybookのドキュメントをWebpack5を使って公開したメモ