次の方法で共有

デプロイおよびランタイム エラーのトラブルシューティング

この記事では、静的 Web アプリのデプロイとその他の問題のトラブルシューティングのためのステップバイステップ ガイドを紹介します。

デプロイ エラー メッセージを取得する

Azure Static Web Apps のデプロイ ワークフローでは、次のコマンドを自動的に実行する Node.js Oryx ビルド プロセスが使用されます。

npm install
npm run build # if specified in package.json
npm run build:azure # if specified in package.json

このプロセスによって生成されたエラーは、GitHub ワークフロー実行に記録されます。 ビルド アクションによって生成されたログを表示するには、次の手順を使用します。

  1. 静的 Web アプリの GitHub リポジトリに移動します。

  2. アクションを選択します。

    Note

    失敗したワークフローの実行は、緑色のチェックマークではなく赤色の X で表示されます。

  3. 検証するワークフロー実行のリンクを選択します。

  4. [Build and Deploy Job] を選択して、デプロイの詳細を開きます。

  5. [Build And Deploy] を選択してログを表示します。

    静的 Web アプリのデプロイ ログのスクリーンショット

  6. ログとエラー メッセージを確認します。

    Note

    一部の警告エラーメッセージは、.oryx_prod_node_modules や ワークスペースに関する注意事項など、赤で表示されている可能性があります。 これらは通常のデプロイ プロセスの一部です。

いずれかのパッケージのインストールに失敗した場合や、その他の問題が発生した場合は、元のエラー メッセージがここに表示されます。

フォルダー構成を確認する

Azure Static Web Apps では、アプリケーションをホストするために使用するフォルダーが認識されている必要があります。 この構成は、ワークフローの最後にビルド プロセスによって確認されます。 エラーは検証ステップ時にログに記録されます。

エラー ログに次のいずれかのエラー メッセージが表示されている場合は、ワークフローのフォルダー構成が正しくないことを示しています。

エラー メッセージ 説明
アプリ ディレクトリの場所: '/folder' は無効です。 このディレクトリを検出できませんでした。 ワークフローにリポジトリ構造が反映されていることを確認します。
アプリのビルドで成果物フォルダー 'folder' を生成できませんでした。 ワークフロー ファイルに folder プロパティが正しく構成されていることを確認します。
API ディレクトリが指定されていないか、指定されたディレクトリが見つかりませんでした。 ワークフローで api フォルダーの値が定義されていないため、Azure Functions は作成されません。

ワークフローには、3 つのフォルダーの場所が指定されています。 デプロイ前に、これらの設定が、プロジェクトと、ソース コードを変換するすべてのツールの両方に一致していることを確認してください。

構成設定 説明
app_location デプロイされるソース コードのルートの場所。 この設定は通常、/ またはプロジェクトの JavaScript と HTML の場所になります。
output_location webpack などのバンドラーから、任意のビルド プロセスによって作成されたフォルダーの名前。 このフォルダーは両方とも、ビルド プロセスによって、app_location の下のサブディレクトリに作成される必要があります
api_location Azure Static Web Apps によってホストされる Azure Functions アプリケーションのルートの場所。 これは、プロジェクトのすべての Azure Functions のルート フォルダー (通常は api) を指します。

Note

正しくない api_location 構成によってエラー メッセージが生成されても、正常にビルドされる可能性があります。Azure Static Web Apps にはサーバーレス コードが必要ないためです。

サーバー エラーを確認する

Application Insights を使用して、ランタイム エラー メッセージを見つけます。 インスタンスをまだ作成していない場合は、「Azure Static Web Apps の監視」を参照してください。 Application Insights では、各エラーによって生成される完全なエラー メッセージとスタック トレースがログに記録されます。

Note

Application Insights のインストール後に生成されたエラー メッセージのみを表示できます。

  1. Azure portal 内で、静的 Web アプリに関連付けられているリソース グループを開きます。

  2. 静的 Web アプリと同じ名前を持つ Application Insights インスタンスを選択します (上記の手順を使用して作成した場合)。

  3. [調査] で、[エラー] を選択します。

  4. 右側の [詳細の表示] まで、下に移動します。

  5. [詳細の表示] の下に、最近失敗した操作の数を示すボタンが表示されます。

    エラー画面のスクリーンショット

  6. [x 個の操作] を選択して、最近失敗した操作を表示するパネルを開きます。

    操作画面のスクリーンショット

  7. 一覧から選択して、エラーを調査します。

    エラーの詳細画面のスクリーンショット

環境変数

多くの Web アプリケーションでは、機密または環境固有の設定を格納するために、環境変数が使用されています。 Azure Static Web Apps では、アプリケーション設定から環境変数がサポートされています。

アプリケーション設定は、アプリケーションの環境変数を設定するキーと値のペアです。 変数は、環境変数へのアクセスに一般的な、同じ構文を使用して、アプリケーションで使用できます。

デプロイ時に、すべての環境変数がアプリケーション設定として設定されていることを再確認します。

  1. Azure portal で静的 Web アプリを開く

  2. [構成] を選択します。 [構成] 画面に、すべてのアプリケーション設定の一覧が表示されます。

    静的 Web アプリの [構成] 画面のスクリーンショット

次の手順に従って、新しい変数を追加します。

  1. [追加] を選択します。

  2. [名前] を設定します。

  3. [値] を設定します。

  4. [OK] を選択します。

  5. [保存] を選択します。

診断レポートを確認する

診断および解決機能を使用すると、問題をトラブルシューティングする手順が案内されます。