ドキュメントサイトのセットアップ(管理者向け)¶
概要¶
- ドキュメントサイトの管理画面(Decap CMS)を利用するための初期設定手順
- 管理者が一度だけ実施すれば、以降は従業員がブラウザから編集可能になる
前提条件¶
- GitHub リポジトリ
ryuji-s/docs-siteへのアクセス権 - Cloudflare アカウント(Workers を使用)
手順¶
ステップ1: GitHub OAuth Appを作成¶
- GitHub Developer Settings にアクセス
- 「OAuth Apps」→「New OAuth App」をクリック
- 以下を入力:
| 項目 | 値 |
|---|---|
| Application name | EnRhy Docs CMS |
| Homepage URL | https://doc.enlight-cons.com |
| Authorization callback URL | https://decap-oauth.ryuji-suzuki.workers.dev/callback |
- 「Register application」をクリック
- Client ID をメモ
- 「Generate a new client secret」で Client Secret を生成してメモ
ステップ2: Cloudflare WorkerにOAuthプロキシをデプロイ¶
プロジェクトルートの oauth-worker/ ディレクトリで以下を実行:
cd oauth-worker
# Client IDを設定
npx wrangler@latest secret put GITHUB_CLIENT_ID
# → プロンプトでClient IDを入力
# Client Secretを設定
npx wrangler@latest secret put GITHUB_CLIENT_SECRET
# → プロンプトでClient Secretを入力
# デプロイ
npx wrangler@latest deploy
デプロイ後、https://decap-oauth.ryuji-suzuki.workers.dev/auth にアクセスしてGitHubの認証画面にリダイレクトされればOK。
ステップ3: 動作確認¶
https://doc.enlight-cons.com/admin/にアクセス- 「Login with GitHub」でログインできることを確認
- マニュアル一覧が表示され、編集・保存ができることを確認
ステップ4: 従業員にGitHubアクセス権を付与¶
編集させたい従業員に対して:
- 従業員のGitHubアカウントを用意(なければ作成してもらう)
ryuji-s/docs-siteリポジトリに Write 権限で招待- ドキュメントサイトの編集方法 を共有
構成図¶
従業員のブラウザ
↓ アクセス
doc.enlight-cons.com/admin/ (Decap CMS管理画面)
↓ ログイン
decap-oauth.ryuji-suzuki.workers.dev (OAuth Worker)
↓ 認証
GitHub OAuth
↓ 編集・保存
GitHub リポジトリ (ryuji-s/docs-site)
↓ 自動デプロイ
Cloudflare Pages → doc.enlight-cons.com
注意事項¶
- GitHub OAuth Appの Client Secret は外部に漏らさないこと
- Workerの名前(
decap-oauth)を変更した場合は、OAuth Appのcallback URLとadmin/config.ymlのbase_urlも合わせて変更する - 従業員のGitHubアカウントをリポジトリから外せば、その人の編集権限を即座に無効化できる