このワークフローには、以下が必要です。
- ユニバーサルログインとカスタムドメインが構成されたAuth0開発テナント。
- Auth0のファーストパーティアプリケーション。
- Auth0テナントでIdentifier First認証が有効になっていること。
- IAMロールとS3バケットを作成し、CloudFrontを構成する権限を持つAWSアカウント。
- カスタムログイン画面を含むGitHubリポジトリ。
- 画面アセットバンドルをビルド
- ワークフローはconfig/deploy_config.ymlファイルを読み取り、デプロイメントの対象としてマークされている画面を特定します。
- デプロイメントの対象が見つかった場合、ワークフローはViteを使用してコードを
/distディレクトリに出力することで、ACULアセットをビルドします。
- アセットをAWS S3にアップロード
- ワークフローはOpenID Connect (OIDC)を使用してAWSで安全に認証します。
/distディレクトリの内容をS3バケットにアップロードします。
- Auth0テナントを構成
- ワークフローは、Auth0 CLIとM2Mアプリケーションを使用して、テナント内の画面を構成します。
- config/screen-to-prompt-mapping.jsファイルを使用して、各画面を適切なAuth0画面にマッピングします。
- CloudFront CDNのアセットを参照するように、Auth0画面のカスタマイズ設定を更新します。
mainブランチへのgit pushによってGitHubワークフローが開始されます。
ACUL本番環境デプロイメントワークフロー例の全体像については、Githubの「[ACUL GITHUB ACTIONS]」(https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/GITHUB_ACTIONS.md)をご覧ください。
1. Auth0を構成する
マシンツーマシンアプリケーションを作成し、テナント設定を更新する権限をGitHubワークフローに付与します。- [Auth0 Dashboard]>[アプリケーション]に移動します。
- **[アプリケーションの作成]**を選択します。
- **[マシンツーマシンアプリケーション]**を選択します。
- **[名前]**にわかりやすい名前を追加します。例:
GitHub ACUL Deployment。 - **[作成]**を選択します。
- **[マシンツーマシンアプリケーションの認可]で、[Auth0 Management API]**を選択します。
- 次に挙げる権限を選択します。
read:brandingupdate:brandingread:promptsupdate:promptsread:custom_domains
- **[認可]**を選択します。
- **[設定]**タブに移動して、次の内容を書き留めます。
DomainClient IDClient Secret
2. Amazon Web Servicesでアセットをアップロードして提供する
アセットをアップロードして提供するには、AWS S3バケットが必要であり、CloudFrontをCDNとして設定する必要があります。- AWS S3バケットを作成します。パブリックアクセスをすべてブロックして、このバケットをプライベートにします。このプライベートバケットにアセットを保存します。
- CloudFrontディストリビューションを設定します。このCDNはアセットを安全に提供します。オリジンアクセスコントロール(OAC)を使用して、S3バケットを
Originとして使用するように設定する必要があります。
3. GitHub Action用のAWS IAMロールを作成する
AWSでIAMロールを作成し、AWS S3にファイルをアップロードする権限をGitHub Actionsに付与します。- このIAMロールは、Webアイデンティティ(OIDC)を使用し、
token.actions.githubusercontent.comを信頼する必要があります。 - このロールには、S3バケットに対する
s3:PutObject、s3:DeleteObject、s3:ListBucketの権限を付与するポリシーが必要です。
4. GitHubリポジトリを構成する
次の手順でGitHubリポジトリを構成します。- **[GitHub]>[設定]**に移動します。
- **[シークレットと変数]を選択し、[アクション]**を選択します。
- **[新しいリポジトリシークレット]**を選択します。
AWS_S3_ARN:作成したIAMロールのARN。S3_BUCKET_NAME:S3バケットの名前。AWS_REGION:S3バケットが配置されているリージョン。例:us-east-1S3_CDN_URL:CloudFrontディストリビューションのドメイン名。末尾にスラッシュをつけないでください。例:https://d1234abcdef.cloudfront.netAUTH0_DOMAIN:Auth0テナントドメイン。AUTH0_CLIENT_ID:M2MアプリケーションのクライアントID。AUTH0_CLIENT_SECRET:M2Mアプリケーションのクライアントシークレット。
5. デプロイメントを構成する
.github/config/ディレクトリにある構成ファイルを編集することで、どの画面をデプロイするかを制御できます。
config/deploy_config.yml:メインコントロールパネルです。デプロイする画面はtrueに設定し、スキップする画面はfalseに設定します。config/screen-to-prompt-mapping.js:内部画面ディレクトリ名をマッピングします。例:mfa-sms-challengeを公式Auth0プロンプト名mfa-smsにマッピングします。config/context-configuration.js:Auth0コンテキストデータを定義します。例:ブランディング設定はカスタム画面で利用可能にする必要があります。