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

概要

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

ソースコード

公開したgithub.io

2022.12.03 更新 更新

draw.io

drawio-export-actionを利用する。

graphql

spectaqlを利用する。

パイプライン

.github/workflows/gh-pages.hml

name: github pages

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
    paths:
      - .github/workflows/**
      - docs/** # documentsフォルダ内が更新されたときに実施

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0 # rlespinasse/drawio-export-action@v2 を使うときに指定が必要

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


+ # draw.io
+      - name: Export draw.io
+        uses: rlespinasse/drawio-export-action@v2
+        with:
+          path: documents/draw.io
+          format: png
+          output: ../../docs/publish/drawio
+          transparent: true
+          action-mode: all

# 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

2022.12.03 追記

下記エラーが発生。 actions/checkout@v2をactions/checkout@v3に更新した。

Node.js 12 actions are deprecated. For more information see: https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/. Please update the following actions to use Node.js 16: actions/checkout@v2

参考

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