アプリを Azure Functions と Azure Container Apps にデプロイする

Von Bedeutung

このチュートリアルに記載されている前提条件に加えて、この演習を完了するには、コンピューターに次のツールをインストールする必要もあります。

• Azure CLI
• VS Code を使用している場合は、Azure Functions 拡張機能をインストールします

この演習では、前の演習で説明した Microsoft Graph 関数と ACS 関数を Azure Functions にデプロイする方法について説明します。 また、コンテナー イメージをビルドし、Azure Container Apps にデプロイします。

Azure Functions へのデプロイ

C#

注

このセクションでは、 Visual Studio を使用して C# 関数を Azure に発行します。 Visual Studio Code を使用する場合は、「Visual Studio Code を使用して Azure で C# 関数を作成する」クイック スタートの手順に従うことができます。

1. Visual Studio で samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln プロジェクトを開きます。

2. GraphACSFunctions プロジェクトを右クリックし、[発行] を選択します。

3. ターゲット セクションで Azure を選択し、[ 次へ] をクリックします。

4. Azure Function App (Windows) を選択し、[次へ] をクリックします。

5. サブスクリプションを選択し、[ + 新規作成] を選択します。

6. 次の情報を入力してください。

   • 関数名: グローバルに一意の名前が必要です。 例: acsFunctions<YOUR_LAST_NAME>。
   • サブスクリプション: サブスクリプションを選択します。
   • リソース グループ: このチュートリアルで先ほど作成したリソース グループを選択するか、新しいリソース グループを作成することもできます。
   • ホスティング プラン: 従量課金プラン。
   • 場所: デプロイ先のリージョンを選択します。
   • Azure Storage: 新しいストレージを作成します。 (既存のストレージ アカウントを選択することもできます)。
   • Azure Insights: 新しい分析情報を作成します。 (既存のストレージ アカウントを選択することもできます)。

   注

   グローバルに一意の名前が必要です。 名前の末尾に番号または姓を追加することで、名前をより一意にすることができます。

7. Azure Function App が作成されると、確認画面が表示されます。 [ パッケージから実行 ] オプションが選択されていることを確認し、[ 完了] を選択します。

8. [ 発行] を選択して関数を Azure にデプロイします。

9. 関数が Azure にデプロイされたら、Azure portal に移動し、作成した関数アプリを選択します。

10. デプロイした関数の URL をコピーします。 この値は、この演習の後半で使用します。

11. 左側のメニューで [設定] --> [構成] を選択します。

12. [ + 新しいアプリケーション設定 ] ボタンを選択し、[ アプリケーション設定] に次のキーと値を追加します。 これらの値は、local.settings.json プロジェクトのGraphACSFunctionsから取得できます。

    # Retrieve these values from local.settings.json
    TENANT_ID: <YOUR_VALUE>
    CLIENT_ID: <YOUR_VALUE>
    CLIENT_SECRET: <YOUR_VALUE>
    USER_ID: <YOUR_VALUE>
    ACS_CONNECTION_STRING: <YOUR_VALUE>
    

13. [ 保存 ] ボタンを選択して設定を保存します。

14. 最後に、関数アプリの CORS (クロスオリジン リソース共有) を有効にして、関数アプリの API にドメインの外部からアクセスできるようにする必要があります。 左側のメニューで [設定] --> CORS を選択します。

15. [*] ボックスに「 (任意のドメインからアクセス可能)」と入力し、[保存] ボタンを選択します。

TypeScript

VS Code を使用して関数コードを Azure Functions にデプロイすることから始めましょう。

1. サーバー/typescript プロジェクト フォルダーを開きます。

2. 既に npm install を実行し、プロジェクト ルートに node_modules フォルダーが表示されている必要があります。 そうでない場合は、コマンド ウィンドウを開き、 npm install を実行して依存関係をインストールします。

3. VS Code コマンド パレットを開きます (Mac では Shift + Cmd + P | Windows の場合は Shift + Ctrl + P ) を押し、[ Azure Functions: Azure で関数アプリを作成する] を選択します。

   

   注

   このオプションが表示されない場合は、VS Code に Azure Functions 拡張機能がインストール されていることを確認してください。

4. 次の情報を入力するように求められます。

   • Azure サブスクリプション名。
   • 関数名: acsFunctions<YOUR_LAST_NAME>。

   注

   グローバルに一意の名前が必要です。 名前の末尾に番号または姓を追加することで、名前をより一意にすることができます。

   • ランタイム スタック - 最新 のNode.js LTS バージョンを選択します。
   • リージョン (任意のリージョンを選択)。

5. Azure Function App が作成されると、詳細の表示に関するメッセージが表示されます。

6. VS Code のコマンド パレットに戻り、[ Azure Functions: Function App にデプロイ] を選択します。 サブスクリプションと、前に作成した関数アプリ名を選択するように求められます。

7. 関数が Azure にデプロイされたら、次の操作を行います。

   • VS Code で Azure 拡張機能を選択します (サイドバーの Azure アイコンをクリックします)。
   • ご自分のサブスクリプションを展開します。
   • 関数アプリを拡張してください。
   • 関数を右クリックし、[ Web サイトの参照] を選択します。 続行する前に、関数アプリが正しく動作していることを確認します。

8. Azure 関数ドメインをローカル ファイルにコピーします。 この値は、この演習の後半で使用します。

Azure Container Apps へのデプロイ

