LoginSignup
6
2

More than 1 year has passed since last update.

GitHub Actionsを使ってGithub PagesにOpen APIのドキュメントを公開したメモ

Last updated at Posted at 2021-03-01

概要

pushしただけでドキュメントの公開をしたかったので自動デプロイを試してみた。
vercelでWebページの公開はできるので、余っているGithub PagesにOpenAPIのReDocを公開してみる。

ソースコード

2021.11.3 追記

openapi3.1に対応したソースコード ... swagger-cli不要で、redocのみでよくなった。

ディレクトリ構成

- .github
  - workflows
    - gh-pages.yml      ... GitHub Actions記述
- src ... ソースコード
- docs
  - index.html          ... 各ドキュメントへのリンクを張るのみのHTML
- internals             ... 内部使用ドキュメントツールを入れるディレクトリ
  - api-schema          ... OpenAPIを記述

OpenAPI

yamlの作成

GitHub Actions による GitHub Pages への自動デプロイを参考に、yamlファイルを作成する。

.github/workflows/gh-pages.yml
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: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

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

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


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

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

作成したら、docsブランチをpushする。
push後、Actionsを確認して、デプロイされていることを確認する。

image.png

ブランチに、gh-pagesが新しくできていることを確認する。
デプロイされたファイルがgh-pagesに配置されていることを確認する。

image.png

github pagesの有効化

  • settings をスクロールしていくと「Github Pages」の項目があるので設定をする。
    • 「/(root)」か「/docs」のいずれか。今回はActionsの公開先である「/(root)」を選択する。
    • 「Save」すると、公開先のURLが表示される
      image.png

参考

GitHub Actions による GitHub Pages への自動デプロイ
AsciidocのドキュメントをGitHub Actionsを用いてGitHub Pagesで公開する
GitHub Actionsのワークフロー構文
公開元を設定する

6
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2