このワークフローに従うには、次のものを用意してください:
- Universal Login と Custom Domain(カスタムドメイン)を構成した Auth0 の開発テナント
- Auth0 の First Party Application
- Auth0 テナントで Identifier First Authentication が有効化されていること
- IAM ロール、S3 バケットの作成と CloudFront の構成ができる権限を持つ AWS アカウント
- カスタムログイン画面を含む GitHub リポジトリ
- 画面アセットバンドルのビルド
- ワークフローは config/deploy_config.yml ファイルを読み込み、どの画面がデプロイ対象としてマークされているかを判断します。
- デプロイ対象が見つかった場合、ワークフローは Vite を使用して ACUL アセットをビルドし、コードを
/distディレクトリにコンパイルします。 - アセットを AWS S3 にアップロード
- ワークフローは OpenID Connect (OIDC) を使用して AWS に対して安全に認証を行います。
/distディレクトリの内容を S3 バケットにアップロードします。
- Auth0 テナントの構成
- ワークフローは M2M アプリケーションと共に Auth0 CLI を使用して、テナント内の画面を構成します。
- config/screen-to-prompt-mapping.js ファイルを使用して、各画面を正しい Auth0 の画面にマッピングします。
- Auth0 の画面カスタマイズ設定を更新し、CloudFront CDN 上のアセットを参照するように設定します。
main ブランチへの git push によって GitHub ワークフローが開始されます。
ACUL の本番デプロイワークフローの完全な例については、GitHub 上の ACUL GITHUB ACTIONS を参照してください。
1. Auth0 の構成
- Auth0 Dashboard > Applications に移動します。
- Create Application を選択します。
- Machine to Machine Applications を選択します。
- Name には、
GitHub ACUL Deploymentなどの分かりやすい名前を入力します。 - Create を選択します。
- Authorize Machine to Machine Application セクションで、Auth0 Management API を選択します。
- 次の権限を選択します:
read:brandingupdate:brandingread:promptsupdate:promptsread:custom_domains
- Authorize を選択します。
- Settings タブに移動し、次の値を控えます:
DomainClient IDClient Secret
2. Amazon Web Services を使ってアセットをアップロードおよび配信する
- AWS S3 バケットを作成します。このバケットをプライベートにするため、すべてのパブリックアクセスをブロックします。このプライベートバケットにアセットを保存します。
- CloudFront ディストリビューションを設定します。この CDN がアセットを安全に配信します。Origin Access Control (OAC) を使用して、S3 バケットを
Originとして利用するように構成する必要があります。
3. GitHub Action 用の AWS IAM ロールを作成する
- この IAM ロールは Web Identity (OIDC) を使用し、
token.actions.githubusercontent.comを信頼する必要があります。 - ロールには、対象の S3 バケットに対する
s3:PutObject、s3:DeleteObject、s3:ListBucket権限を付与するポリシーが必要です。
4. GitHub リポジトリを構成する
- GitHub > Settings に移動します。
- Secrets and Variables を選択し、次に Actions を選択します。
- New repository secret を選択します。
AWS_S3_ARN: 作成した IAM ロールの ARN。S3_BUCKET_NAME: S3 バケットの名前。AWS_REGION: S3 バケットが存在するリージョン。例:us-east-1。S3_CDN_URL: CloudFront ディストリビューションのドメイン名。末尾にスラッシュ/を追加しないでください。例: https://d1234abcdef.cloudfront.net。AUTH0_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 コンテキストデータを定義します。例: ブランディング設定がカスタム画面で利用できるようにします。