Angular アプリケーションを Azure Storage Web サイトにデプロイするには、「
フロントエンドアプリケーションの Azure Blob Storage へのデプロイ」で説明されているとおり、 [ アプリケーションをデプロイ ] を使用します。
このドキュメントでは、クラウドインフラストラクチャの準備をする手順を示し、その後デプロイを実行できるようにします。要するに、静的ファイルが存在する Azure Storage アカウントと、
CDN を作成します。
概要:
Azure Blob Storage アカウントで静的 Web サイトの機能を有効にすることで、静的 Web サイトをホストできます。
1. Azure Storage にアクセスするには、Azure のサブスクリプションが必要です。
2. Azure Storage へのアクセスはすべてストレージアカウント経由で行われます。
ストレージアカウントの作成についての説明を参照してください。
最初の手順は、Azure ポータルで静的 Web サイトをホストするようにストレージアカウントを設定することです。静的 Web サイト向けにアカウントを設定する場合、Azure Storage は自動で $web という名前のコンテナを作成します。$web コンテナには、静的 Web サイト用のファイルが含まれます。
静的 Web サイトのホストの設定についての説明を参照してください。
Azure 内でストレージアカウントに移動し、静的 Web サイトのメニューオプションをクリックし、次のように設定します:
- 静的 Web サイト: Enabled
- インデックスドキュメントの名前: index.html
- エラードキュメントのパス: index.html
[ Save ] をクリックします。
ストレージアカウントで静的 Web サイトを有効にしたら、ストレージアカウントに $web というコンテナが含まれます。これは、デプロイメントが Angular のビルドファイルをアップロードするコンテナです。
プロセスの一部として、プライマリエンドポイントも割り当てられます。プライマリエンドポイントは、新しい Web サイトの URL で、次に作成する CDN を設定する際に必要になります。
デプロイ時に [ Storage Account key ] プロパティを入力するために必要となるアクセスキーを取得するには、ストレージアカウントの [ Access Keys ] ペインにアクセスします。
デプロイ時に、配布用フォルダ内のすべてのファイルが $web コンテナにアップロードされます。
すべてが適切に機能していることをテストするには、
プライマリエンドポイントの URL などを使用してアプリケーションにアクセスします。
ただし、静的 Web サイトには制限があるため、
Azure Content Delivery Network (Azure CDN) を使用する必要がある場合があります。
まず、CDN プロファイルと、CDN エンドポイントを定義します。CDN エンドポイントの「オリジンのホスト名」は、既に定義されている Web サイトのエンドポイントと同じである必要があります。
ストレージアカウントを選択し、左側のペインで Azure CDN のメニューオプションにアクセスします。次に、必要なデータを入力し、 [ create ] を選択します。
結果は次のようになります:
Angular アプリケーションはシングル ページ アプリケーション (SPA) であるため、実際のファイルではないパスへのリクエストに対して、アプリのルート index.html ファイルを返す URL リライトルールが必要です。詳細な説明については、
こちらを参照してください。
そのため、CDN エンドポイントの左側のペインにある [ Rules Engine ] オプションにアクセスし、図に示すようなルールを定義します:
詳細については、
Azure のドキュメントを参照してください。
アプリケーションは、CDN エンドポイントの URL を使用してアクセスできます。エンドポイントの概要に戻り、CDN エンドポイントの URL を確認します。ブラウザーに「エンドポイントのホスト名」をコピーします。
HTTPS へのユーザーのリダイレクト
CDN エンドポイントのトラブルシューティング