Azure 用のローカル JavaScript 開発環境を構成する
クラウド アプリケーションを作成する場合、開発者は通常、Azure などのクラウド環境にコードをデプロイする前に、ローカル ワークステーションでそのコードをテストしたいと考えます。 ローカル開発には、使い慣れた環境と共に幅広いツールを利用できるという利点があります。
この記事では、Azure での JavaScript に適したローカル開発環境を作成および検証するためのセットアップ手順について説明します。
1 回限りのサブスクリプションの作成
Azure リソースは、サブスクリプションとリソース グループ内で作成されます。
| Type | 説明 |
|---|---|
| 無料試用版のサブスクリプション | 無料試用版のサブスクリプションを作成します。 |
| 既存のサブスクリプション | 既にサブスクリプションを持っている場合は、Azure portal、Azure CLI、または JavaScript 用の Azure SDK で既存のサブスクリプションにアクセスします。 |
| 複数のサブスクリプションにまたがる | 複数のサブスクリプションを管理する必要がある場合は、JavaScript を使用して管理グループを作成する方法を参照してください。 |
1 回限りのソフトウェア インストール
ローカル ワークステーションでの JavaScript を使用した Azure 開発では、以下をインストールすることをお勧めします。
| 名前またはインストーラー | 説明 |
|---|---|
| Node.js LTS | ローカル ワークステーション開発用の最新の長期サポート (LTS) ランタイム環境をインストールします。 |
| Visual Studio Code | Visual Studio Code は、優れた JavaScript 統合とコーディングのエクスペリエンスを提供しますが、必須ではありません。 任意のコード エディターを使用することができます。 |
Azure ホスティング ランタイム
Azure Web アプリや Azure Functions など、アプリケーションのホスティング環境として Azure リソースを使用する予定がある場合は、Node.js のローカル Node.js 開発環境のランタイム バージョンが、使用する予定の Azure リソース ランタイムと一致していることを確認する必要があります。
推奨されるローカル インストール
ローカルの開発タスクを行う際は、次の一般的なローカル ワークステーションのインストールをお勧めします。
| 名前 | 説明 |
|---|---|
| Azure CLI | Azure リソースを作成して使用するためのローカルまたはクラウドベースの CLI。 |
| Azure Developer CLI | 開発者ワークフローでクラウド アプリを構築するための開発者中心のコマンド ライン ツール。 |
| Azure 用の Visual Studio Code 拡張機能 | IDE に対する VS Code 拡張機能。 |
| Git または Git for Windows | ソース管理用のコマンドライン ツール。 必要に応じて、別のソース管理ツールを使用できます。 |
認証の 1 回限りの構成
ローカル開発とリモート Azure ホスティング環境で同じ認証コードを使用するには、DefaultAzureCredential を使用します。
プロジェクトのリソース グループを作成する
Web ブラウザーで Azure portal を開きます。
検索バーに「 リソース グループ 」と入力して選択します。
[+ 作成] を選択します。
リソース グループの設定を入力します。
プロパティ 値 サブスクリプション サブスクリプションを選択します。 リソース グループ リソース グループ名を入力します。 このリソース グループ名は、Resource Manager (管理プレーン) にアクセスするときにリソース URI の一部として使用されます。 名前は、コントロール (データベースの作成など) やデータ プレーン (テーブルへのデータの挿入) には使用されません。 リージョン リソース グループの地理的リージョンを選択します。 [ 確認と作成 ] を選択して検証を開始します。
検証が成功したら、[作成] を選択 します。
Azure と Azure SDK クライアント ライブラリの操作
Azure SDK ライブラリ は、各サービスに対して個別に提供されます。 各ライブラリは、使用する必要がある Azure サービスに基づいてインストールします。
Azure を使用する新しいプロジェクトでは、それぞれ次のことを行う必要があります。
- Azure リソースを作成し、関連付けられているキーまたは構成を安全な場所に保存します。
- Azure SDK ライブラリを NPM または Yarn からインストールする。
- ローカル サービス プリンシパルの資格情報を使用して Azure SDK に対する認証を行い、構成情報を使用して特定のサービスにアクセスします。
構成情報の保護
構成情報を保存するには、いくつかのオプションがあります。
- Azure Key Vault を使用して、クラウドのリソース、アプリ、ソリューションにアクセスして暗号化するキーを作成および管理します。
- Dotenv は、
.envファイルから環境変数を読み取るための一般的な npm パッケージです。.envファイルがソース管理にチェックインされないように、必ず.envファイルを.gitignoreファイルに追加してください。 Azure 用 Web アプリでの環境変数の詳細を確認してしてください。
Azure ライブラリの環境変数を作成する
Azure SDK ライブラリで Azure クラウドにアクセスするために必要な Azure の設定を使用するには、最も一般的な値を環境変数に設定します。 次のコマンドは、ローカル ワークステーションの環境変数を設定します。
次の例では、クライアント ID は、サービス プリンシパル ID とサービス プリンシパル シークレットです。
AZURE_SUBSCRIPTION_ID="aa11bb33-cc77-dd88-ee99-0918273645aa"
AZURE_TENANT_ID="00112233-7777-8888-9999-aabbccddeeff"
AZURE_CLIENT_ID="12345678-1111-2222-3333-1234567890ab"
AZURE_CLIENT_SECRET="abcdef00-4444-5555-6666-1234567890ab"
これらのコマンドに示されている値を、お客様固有のサービス プリンシパルの値で置き換えます。
.env ファイルを作成する
もう 1 つの一般的なメカニズムは、DOTENV NPM パッケージを使用して、これらの設定用の .env ファイルを作成することです。 .env を使用する場合は、このファイルをソース管理にチェックインしないようにしてください。 これらの設定がソース管理にチェックインされるようにするための標準的な方法は、.env ファイルを git の .ignore ファイルに追加することです。
npm パッケージをインストールする
すべてのプロジェクトについて、次の手順に従って、常に個別のフォルダーと独自の package.json ファイルを作成することをお勧めします。
ターミナル、コマンド プロンプト、または bash シェルを開き、プロジェクトに新しいフォルダーを作成します。 その後、その新しいフォルダーに移動します。
mkdir MY-NEW-PROJECT && cd MY-NEW-PROJECTパッケージ ファイルを初期化します。
npm init -yこれにより、package.json ファイルが作成され、最小限のプロパティが初期化されます。
次の例のように、必要な Azure SDK ライブラリをインストールします。
npm install @azure/ai-text-analytics@5.0.0
Visual Studio Code でソース管理を使用する
プロジェクトを開始するときは常にソース管理リポジトリを作成するという習慣を身に付けることをお勧めします。 これは Visual Studio Code から実行できます。
Visual Studio Code で、ソース管理アイコンを選択して、ソース管理エクスプローラーを開き、 [リポジトリの初期化] を選択してローカル Git リポジトリを初期化します。
リポジトリが初期化され、ソース管理に格納するファイルができたら、「
Initial commit」というメッセージを入力し、チェックマークをオンにして、ソース ファイルの初期コミットを作成します。
GitHub または Azure DevOps で新しいリポジトリを作成し、次のいくつかのステップ用にリポジトリの URL をコピーします。
Visual Studio 統合ターミナルで、次の git コマンドを使用して、リモート リポジトリをローカル リポジトリに追加します。
YOUR-ALIASとYOUR-REPOSITORYを独自の値に置き換えます。git remote add origin https://github.com/YOUR-ALIAS/YOUR-REPOSITORY
Visual Studio Code には、多くの組み込み Git 機能が含まれています。 詳細については、「VS Code でのバージョン管理の使用」を参照してください。
次のステップ
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示