チュートリアル: JSSアプリケーションをAzureにデプロイする

Version: 22.x
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JSSサイトをAzureにデプロイするには、多くの考慮事項と考えられるトポロジがあります。

このチュートリアルでは、Azure MarketplaceからデプロイされたSitecoreのバージョンを使用して、Azureの統合モードを使用してJSSサイトを立ち上げて実行するための最も簡単な方法について説明します。

本番環境では、JSSアプリのビルド成果物のデプロイは、ソース管理、自動ビルド、テスト、およびファイルのデプロイを活用した自動ビルド設定で行う必要があります。

わかりやすくするために、このチュートリアルでは、FTPSを使用してビルド成果物をデプロイします。

このチュートリアルでは、次の方法について説明します。

  • AzureでSitecoreサーバーを準備する

  • アプリケーションファイルをデプロイします

AzureでSitecoreサーバーを準備する

AzureでSitecoreサーバーを準備するには:

  1. Sitecoreとヘッドレス サービスをプロビジョニングします

  2. SitecoreでのJSSアプリケーションの接続とデプロイの説明に従って、JSSアプリケーションを受け入れるようにSitecoreサーバーを設定しますが、次の違いがあります。

    • Azureでは、構成のデプロイ ステップを手動で実行する必要があります (運用環境では、自動ビルド ステップで実行する必要があります)。たとえば、FTPSクライアントを使用して、JSSアプリの構成を /sitecore/config/* ファイルからAzure Webサイトの /site/wwwroot/app_config/includeフォルダーにデプロイします。

    • アプリのホスト名設定のデフォルト設定は、アプリ名から派生します。たとえば、hostName="jssreactweb".JSSアプリがカスタムhostName設定に依存している場合は、Azureにデプロイする前に、hostName設定をクリアするか、JSSサイトを既定のサイトにするか、hostNameをDNSで解決可能なものに設定してAzure App Serviceインスタンスのカスタム ドメインに登録して、これを変更する必要があります。簡単にするために、まずhostNameをクリアすることから始めます。

    • アプリをAzureにデプロイする場合は、jss deploy appコマンドの代わりに、同じパラメーターでjss deploy itemsを使用します。

アプリケーションファイルをデプロイします

JSSデプロイ サービスではファイルはデプロイされないため、ファイルをApp Serviceインスタンスに個別にデプロイする必要があります。

JSSアプリケーション・ファイルをデプロイするには、次のようにします。

大事な

この手順は、Next.js SDKで構築されたアプリケーションやHTTPレンダリング エンジンを使用する場合は、Sitecoreプラットフォーム ロールでJavaScriptバンドルを実行する必要がないため、必要ありません。

  1. Azure portalから、App Serviceのpublishsettingsファイルをダウンロードし、FTP接続情報を見つけます。例えば:

    RequestResponse
    <publishProfile profileName="sitecorejss-999-single - FTP" 
      publishUrl="ftp://waws-prod-mwh-015.ftp.azurewebsites.windows.net/site/wwwroot" 
      userName="sitecorejss-999-single\$sitecorejss-999-single" 
      userPWD="long random pw here"...
  2. WinSCPなどのFTPSクライアントを使用して、アプリ サービスに接続します。

  3. Web.configファイルを編集します。接続時には、明示的な暗号化を選択する必要があります。

  4. jss buildを使用してJSSアプリをビルドし、その成果物を収集します。

    • Reactアプリの場合、アーティファクトは /buildディレクトリにあります。

    • AngularアプリとVueアプリの場合、アーティファクトは /distディレクトリにあります。

  5. FTPSを使用してJSSアプリのビルド成果物を収集し、JSSアプリのpackage.jsonファイルで構成されているsitecoreDistPath設定に一覧表示されている相対パスの下にあるApp Serviceにデプロイします。たとえば、/dist/<YourAppName>は、ビルド成果物をApp Service上の /site/wwwroot/dist/<YourAppName> にデプロイすることを意味します。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、