メインコンテンツへスキップ
このワークフローに従うには、次のものを用意してください:
本番環境向けの ACUL デプロイワークフローは、ACUL 画面をビルドおよびデプロイし、それらを使用するようにテナントを設定します。GitHub Actions を使用して次の処理を行います。
  • 画面アセットバンドルのビルド
    • ワークフローは 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 の構成

GitHub のワークフローにテナント設定を更新する権限を付与するために、マシン間 (Machine-to-Machine) アプリケーションを作成します。
  1. Auth0 Dashboard > Applications に移動します。
  2. Create Application を選択します。
  3. Machine to Machine Applications を選択します。
  4. Name には、GitHub ACUL Deployment などの分かりやすい名前を入力します。
  5. Create を選択します。
  6. Authorize Machine to Machine Application セクションで、Auth0 Management API を選択します。
  7. 次の権限を選択します:
    • read:branding
    • update:branding
    • read:prompts
    • update:prompts
    • read:custom_domains
  8. Authorize を選択します。
  9. Settings タブに移動し、次の値を控えます:
    • Domain
    • Client ID
    • Client Secret

2. Amazon Web Services を使ってアセットをアップロードおよび配信する

アセットをアップロードして配信するには、AWS S3 バケットを用意し、CloudFront を CDN として設定する必要があります。
  • AWS S3 バケットを作成します。このバケットをプライベートにするため、すべてのパブリックアクセスをブロックします。このプライベートバケットにアセットを保存します。
  • CloudFront ディストリビューションを設定します。この CDN がアセットを安全に配信します。Origin Access Control (OAC) を使用して、S3 バケットを Origin として利用するように構成する必要があります。

3. GitHub Action 用の AWS IAM ロールを作成する

GitHub Actions に AWS S3 にファイルをアップロードする権限を付与するために、AWS で IAM ロール を作成します。
  • この IAM ロールは Web Identity (OIDC) を使用し、token.actions.githubusercontent.com を信頼する必要があります。
  • ロールには、対象の S3 バケットに対する s3:PutObjects3:DeleteObjects3:ListBucket 権限を付与するポリシーが必要です。

4. GitHub リポジトリを構成する

GitHub リポジトリを構成するには、次の手順を実行します。
  1. GitHub > Settings に移動します。
  2. Secrets and Variables を選択し、次に Actions を選択します。
  3. 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 コンテキストデータを定義します。例: ブランディング設定がカスタム画面で利用できるようにします。