コンテンツにスキップ

ドキュメントサイトのセットアップ(管理者向け)

概要

  • ドキュメントサイトの管理画面(Decap CMS)を利用するための初期設定手順
  • 管理者が一度だけ実施すれば、以降は従業員がブラウザから編集可能になる

前提条件

  • GitHub リポジトリ ryuji-s/docs-site へのアクセス権
  • Cloudflare アカウント(Workers を使用)

手順

ステップ1: GitHub OAuth Appを作成

  1. GitHub Developer Settings にアクセス
  2. 「OAuth Apps」→「New OAuth App」をクリック
  3. 以下を入力:
項目
Application name EnRhy Docs CMS
Homepage URL https://doc.enlight-cons.com
Authorization callback URL https://decap-oauth.ryuji-suzuki.workers.dev/callback
  1. 「Register application」をクリック
  2. Client ID をメモ
  3. 「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: 動作確認

  1. https://doc.enlight-cons.com/admin/ にアクセス
  2. 「Login with GitHub」でログインできることを確認
  3. マニュアル一覧が表示され、編集・保存ができることを確認

ステップ4: 従業員にGitHubアクセス権を付与

編集させたい従業員に対して:

  1. 従業員のGitHubアカウントを用意(なければ作成してもらう)
  2. ryuji-s/docs-site リポジトリに Write 権限で招待
  3. ドキュメントサイトの編集方法 を共有

構成図

従業員のブラウザ
  ↓ アクセス
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.ymlbase_url も合わせて変更する
  • 従業員のGitHubアカウントをリポジトリから外せば、その人の編集権限を即座に無効化できる