1章 始めるまえに必要な環境設定

Azure 無料評価版は、下記のリンクを開いた先にある「無料で始める」というリンクから手続きを進めることで利用開始が可能です。

Azure の無料アカウントを今すぐ作成する - Microsoft Azure

無料アカウントの作成には以下の情報が必要ですので、それぞれご用意ください。

• Microsoft アカウント
  • Outlook.com のメールアドレスを利用するか、もしくは任意のメールアドレスを Microsoft アカウントとして登録してご利用ください。
  • もし Microsoft アカウントをお持ちでなければ、account.microsoft.com にアクセスして、新規の Outlook.com のメールアドレスを取得ください。
• 有効なクレジットカード
  • 無料の範囲内で利用する場合でも、必ず登録が必要な項目です。
  • お手数ですが有効なクレジットカード情報の登録をよろしくお願いします。
  • 通常は、無償枠が完了した時点で一旦アカウントが停止されるようになっていますが、その制限を外すことも出来るので、アカウントの操作時にはご注意ください。
• 有効な電話番号
  • 個人認証のために有効な電話番号の登録も必要です。
  • SMS もしくは機械音声による通話にて、アカウント発行の途中で個人認証を実施します。

Cloud Shell

このデモをデプロイするためには、以下のツールが必要です。Azure Cloud Shell に、以下が事前にインストールされていることをご確認ください。PowerShell を前提としています。

Cloud Shell では Azure File を使用してセッション間でファイルを維持します。 Cloud Shell の初回起動時に、セッション間でファイルを維持するために新しいまたは既存のファイル共有を関連付けることを求められます。

新しいストレージの作成

基本設定を使用し、サブスクリプションのみを選択すると、Cloud Shell では、最寄りのサポートされるリージョンに 3 つのリソースが自動的に作成されます。

• リソース グループ: cloud-shell-storage-<region>
• ストレージ アカウント: cs<uniqueGuid>
• ファイル共有: cs-<user>-<domain>-com-<uniqueGuid>

ファイル共有は $HOME ディレクトリに clouddrive としてマウントされます。 これは 1 度限りのアクションであり、ファイル共有は以降のセッションで自動的にマウントされます。

既存のリソースの使用

詳細設定オプションを使用すると、既存のリソースを関連付けることができます。 ストレージのセットアップを促す画面が表示されたら、[詳細設定の表示] を選択して、詳細オプションを表示します。 設定されているストレージ オプションは、ローカル冗長ストレージ (LRS)、geo 冗長ストレージ (GRS)、ゾーン冗長ストレージ (ZRS) のアカウントをフィルター処理します。

ツール

このデモをデプロイするためには、ローカルに以下の開発環境が必要です。

重要: このサンプルは Windows もしくは Linux 環境で動作します。ただし、WSL2 の環境では正常に動作しません。

Azure CLI の準備

Azure CLI のインストール

Azure CLI のインストール方法は、OS によって様々です。 詳細については Azure CLI をインストールする方法 のドキュメントを確認いただき、自身の利用されている OS に合った方法でセットアップをお願いします。

Azure CLI をインストールする方法
https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli

インストールが完了したら、コマンドプロンプトや PowerShell や bash など、シェルを立ち上げて下記のコマンドを入力して、期待通りの応答が得られるか確認しましょう。

az -v

azure-cli                         2.51.0

core                              2.51.0
telemetry                          1.1.0

Dependencies:
msal                            1.24.0b1
azure-mgmt-resource             23.1.0b2

Python location 'C:\Program Files\Microsoft SDKs\Azure\CLI2\python.exe'
Extensions directory 'C:\Users\user\.azure\cliextensions'

Python (Windows) 3.10.10 (tags/v3.10.10:aad5f6a, Feb  7 2023, 17:20:36) [MSC v.1929 64 bit (AMD64)]

Legal docs and information: aka.ms/AzureCliLegal


Your CLI is up-to-date.

Azure CLI にログイン

Azure CLI が利用可能になったら、操作対象の環境にログインします。 以下のコマンドを入力すると、ブラウザーでのログインを求められるので、有効な資格情報を入力すれば CLI へのログインが完了します。

az login

