インターン生がAzure OpenAIとApp Serviceを使ってWeb上で生成AIを使えるようにしてみた

インターン生がAzure OpenAIとApp Serviceを使ってWeb上で生成AIを使えるようにしてみた

目次

     

    本記事の内容

    本記事は文系クラウド初心者のインターン生が、Azure OpenAIとApp Serviceを使ってチャットWebサイトを作る手順をまとめた内容となっております。

    はじめに

    クラウドインテグレーション部インターン生のハドレストンです。

    クラウド初心者である私が、「Microsoft Azure(以降Azure)」のサービスを使ってWeb上で生成AIとチャットができるように環境を構築してみました。
    リソース作成から実際のチャット画面で動作を確認するところまで手順を紹介していきたいと思います。

    まず今回環境を構築する際に利用するAzure OpenAIと、Azure OpenAIをWebサイトとしてホストする際に利用するApp Serviceについて軽く説明していきたいと思います。

    Azure OpenAIとは何か

    Azure OpenAIとは、Azure上でOpenAI社が開発した生成AIモデルをAPI経由で使用できるサービスです。
    開発者にAIやデータサイエンスのスキルがなくても、カスタマイズ可能なAPIやモデルなどを利用してアプリケーションを構築することができます。
    GPTシリーズのような言語モデルのほかに画像モデルや音声モデルといったような多様なAIモデルとツールが備わっており、様々な目的で生成AIを使用することができます。

    App Serviceとは何か

    HTTPベースのアプリケーション実行環境を提供するサービスです。
    Java、Pythonなど好みの言語で開発でき、WindowsとLinux両方のベース環境でアプリケーションの実行とスケーリングを容易に行うことができます。

    今回、Azure OpenAIをApp Serviceで稼働することでAzure上でAIサービスを利用できるようにしています。
    他社のアプリケーションをAzure上で利用するために重要なサービスですが、今回の手順では自動的に必要な環境が作られるため、このサービスを意識することなく簡単にAI環境を作ることができます。

    リソースの作成

    Azure OpenAIを使って生成AIをAzure上にデプロイした際に行った手順を紹介します。

     

    リソースグループの作成

    Azure OpenAIをAzure上に立ち上げる前にリソースグループを作成します。
    Azure portal上の検索欄に"リソースグループ"と打ち込み、リソースグループと表示されているアイコンをクリックするか、画面上にすでに表示されていればアイコンをクリックします。

    202503_AzureOpenAI_01

    アイコンをクリックするとリソースグループ画面に遷移するので、左側の「作成」をクリックします。

    202503_AzureOpenAI_02

    作成をクリックするとリソースの作成画面に遷移します。
    必要な項目を入力していきます。
    今回、リージョンを全てJapan Eastに統一していきます。

    入力欄 入力値
    サブスクリプション 任意のサブスクリプションを選択
    リソースグループ名 任意の名前を入力
    リージョン Japan East

    202503_AzureOpenAI_03

    リソースグループの設定値を確認して、左下の「作成」をクリックします。
    これでリソースグループが完成しました。

    202503_AzureOpenAI_04

    Azure OpenAI リソースの作成

    左上の「ホーム」をクリックしてAzure portalのトップ画面に戻り、「リソースの作成」をクリックします。

    202503_AzureOpenAI_05

    サービス一覧画面に遷移しますので、左側にある「AI+MachineLearning」をクリックします。

    202503_AzureOpenAI_06

    検索欄に"OpenAI"を入力します。

    202503_AzureOpenAI_07

    左側にAzure OpenAIが表示されます。 「作成」をクリックしてリソースの作成をします。

    202503_AzureOpenAI_08

    リソース作成画面に遷移します。
    ここで必要な情報を入力していきます。

    入力欄 入力値
    サブスクリプション リソース作成時のサブスクリプションを選択
    リソースグループ リソースグループ作成時に作ったものを選択
    リージョン Japan East
    名前 任意の名前を指定
    価格レベル Standard S0

    設定項目を入力したら「次へ」をクリックします。

    202503_AzureOpenAI_09

    ネットワーク設定は「インターネットを含むすべてのアクセス」を選択します。

    ※補足

     

    • 「インターネットを含むすべてのアクセス」を選択すると自身が作ったAzure OpenAIリソースに誰でもアクセスできるようになります。
      検証目的ではなく本番環境に使う際には、アクセス制限を設定することを推奨します

     

    202503_AzureOpenAI_10

    Azure OpenAIの設定値を確認して、左下の「作成」をクリックします。

    202503_AzureOpenAI_11

    しばらく待つと画面のようにデプロイが完了したという表示になります。
    以上で、Azure OpenAIリソースの作成が完了しました。

    202503_AzureOpenAI_12

     

    Azure OpenAIモデルのデプロイ

    Azure OpenAIリソースの作成が完了したので、Azure AI Foundry※を利用してAIモデルをデプロイしていきます。
    Azure OpenAIリソースの作成後、「リソースに移動」をクリックするとAzure OpenAIの詳細画面に遷移します。

    ※Azure AI Foundry

    • AIモデルの検索や設定したAIモデルをデプロイするなど、Azureが提供するAIモデルのプラットフォームです。
      このプラットフォームを使って生成AIモデルをデプロイし、Webアプリケーションとして使えるようにしていきます。

     

    Azure OpenAIの詳細画面で「Go to Azure AI Foundry portal」をクリックします。

    202503_AzureOpenAI_13

    クリックした後、新しいタブが開いてAzure AI Foundryに遷移します。
    ここからはAzure AI Foundry上で操作します。
    左側の「チャット」をクリックします。

    202503_AzureOpenAI_14

    「新しいデプロイの作成」>「基本モデルから」をクリックします。

    202503_AzureOpenAI_15

    AIモデルの選択画面が表示されるので、今回は「gpt-4」を選択して、「確認」をクリックします。

    202503_AzureOpenAI_16

    モデル作成画面に遷移するので、必要な項目を入力します。

    入力欄 入力値
    デプロイ名 任意の名前を入力
    デプロイの種類 Standard

    デプロイの詳細を入力します。

    入力欄 入力値
    モデルバージョン 0613(既定) ※
    1分当たりのトークン数レート制限 1K
    コンテンツフィルター DefaultV2
    動的クォーターを有効にする 有効

    ※補足

    • モデルのバージョン規定は私が設定した当時の時点では「0613(規定)」でしたが、バージョンが更新されることによって規定となるバージョンは変化している可能性があります。
    • リージョンによってもモデルのバージョンが変化していることがあります。

     

    「デプロイ」をクリックします。

    202503_AzureOpenAI_17

    元の画面に戻るとAIモデルのデプロイは完了です。

     

    Web アプリにデプロイ

    AIモデルのデプロイが無事に完了したら、このモデルをWebブラウザー上で使えるようにしていきます。

    AIのセッティングができたら「デプロイ」をクリックし、「Webアプリとして」を選択します。

    202503_AzureOpenAI_18

    AIモデルをWebアプリとしてホストするApp Serviceの作成画面に遷移するので、必要な項目を入力します。

    入力欄 入力値
    Webアプリのデプロイする構成を選択します。 「新しいWebアプリを作成する」を選択
    名前 任意の名前を入力
    サブスクリプション リソースグループ作成した際に選択したサブスクリプションと同じものを選択
    リソースグループの選択 リソースグループの作成 で作ったリソースグループを選択
    場所 Japan East
    価格プラン Free
    Webアプリでチャット履歴を有効にする チェックしない ※

    「展開」をクリックします。

    ※補足

    • Webアプリでチャット機能を有効にするを選択するとAzure上で新たにデータベースが自動的に作成されます。
      料金が加算されてしまうので今回はチェックしていませんが、チャット履歴を見たい場合はチェックをしてください。

    参考: Cosmos DB を使用したチャット履歴の有効化

    • Free以外の価格プランを選択した場合は料金が発生します。

    参考:
    Azure App Service on Linux の料金
    Azure App Service on Windows の価格

    202503_AzureOpenAI_19

    Azure AI Foundryの画面に戻ります。
    画面左にある「デプロイ」をクリックし、先ほど展開したモデルの状況を確認します。

    202503_AzureOpenAI_20

    「モデルデプロイ」画面に遷移するので、「アプリのデプロイ」タブをクリックすると、モデルデプロイのステータスが確認できます。 「デプロイ状態」が「実行中」から「成功」に変わるまで待ちます。(私の場合は30~40分ほどかかりました)

    202503_AzureOpenAI_21

    しばらく待っていると「デプロイの状態」が画面のように「成功」に変わります。
    これでWebアプリとしてデプロイすることができました。
    これでAzure OpenAIの基本的な設定は完了しました。

     

    アクセス

    実際にアクセスしてAIを利用してみたいと思います。

    「モデルデプロイ」画面で、デプロイしたWebアプリをクリックします。

    202503_AzureOpenAI_22

    クリックした後、新しいタブが開いてアクセスの許可を要求されるので、「承諾」をクリックします。

    202503_AzureOpenAI_23

    承諾が完了すると、チャットのスタート欄が表示されます。

    202503_AzureOpenAI_24

    画面のようにすぐに会話ができるようになります。

    ※補足

    • Azure OpenAI Serviceは使用したトークン数に応じて課金されるので、トークンの使い過ぎには注意してください。

    参考: Azure OpenAI Service の価格の概要

    202503_AzureOpenAI_25

    Azure portalからリソースグループを確認すると、App ServiceプランとApp Serviceが追加されていることが確認できます。
    このようにAzure OpenAIはApp Serviceについて意識することなくAzure上でAI環境を構築することが可能です。

    202503_AzureOpenAI_26

    AIモデルのその他設定

    今回の手順では触れていませんが、Web アプリにデプロイをする前にAIモデルに書式設定やチャットで会話する際のテーマや背景、前提条件などを事前にインプットすることができます。

    202503_AzureOpenAI_27

    ※例 「モデルに指示とコンテキストを与える」に"日本語で回答する"と入力し、「変更の適用」をクリックすると日本語で応答してもらえる指示ができます。

    202503_AzureOpenAI_28

    このように英語や中国語で質問しても日本語で返すようになります。

    202503_AzureOpenAI_29

    まとめ

    今回は、Azure OpenAIについて検証のハンズオンも踏まえて紹介しました。
    生成AIについて全く知識がなくてもクラウド上で生成AI環境を構築できることや、リソース一つ一つに細かい設定をしなくても一度に作成されることに驚かされました。
    このように簡単にAI環境を構築することができますので良かったら是非自身の環境で作ってみてください。

    最後の注意書きとなりますが、これらのリソースは料金が発生するので、検証後はリソース削除を忘れないようにしましょう。

    参考資料

    アジアクエスト株式会社では一緒に働いていただける方を募集しています。
    興味のある方は以下のURLを御覧ください。