単一ページアプリケーションのホスト
Overview
React、Vue、Angular などの最新のフレームワークで構築された多くの Web アプリケーションは、レンダリングされた各ページをサーバーから取得するのではなく、クライアント側でルーティングとレンダリングを動的に処理する単一ページ アプリケーション（SPA）です。 Atlas App Services を使用して SPA をホストし、それをクライアントに提供できます。
アプリをホストするには、App Services で SPA であることを指定する必要があります。 デフォルトでは、App Services は、指定されたリソース パスでホストされている ファイルを返すか、パスに一致するファイルがない場合は 404 を返すことで、特定のリソースに対するリクエストを処理します。 ただし、SPA は単一の特定の HTML ファイルでレンダリングされるため、リクエストされたリソース パスに関係なく、すべてのリクエストはそのファイルを返す必要があります。
このガイドでは、SPA パターンをサポートするように、すべてのリソース リクエストを単一のファイルにリダイレクトするように App Services ホスティングを構成する方法について説明します。
注意
単一ページアプリの 404 エラー
単一ページ アプリケーション ホスティングが有効になっている場合、要求されたルートに関係なく、App Services は常にアプリ ルートで HTTP 200 応答を返します。 つまり、SPAのカスタム 404 ページを指定することはできません。 代わりに、無効なルートを処理するには、アプリケーションにカスタム コードを含める必要があります。
手順
App Services へのビルド アプリケーションのアップロード
単一ページ アプリケーションは、単一の特定の HTML ファイル（通常は /index.htmlでレンダリングされます）。 ファイルには、アプリケーションをワイヤアップしてレンダリングするために必要な JavaScript コードが含まれている必要があります。これは、 <script>タグにインラインで、または外部ファイルからインポートされた場合です。 また、CDN 経由でアクセスしないリソースもホストする必要があります。
SPA をホストする準備ができたら、アプリケーションのビルドスクリプトを実行し、ビルド フォルダーを App Services にアップロードします。
アプリケーションを提供するための App Services の構成
アプリケーション ファイルのホスティングを開始したら、ルート HTML ファイルを直接リクエストすることで SPA にすぐにアクセスできます。 ただし、ルート ファイル以外のパスに対するリクエストでは 404 が返されます。 これにより、クライアント側の ルーターを使用したり、URL パスに依存している SPA の期待される動作が中断される可能性があります。
すべてのリクエストに対して SPA のルート ページを提供するように Atlas App Services を設定するには、次の手順に従います。
App Services UI の Hostingページに移動し、 Settingsタブをクリックします。
カスタム 404 ページを指定していないことを確認します。 カスタム 404 が有効になっている場合は、ゴミ箱アイコン（ ）が、指定された 404 ページの横に表示されます。
Single Page Applicationの横にある [ Choose File ] をクリックします。 SPA のルート HTML ファイルを選択し、 Selectをクリックします。
[Save] をクリックします。
アプリの最新バージョンを取得する
App Services CLIを使用して単一ページ アプリケーションを構成するには、アプリケーションの構成ファイルのローカル コピーが必要です。
アプリの最新バージョンのローカルコピーを取得するには、次のコマンドを実行します。
appservices pull --remote="<Your App ID>"
Tip
App Services UI のDeploy > Import/Export App画面からアプリケーションの構成ファイルのコピーをダウンロードすることもできます。
ビルド アプリケーション コードを追加する
単一ページ アプリケーションは、単一の特定の HTML ファイル（通常は/index.html ）でレンダリングされます。 ファイルには、アプリケーションをワイヤアップしてレンダリングするために必要な JavaScript コードが含まれている必要があります。これは、 <script>タグにインラインで表示されるか、外部ファイルからインポートされた場合です。 また、CDN 経由でアクセスしないリソースもホストする必要があります。
SPA をホストする準備ができたら、アプリケーションのビルドスクリプトを実行し、出力ビルド フォルダーをアプリケーション ディレクトリの/hosting/filesディレクトリにコピーします。
アプリケーションを提供するための App Services の構成
hosting/config.jsonで、 default_response_codeを200に設定し、 default_error_pathを SPA のルート HTML ファイルのリソース パスに設定します。 終了したら、ファイルを必ず保存してください。
{ "enabled": true, "default_response_code": 200, "default_error_path": "/index.html", }