すると、利用可能なサブスクリプションのリストが表示されますので、今回利用するサブスクリプションを見つけ “name” の項目と、”id” の項目をメモします。

]
  {
    "cloudName": "AzureCloud",
    "homeTenantId": "<GUID>",
    "id": "<GUID>",
    "isDefault": false,
    "managedByTenants": [
      {
        "tenantId": "<GUID>"
      }
    ],
    "name": "ここにサブスクリプション名が入っているはずです",
    "state": "Enabled",
    "tenantId": "<GUID>",
    "user": {
      "name": "tokawa@microsoft.com",
      "type": "user"
    }
  }
]

なお、サブスクリプションのリストを見逃してしまった場合には、以下のコマンドで表形式で表示も可能です。

az account list --output table --query "[].[name,id]"

利用するサブスクリプションを選択するためのコマンドは以下の通りです。

az account set --subscription サブスクリプション名

これで、コマンドラインツールから Azure の操作が出来るようになりました！

Azure Developer CLI の準備

Azure Developer CLI のインストール

Azure Developer CLI (azd) のインストール方法も、OS によって様々です。 詳細については「Azure Developer CLI をインストールまたは更新する」のドキュメント確認して、お使いの OS にあわせた方法でインストールを行ってください。

Azure Developer CLI をインストールまたは更新する
https://learn.microsoft.com/ja-jp/azure/developer/azure-developer-cli/install-azd?tabs=winget-windows%2Cbrew-mac%2Cscript-linux&pivots=os-windows

インストールが完了したら、設定反映のために一回ターミナルを再起動してからこの先の手順を進めてください。

Azure Developer CLI へのログイン

Azure Developer CLI (azd) のセットアップが完了したら、ターミナルを開いて以下のコマンドを実行し、Azure 環境にログインします。

azd auth login

Azure CLI のログイン時と同じように、ブラウザーが自動的に立ち上がり認証を促されますので、Azure へのアクセス権のあるユーザーにてログインを行ってください。

Azure Developer CLI の初期設定

azd セットアップ後のターミナル再起動が完了したら、以下のコマンドを実行し、操作対象のサブスクリプションを指定しつつ動作確認します。

azd config set defaults.subscription サブスクリプション ID

!> サブスクリプション ID は、先ほど Azure CLI のセットアップ時にメモした id の値 (GUID) を入力します

Python のインストール

今回のハンズオンでは、Python 3.9 で書かれたサンプルコードを利用します。

• 重要:: Windows 環境では、python および pip を Path 環境変数に含める必要があります。
• 重要:: python --version で現在インストールされている Python のバージョンを確認することができます。 Ubuntu を使用している場合、sudo apt install python-is-python3 で python と python3 をリンクさせることができます。

Python のダウンロードサイトから、お使いの OS に合った Python 3.9 系のインストーラーをダウンロードしてきて、インストールしてください。

Download Python | Python.org
https://www.python.org/downloads/

Node.js のインストール

今回のハンズオンでは、Node.js で書かれたサンプルコードも利用します。

Node.js のダウンロードサイト からお使いの OS にあった Node.js 16 系のインストーラーをダウンロードしてインストールしてください。

Downloads | Node.js
https://nodejs.org/en/download

Git CLI のインストール

今回のハンズオンではサンプルソースコードのダウンロードに Azure Developer CLI の機能を利用しますが、その内部で Git CLI が利用されているためインストールが必要です。

Git CLI のダウンロードサイト からお使いの OS にあわせた Git CLI のバージョンをダウンロードしてインストールしてください。

インストール時に色々聞かれますが、基本的には全てデフォルト設定で問題ないはずです。

PowerShell 7 のインストール

Windows 環境でハンズオンを実施中の方は、PowerShell 7 のセットアップも必要です。

PowerShell 7 のダウンロードサイト よりインストーラーをダウンロードして、インストールしてください。

PowerShell
https://github.com/PowerShell/PowerShell/releases/tag/v7.3.6

インストール途中に出てくる下記ダイアログの、下二つのチェックは入れておくとコンテキストメニューから PowerShell を開けるようになっておススメです。{: .notice–warning}

Visual Studio Code の準備

Visual Studio Code のインストール

