最適化のフロントエンドホスティングUsinのためにCI/CDパイプラインをセットアップする方法

私が約束したように 前のブログ投稿 Optimizely Frontendホスティングを開始することについて、今日は展開プロセスを自動化する方法を共有することでその約束を提供しています githubアクション。このステップバイステップのチュートリアルでは、プッシュするたびにフロントエンドアプリを自動的に展開するCI/CDパイプラインを設定する方法を紹介します 主要 支店。

前提条件

開始する前に、あなたが持っていることを確認してください：

• 最適化のフロントエンドホスティングセットアップ（環境があります テスト1、 テスト2、 生産1））

  • 覚えておいてください すべてを追加します 必要なenv変数 前に あなたはdeployemntをします

• あなたの最適化 プロジェクトID、 クライアントキー、 そして クライアントの秘密

• PowerShell展開スクリプト（以下を参照）

• プロジェクトコードを備えたgithubリポジトリ

ステップ1：Githubに秘密を追加します

githubリポジトリ→に移動します 設定 → 秘密と変数 → アクション →クリックします 新しいリポジトリの秘密：

ステップ2：PowerShell展開スクリプトを準備します

呼ばれるスクリプトを作成します deploy.ps1 あなたのレポで（例：aの下 スクリプト/ フォルダ）。

# scripts/deploy.ps1

# Validate required environment variables
if (-not $env:OPTI_PROJECT_ID -or -not $env:OPTI_CLIENT_KEY -or -not $env:OPTI_CLIENT_SECRET) {
    Write-Host "Missing required environment variables." -ForegroundColor Red
    exit 1
}

# Install and import EpiCloud module
Install-Module -Name EpiCloud -Scope CurrentUser -Force -ErrorAction SilentlyContinue
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
Import-Module EpiCloud

# Deployment settings
$projectId = $env:OPTI_PROJECT_ID
$clientKey = $env:OPTI_CLIENT_KEY
$clientSecret = $env:OPTI_CLIENT_SECRET
$targetEnvironment = "Test1"

# Paths
$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
$zipName = "optimizely-one-github.head.app.$timestamp.zip"
$zipPath = ".$zipName"

# Create ZIP from current directory excluding ignored files
# (GitHub Actions runners will not include `.git`, so you're safe)
Compress-Archive -Path * -DestinationPath $zipPath

if (-not (Test-Path $zipPath)) {
    Write-Host "Failed to create ZIP file." -ForegroundColor Red
    exit 1
}

# Deploy using EpiCloud
Connect-EpiCloud -ProjectId $projectId -ClientKey $clientKey -ClientSecret $clientSecret
$sasUrl = Get-EpiDeploymentPackageLocation
Add-EpiDeploymentPackage -SasUrl $sasUrl -Path $zipPath

Start-EpiDeployment `
    -DeploymentPackage $zipName `
    -TargetEnvironment $targetEnvironment `
    -Wait

このスクリプトは次のとおりです。

• すべてをリポジトリにジップします

• Optimizelyに認証します

• 選択した環境にパッケージをアップロードして展開します

ステップ3：GitHubアクションワークフローを作成します

でファイルを作成します .github/workflows/deploy.yml リポジトリで：

name: Deploy to Optimizely

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: windows-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup PowerShell
        shell: pwsh
        run: |
          Write-Host "PowerShell ready"

      - name: Run deployment script
        shell: pwsh
        run: ./scripts/deploy.ps1
        env:
          OPTI_PROJECT_ID: ${{ secrets.OPTI_PROJECT_ID }}
          OPTI_CLIENT_KEY: ${{ secrets.OPTI_CLIENT_KEY }}
          OPTI_CLIENT_SECRET: ${{ secrets.OPTI_CLIENT_SECRET }}

ステップ4：テストします

1. あなたをコミットします deploy.ps1 リポジトリへのワークフロー。

2. プッシュします 主要。

3. 行きます github→アクション 展開ワークフローが正常に実行されたかどうかを確認します。

4. を確認してください Optimizely DXPポータル の展開を確認します テスト1 環境。

結果

最終結果を示す2つのスクリーンショットを次に示します。

githubアクション

ワークフローは、PowerShellの展開からの詳細なログで正常に完了しました。

Optimizely PaaSポータル

パッケージを見ることができます optimizely-one-github.head.app.20250702-102756.zip に正常に展開されました テスト1 環境。

結論

わずかなステップで、GitHubアクションを使用してフロントエンドの展開を自動化して最適化しました。このアプローチにより、最新の変更が保証されます 主要 指定された環境に常に展開され、開発者の速度が向上し、手動エラーが減少します。

2025年7月2日