GitHub Enterprise Cloud での Github Pages 活用例

GitHub Enterprise Cloud 使っている場合も Github Pages を用いて、静的ページをプライベートで公開することができます。Pages の公開範囲がリポジトリの公開範囲となるので、開発メンバーのみ閲覧可能なページを簡単に作成することが可能です。

今回は、Web APIのドキュメントを表示するためのツールであるSwagger UIを　Github Pagesにデプロイしてみます。

Githubの設定

該当のリポジトリにて、Settings -> Pages と進めていき Pages を設定するのみです。
(GitHub Actionsに設定)

Workflowの作成

該当のリポジトリにて、以下のような ワークフローを作成し、Github Actions で実行できるようにします。
今回のポイントは permissions のセクションで、ここの contents: read　を設定し、 リポジトリのコンテンツに対する読み取り権限を付与しないと、このリポジトリを見つけることができずに、buildが失敗してしまいます。(公開リポジトリの場合は、必要なさそうです）

name: Deploy Swagger UI

on:
  push:
    branches:
      - master
    paths:
      - path/to/swagger.yaml
      - .github/workflows/deploy-swagger-ui.yaml

permissions:
  pages: write
  id-token: write
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Generate Swagger UI
        uses: Legion2/swagger-ui-action@v1.2.0
        with:
          output: swagger-ui
          spec-file: path/to/swagger.yaml
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./swagger-ui

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

まとめ、これから

GitHub Pages　導入前は、s3 にホスティングしたり認証の仕組みを整える必要がありましたが、開発メンバーのみに特化した管理ページ・ツールなどは、簡単にホスティングすることが可能になりました。

Storybook や React の SPA ページも簡単に公開することができそうなので、開発効率を向上できそうなところを見つけて取り組んでいきたいと思います。

※　URLは、ランダムな文字列が設定されていますが、カスタムドメインの設定をすることで任意のドメインを設定することが可能みたいです。