1. 最初に実行するタスクは、新しい Azure Container Registry (ACR) リソースを作成することです。 レジストリが作成されたら、イメージをビルドしてレジストリにプッシュします。

2. コマンド ウィンドウを開き、次のコマンドを実行して Azure サブスクリプションにログインします。

   az login
   

3. プレースホルダーの値を適宜置き換えて、次のシェル変数を追加します。 <GITHUB_USERNAME>を小文字として追加し、Azure Functions ドメインの<AZURE_FUNCTIONS_DOMAIN>値に置き換えます (ドメイン値にhttps://を含めます)。

   バッシュ

   GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
   RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
   ACR_NAME="aca"$GITHUB_USERNAME
   AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"
   

   PowerShell

   $GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
   $RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
   $ACR_NAME="aca"+$GITHUB_USERNAME
   $AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"
   

4. 次のコマンドを実行して、新しい Azure Container Registry リソースを作成します。

   バッシュ

   az acr create \
       --resource-group $RESOURCE_GROUP \
       --name $ACR_NAME \
       --sku Basic \
       --admin-enabled true
   

   PowerShell

   az acr create `
       --resource-group $RESOURCE_GROUP `
       --name $ACR_NAME `
       --sku Basic `
       --admin-enabled true
   

5. エディターで クライアント/react/Dockerfile ファイルを開き、次のタスクが実行されていることを確認します。

   • React アプリケーションがビルドされ、 ビルド ステージに割り当てられます。
   • nginx サーバーが構成され、 ビルド ステージの出力が nginx サーバー イメージにコピーされます。

6. クライアント/react フォルダーのルートから次のコマンドを実行して、Azure でコンテナー イメージをビルドします。 <YOUR_FUNCTIONS_DOMAIN>は、この演習の前半でローカル ファイルにコピーした Azure Functions ドメインに置き換えます。

   バッシュ

   az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
     --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
     --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .
   

   PowerShell

   az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
     --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
     --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .
   

7. 次のコマンドを実行して、レジストリ内のイメージを一覧表示します。 新しいイメージが一覧表示されます。

   az acr repository list --name $ACR_NAME --output table
   

8. イメージがデプロイされたので、コンテナーを実行できる Azure Container App を作成する必要があります。

9. ブラウザーで Azure portal にアクセスし、サインインします。

10. 上部の検索バーに コンテナー アプリ を入力し、表示されるオプションから [コンテナー アプリ ] を選択します。

11. ツール バーの [ 作成 ] を選択します。

    注

    Azure portal を使用していますが、Azure CLI を使用してコンテナー アプリを作成することもできます。 詳細については、「 クイック スタート: 最初のコンテナー アプリをデプロイする」を参照してください。 この演習の最後に Azure CLI を使用する方法の例も示します。

12. 次のタスクを実行します。

    • サブスクリプションを選択します。
    • 使用するリソース グループを選択します (必要に応じて新しいリソース グループを作成します)。 必要に応じて、ACS リソースに使用したのと同じリソース グループを使用できます。 リソース グループ名を、Azure Functions ドメインを保存したのと同じローカル ファイルにコピーします。
    • acs-to-teams-meeting のコンテナー アプリ名を入力します。
    • リージョンを選択します。
    • [Container Apps Environment] セクションで [新規作成] を選択します。
    • acs-to-teams-meeting-env の環境名を入力します。
    • [作成] ボタンを選択します。
    • [ 次へ: アプリ設定] >を選択します。

13. [コンテナー アプリの作成] 画面で、次の値を入力します。

    • [ クイック スタート画像を使用 する] チェックボックスの選択を解除します。
    • 名前: acs-to-teams-meeting
    • イメージ ソース: Azure Container Registry
    • レジストリ: <YOUR_ACR_REGISTRY_NAME>.azurecr.io
    • 画像: acs-to-teams-meeting
    • 画像タグ: 最新
    • CPU とメモリ: 0.25 CPU コア、-.5 Gi メモリ

14. [ アプリケーションのイングレス設定] セクションで、次の操作を行います。

    • [有効] チェック ボックスをオンにします。
    • [すべての場所からのトラフィックを受け取る] ラジオ ボタンを選択します。

    これにより、React アプリケーションのエントリ ポイント (イングレス) が作成され、どこからでも呼び出されます。 Azure Container Apps は、すべてのトラフィックを HTTPS にリダイレクトします。

    • ターゲット ポート: 80

15. [Review + create](レビュー + 作成) を選択します。 検証に合格したら、[ 作成 ] ボタンを選択します。

    エラーが発生した場合は、コンテナー アプリ環境が長時間非アクティブであることが原因である可能性があります。 最も簡単な解決策は、コンテナー アプリを再度作成するプロセスを実行することです。 または、次のコマンドを実行して、Azure CLI を使用してコンテナー アプリを作成することもできます。

    バッシュ

    az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
        --location westus --image acs-to-teams-meeting \
        --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
        --ingress-enabled true --ingress-target-port 80 --ingress-type External \
        --ingress-protocol Https --ingress-traffic Anywhere
    

    PowerShell

    az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
        --location westus --image acs-to-teams-meeting `
        --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
        --ingress-enabled true --ingress-target-port 80 --ingress-type External `
        --ingress-protocol Https --ingress-traffic Anywhere
    

16. コンテナー アプリのデプロイが完了したら、Azure portal でコンテナー アプリに移動し、[概要] 画面でアプリケーション URL を選択して、nginx コンテナーで実行されているアプリケーションを表示します。

次の手順

お疲れさまでした。