日本語版
最新ニュース
企業

Optimizely Frontendホスティングへの展開：実用的なガイド

Optimizely Frontendホスティング ヘッドレスフロントエンドアプリケーションを展開するためのクラウドベースのソリューションです - 現在のみサポートしています next.js プロジェクト。その展開プロセスとコアコンセプトは、協力してきた.NET開発者に馴染みがあります Optimizely DXP：コードは管理されたパイプラインを介して展開され、環境のセットアップは完全にOptimizelyによって処理されます。 箱から出して、Optimizely Frontendホスティングにはaが含まれます Webアプリケーションファイアウォール（WAF） そして CDN 搭載 CloudFlare、静的に生成されたnext.jsコンテンツが高性能とセキュリティでグローバルに配信されるようにします - 追加の構成は必要ありません。 重要な特性 next.jsサポートのみ （今のところ） 管理された環境 SaaS CMSのtest1、test2、および生産のように 自動CDNおよびWAF構成 静的サイトホスティング カスタマイズ機能は現在限られていることに注意してください。高度な機能またはカスタム構成（例えば、キャッシュヘッダー、リダイレクト、カスタムドメインなどの設定）については、連絡することをお勧めします オプティマイズサポート。 VercelなどのFrontend専門のプラットフォームと比較して、Optimizely Frontendホスティングは、フル機能の開発者プラットフォームを提供することを目指していません。代わりに、それはaを提供します 安定した統合ソリューション すでにOptimizely Stackを使用しているチームのために、 フロントエンドアプリケーションをホストするための信頼性の高いサポート方法 CMSおよびバックエンドインフラストラクチャと並んで。 これにより、エンタープライズユースケースに最適です ベンダーの統合、 統一をサポートします、…

執筆 nipponese
Optimizely Frontendホスティングへの展開：実用的なガイド

1752420167
2025-06-25 12:49:00

Optimizely Frontendホスティング ヘッドレスフロントエンドアプリケーションを展開するためのクラウドベースのソリューションです – 現在のみサポートしています next.js プロジェクト。その展開プロセスとコアコンセプトは、協力してきた.NET開発者に馴染みがあります Optimizely DXP：コードは管理されたパイプラインを介して展開され、環境のセットアップは完全にOptimizelyによって処理されます。

箱から出して、Optimizely Frontendホスティングにはaが含まれます Webアプリケーションファイアウォール（WAF） そして CDN 搭載 CloudFlare、静的に生成されたnext.jsコンテンツが高性能とセキュリティでグローバルに配信されるようにします – 追加の構成は必要ありません。

重要な特性

  • next.jsサポートのみ （今のところ）

  • 管理された環境 SaaS CMSのtest1、test2、および生産のように

  • 自動CDNおよびWAF構成

  • 静的サイトホスティング

カスタマイズ機能は現在限られていることに注意してください。高度な機能またはカスタム構成（例えば、キャッシュヘッダー、リダイレクト、カスタムドメインなどの設定）については、連絡することをお勧めします オプティマイズサポート。

VercelなどのFrontend専門のプラットフォームと比較して、Optimizely Frontendホスティングは、フル機能の開発者プラットフォームを提供することを目指していません。代わりに、それはaを提供します 安定した統合ソリューション すでにOptimizely Stackを使用しているチームのために、 フロントエンドアプリケーションをホストするための信頼性の高いサポート方法 CMSおよびバックエンドインフラストラクチャと並んで。

これにより、エンタープライズユースケースに最適です ベンダーの統合、 統一をサポートします、 そして 環境制御 優先事項です。

exaction実際に展開

典型的な展開の見た目は次のとおりです。

段階的なマニュアルの展開（最初に推奨）：

  1. Powershellを開きます

  2. Epicloudモジュールをインストールしてインポートします。

    Install-Module -Name EpiCloud -Scope CurrentUser -Force
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Import-Module EpiCloud

  3. 資格情報と環境を設定します。

    $projectId = ""
$clientKey = ""
$clientSecret = ""
$targetEnvironment = "Test1"  # Or "Production" Or "Test2"

  4. next.jsアプリケーションをzipします
    名前形式：

    .head.app..zip

    例： optimizely-one.head.app.20250610.zip

    if。head.app。 ファイル名ではなく、展開システムは代わりに.NET Nugetパッケージとして扱います。

  5. Epicloudに接続して、SAS URLを取得します。

    Connect-EpiCloud -ProjectId $projectId -ClientKey $clientKey -ClientSecret $clientSecret
