最近プライベートなドキュメントを開発メンバーが見るのにこれはまぁ便利だと思う方法を２つ知ったり試したりしたのでメモしておく。
ここでいう「プライベートなドキュメント」は、Gitリポジトリで管理しているリソースをHTMLにレンダリングして閲覧する類のもの*1を指している。
例えばOpenAPI仕様のYAMLをHTMLにレンダリングしたり、ReactのStorybookを静的に発行したものだったりだ。
２つぽっちの方法なのは差し当たってやりたいことをその２つで出来ていて満足しているから。
要件
- メンバーからのアクセスのみに制限を行える
- お金がそれほどかからない
- 運用が平易
この辺りを満たしていないとそもそも使えなかったり、試す心理的障壁が高かったり、面倒くさかったりする。
GitHub Pages
ただし組織で金を払っている場合に限る。
GitHub Pages サイトの可視性を変更する - GitHub Docs
GitHub Pagesサイトのアクセス制御は、GitHub Enterprise Cloudのプライベートリポジトリで利用できます。
この条件を満たしており、かつメインブランチのドキュメントさえ見られれば良いのならGitHub Pagesは運用も認証も非常に平易で便利だ。
リポジトリの Settings -> Pages で GitHub Pages visibility を Private に設定したら、後は通常通りPagesにドキュメントを公開すればよい。
GitHubだけでWebサービスを開発運用できる世界？ - koudenpaのブログ でも触れている。
Azure Static Web Apps
Azure Static Web Apps はAzure上で静的なリソースをホスティングできるサービスなのだけれど、いい感じに要件を満たしている。
GitHub Pagesにはない大きな特徴として、GitHub上でPull Requestを作成すると、そのPRの動作確認環境がデプロイされる機能が標準装備されている点がある。
これが便利な場面はWebアプリケーションの運用ならずともあるはずだ。
例えば「ReactのStorybookを作っていて、PRのDescriptionでの確認法に「Storybookで動くこと」のような事が書いてある場合に、自分のマシンにブランチをチェックアウトしてビルドして確認するのが面倒くせぇなぁ、PRから確認できる環境にリンクされてないかなぁ」というような場面だ。
要件に対しての対応をざっくり挙げるとこんな感じ。おすすめ！
- メンバーからのアクセスのみに制限を行える
- Freeでいくつかの認証プロバイダを使える
- Standardでアクセス元IPアドレスでの制限や追加の認証プロバイダを使える
- お金がそれほどかからない
- Free（0円）もしくはStandard（1000円/月少々）
- Freeだと動作確認環境が3つ、Standardなら10つ
- 運用が平易
体験
個人的には便利。
他のメンバーからは「便利ではあるけれど、PRにPushするといちいち確認環境のURLがコメントされてうぜぇ」という声が強い。
なかなか難しい。
ワークフロー抜粋
大体こんな感じでデプロイしている。
指定できるオプションは Azure/static-web-apps-deployのaction.yml を眺めている
build_and_deploy_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: '12' cache: 'yarn' - name: Setup yarn run: yarn install - name: Build Storybook run: yarn workspace storybook build-storybook -o ./storybook-static-web-apps/.publish - name: Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: "/packages/storybook/storybook-static-web-apps/.publish" config_file_location: "packages/storybook/storybook-static-web-apps" skip_app_build: true
storybook-static-web-apps ディレクトリはStatic Web Apps周りの設定とかを放り込んでおくために掘ったものなので、別に掘らなくてもいい。
config_file_location に staticwebapp.config.json を置いておくとその設定が使われる。アクセス制限などの設定をする。
アクセス元のIPアドレスで制限できるならかなり平易に設定できる*2。
{ "networking": { "allowedIpRanges": [ "10.0.0.0/24" ] } }
まとめ
最近は簡単かつ安価でドキュメントをホスティング出来て便利だ。