まずは Visual Studio Code のダウンロードサイト から、ご利用されている OS にあわせた Visual Studio Code をダウンロードし、インストーラーを実行してインストールします。

Download Visual Studio Code
https://code.visualstudio.com/download

VS Code のセットアップ時に、以下の追加タスクのダイアログの、上二つのチェックボックス（[Code で開く] アクションを追加する）にチェックを入れておくと、あとから VS Code を開くときに楽になりますのでおススメです。

Visual Studio Code に Extensions をインストールする

VS Code への Extensions のインストールは、VS Code 起動後のサイドバーにある “Extensions” のアイコンから行います。 下記スクリーンショットの赤枠で囲んだアイコンです。

“Search Extensions in Marketplace” のテキストボックスから、名前検索が出来ますので、以下にリストした Extensions を探してインストールしてください。

• Python
• Python Extension Pack
• Azure Tools
  • Azure Tools のセットアップ途中で、azd のセットアップや Azure へのログインなど求められますが、最低限 Azure へのログインさえ出来ていればあとは必要な時に必要な操作を求められるはずなので、一番下の “Mark Done” をクリックして完了させてしまって構いません。

完了したら、VS Code にフォーカスを当てた状態で F1 キーを押して、”reload” と検索し “Developer: Reload Window” を実行し、VS Code に先ほどインストールしたプラグインが正しく読み込まれるようにしてください。

プロジェクトの初期化

1. このリポジトリをクローンし、フォルダをターミナルで開きます。(Windows の場合は pwsh ターミナルで実行する例です)
2. azd auth login を実行します。
3. azd init を実行します。
   • 現在、このサンプルに必要な Azure OpenAI Service のモデルは該当モデルをサポートしている東日本リージョンにデプロイすることが可能です。最新の情報は こちら を参考にしてください。

アプリケーションのローカル実行

アプリケーションをローカルで実行する場合には、以下のコマンドを実行してください。azd up で既に Azure 上にリソースがデプロイされていることを前提にしています。

1. azd login を実行する。
2. src フォルダに移動する。
3. ./start.ps1 もしくは ./start.sh を実行します。

VS Code でのデバッグ実行

1. src\backend フォルダに異動する
2. code . で VS Code を開く
3. Run>Start Debugging または F5

Frontend の JavaScript のデバッグ

1. src/frontend/vite.config.ts の build に minify: false を追加
2. ブラウザの Developer tools > Source でブレイクポイントを設定して実行

GPT-4 モデルの利用

2023 年 6 月現在、GPT-4 モデルは申請することで利用可能な状態です。このサンプルは GPT-4 モデルのデプロイに対応していますが、GPT-4 モデルを利用する場合には、こちら を参考に、GPT-4 モデルをデプロイしてください。また、GPT-4 モデルの利用申請は こちらのフォーム から可能です。

GPT-4 モデルのデプロイ後、以下の操作を実行してください。

1. このサンプルをデプロイした際に、プロジェクトのディレクトリに ./${環境名}/.env ファイルが作成されています。このファイルを任意のエディタで開きます。
2. 以下の行を探して、デプロイした GPT-4 モデルのデプロイ名を指定してください。

   AZURE_OPENAI_GPT_4_DEPLOYMENT=”” # GPT-4 モデルのデプロイ名 AZURE_OPENAI_GPT_4_32K_DEPLOYMENT=”” # GPT-4-32K モデルのデプロイ名

3. azd up を実行します。

GPT-4 モデルは、チャット機能、文書検索機能のオプションで利用することができます。

補足情報

VS Code で Python を利用可能にするところまでのトレーニング

Microsoft Learn に VS Code に Python をセットアップする部分をまとめた技術トレーニングがありました。 こちらも是非参考にしてみてください。

Visual Studio Code で Python を使ってみる
https://learn.microsoft.com/ja-jp/training/modules/python-install-vscode/

VS Code で Azure にアクセスする部分の公式ドキュメント

Azure 開発用に VS Code をセットアップする方法はこちらにもまとまっていますのでご確認ください。

Azure 開発用に Visual Studio Code を構成する
https://learn.microsoft.com/ja-jp/dotnet/azure/configure-vs-code