---
title: "ウォークスルー:JSSアプリケーションをAzureにデプロイする方法"
slug: "walkthrough--deploying-a-jss-application-to-azure"
abstract: "Azure上のSitecoreインスタンスにJSSアプリケーションをデプロイするための簡易プロセス"
---
# ウォークスルー:JSSアプリケーションをAzureにデプロイする方法

JSSサイトをAzureに展開するには多くの考慮点やトポロジーが関わっています。

このウォークスルーでは、Azure Marketplaceから展開されたバージョンのバージョンを使い、Azureの統合モードを使ってJSSサイトを起動する最も簡単な方法Sitecoreを説明します。

本番環境では、JSSアプリのビルドアーティファクトのデプロイは、ソース管理、自動ビルド、テスト、ファイル展開を活用した自動ビルドセットアップで行う必要があります。

シンプルにするために、このウォークスルーではFTPSを使ってビルドアーティファクトをデプロイします。

このウォークスルーでは、以下の方法を説明します:

-   AzureでSitecoreサーバーを準備してください
-   アプリケーションファイルのデプロイ

## AzureでSitecoreサーバーを準備してください

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

1.  [Sitecoreおよびヘッドレスサービスの提供](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/install-headless-services-as-a-web-deploy-package-on-azure.html "Install Headless Services as a Web Deploy Package on Azure")。
2.  SitecoreサーバーをSitecoreでJSSアプリケーションを接続・展開するために、説明通りJSSアプリケーションを受け入れるよう設定します。以下の違いがあります。
    -   Azureの場合、設定展開ステップは手動で行う必要があります(本番環境では自動化ビルドステップで実行されます)。例えば、FTPSクライアントを使って /sitecore/config/\* ファイルのJSSアプリ設定を /site/wwwroot/app\_config/include フォルダ内のAzureウェブサイトにデプロイします。
    -   アプリのホスト名設定のデフォルト設定は、アプリ名から派生します。例えば hostName="jssreactweb"。JSSアプリがカスタム hostName 設定に依存している場合、 hostName 設定をクリアするか、JSSサイトをデフォルトサイトにするか、 hostName をDNSで解決可能なものに設定し、Azure App Serviceインスタンスのカスタムドメインに登録するなど、Azureにデプロイする前にこれを変更する必要があります。簡単のために、まず hostNameをクリアすることから始めてください。
    -   アプリをAzureにデプロイする際は、 jss deploy app コマンドの代わりに同じパラメータで jss deploy items を使います。

## アプリケーションファイルのデプロイ

JSSデプロイメントサービスはファイルをデプロイしません。ファイルは別々にApp Serviceインスタンスにデプロイする必要があります。

JSSアプリケーションファイルを展開するには:

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

1.  AzureポータルからApp Serviceのpublishsettingsファイルをダウンロードし、FTP接続情報を見つけてください。例えば:
    
    <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.  JSSアプリのビルドアーティファクトをFTPSで収集し、JSSアプリのsitecoreDistPathpackage.jsonファイルに設定された相関パスに従って、FTPSでApp Serviceにデプロイします。例えば、/dist/<YourAppName>はビルドアーティファクトをApp Service上で/site/wwwroot/dist/<YourAppName>にデプロイすることを意味します。