$sasUrl = Get-EpiDeploymentPackageLocation

  6. 展開パッケージをアップロードします。

    Add-EpiDeploymentPackage -SasUrl $sasUrl -Path .optimizely-one.head.app.20250610.zip

  7. トリガー展開：

    Start-EpiDeployment `
  -DeploymentPackage "optimizely-one.head.app.20250610.zip" `
  -TargetEnvironment $targetEnvironment `
  -DirectDeploy `
  -Wait `
  -Verbose

展開を自動化します

手動の手順を理解したら、以下のようなPowerShellスクリプトを使用して展開プロセスを完全に自動化できます。このアプローチは、再現性を保証し、展開をCI/CDパイプラインに統合するのに役立ちます。

💡それはそうです 手動でいくつかの展開を実行することを強くお勧めします 自動化する前に、自信と理解を構築します。これは、問題を診断したり、フローをカスタマイズするときに役立ちます。

1。.Zipignoreサポート

不要なファイルを展開zipパッケージにバンドすることを避けるために、スクリプトはaをサポートします。Zipignore ファイル（に似ています .gitignore）。このファイルをアプリのルートディレクトリに配置します（$ sourcePath）そして、パスまたはフォルダーをリストします 除外します アーカイブから。

例.zipignore：

.next
node_modules
.env
.git
.DS_Store
.vscode

フィルタリング後にファイルが残っていない場合 .Zipignore、スクリプトはエラーで終了します。

2。プロジェクトのスクリプトをカスタマイズする方法

調整する必要があります 2つの重要な値 スクリプト：

  1. next.jsアプリへのパス：

    $sourcePath = "C:WorkspacePersonaloptimizely-one"

    これをプロジェクトへの実際のパスに置き換えてください。

  2. ターゲット展開環境：

    $targetEnvironment = "Test1"

    設定します $ targetEnvironment Optimizelyプロジェクトで構成された環境に一致する変数。

    • SaaSフロントエンドホスティングの場合： 「test1」、「test2」、「生産」など、事前に定義された環境名の1つを使用します。

    • 従来のPAASホスティングの場合： 標準のオプティマイズリー環境名のいずれかを使用します：「統合」、「前導入」、または「生産」

    使用する名前が、Optimizelyプロジェクトポータルで定義されているものと正確に一致することを確認してください。

3。必要な環境変数

スクリプトを実行する前に、次のことを定義する必要があります 環境変数：

  • opti_project_id
  • opti_client_key
  • opti_client_secret

これらをで見つけることができます APIセクション の Optimizely Paasポータル フロントエンドプロジェクト用。

PowerShellで一時的に設定するには：

$env:OPTI_PROJECT_ID = ""
$env:OPTI_CLIENT_KEY = ""
$env:OPTI_CLIENT_SECRET = ""

または、システム環境変数に永久に追加することができます。

4.スクリプトの実行方法

  1. 開ける Powershell。

  2. 以下のスクリプトをaに保存します .ps1 ファイル、例 deploy-optimizely.ps1

  3. 必要な環境変数を設定します（上記参照）。

  4. スクリプトを実行します：

    .deploy-optimizely.ps1

5。PowerShell展開スクリプト（コメント付き）

# Check required environment variables
if (-not $env:OPTI_PROJECT_ID -or -not $env:OPTI_CLIENT_KEY -or -not $env:OPTI_CLIENT_SECRET) {
    Write-Host "Missing one or more required environment variables: OPTI_PROJECT_ID, OPTI_CLIENT_KEY, OPTI_CLIENT_SECRET" -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

# Settings
$projectId = $env:OPTI_PROJECT_ID
$clientKey = $env:OPTI_CLIENT_KEY
$clientSecret = $env:OPTI_CLIENT_SECRET
$targetEnvironment = "Test1"  # Change to Production, Test2, etc. as needed

# Path to the root of your Next.js app
$sourcePath = "C:WorkspacePersonaloptimizely-one"  #

⚠️私の間違いを繰り返さないでください

私自身の経験に基づいて、アプリケーションを展開するときに避けるべき一般的な落とし穴が最適化されます。

  1. PAASポータルにすべての環境変数を常に設定してください 前に 展開を開始します。
    最初に展開を起動し、環境変数が欠落していることに気付くという間違いを犯しました。これにより、展開プロセスが生産ビルドコマンドをすぐにトリガーするため、生産ビルドが失敗しました。必要な環境変数へのアクセスがなければ、ビルドは破損し、環境はしばらくロックされたままになります。
    👉 最初に変数を設定してから、展開します。

  2. Windowsで「zipに送信」の使用を避けてください。
    このメソッドは、ファイルを追加のフォルダー内にラップするため、パッケージは最適にホスティングのために無効になります。プラットフォームは、次のようなファイルを見つけることを期待しています package.json zipのルートでは、ネストされたフォルダーを深く掘り下げることはありません。

  3. zipに必要なすべてのファイルが含まれていることを確認してください。
    next.jsのようなフレームワークを使用する場合、ルーティングはルートグループのような特別なフォルダー構造を介して処理されることがよくあります （下書き） または動的ルート 記事/[slug]。自動化スクリプトを使用する場合、場合によってはそのようなファイルがあります page.tsx 正しくコピーされないでください。アップロードする前に、zipコンテンツを再確認します。

  4. 必要なZIPネーミング条約に従ってください。
    形式を使用します： .head.app。。ジップ

  5. zipにnode_modulesや.nextフォルダーを含めないでください。
    これらは展開には不要であり、ファイルサイズが大幅に増加し、アップロードプロセスが遅くなります。

結果：

上記の手順を完了すると、展開プロセスが開始されます。通常、完了するまでに数分かかります。

展開ステータスを直接監視できます Optimizely Adminパネル、以下のスクリーンショットに示すように：

展開が正常に終了すると、アプリケーションはライブで使用できます。ステータスは、展開が成功したことを示し、すべてがスムーズに進んだことを確認します。

近日公開：Github CI/CD統合

近い将来、私は方法を示すガイドを公開します この展開フローをGitHubアクションと統合します、Mergeを最適化するフロントエンドホスティングに自動展開を可能にする 主要 支店。

乞うご期待！

2025年6月25日

#Optimizely #Frontendホスティングへの展開実用的なガイド

執筆者について: nipponese

Nipponese News編集部は、国内外のニュースを日本語で分かりやすくお届けします。

Nipponese News