Windows 上の React のラボを設定する
重要
Azure Lab Services は 2027 年 6 月 28 日に廃止されます。 詳細については、提供終了ガイドを参照してください。
Note
この記事では、ラボ アカウントに代わり導入されたラボ プランで使用できる機能について説明します。
React は、ユーザー インターフェイス (UI) を構築するための一般的な JavaScript ライブラリです。 React は、Web サイト用に再利用可能なコンポーネントを作成するための宣言型の方法です。 JavaScript ベースのフロントエンド開発には、他にも多くの一般的なライブラリがあります。 ラボを作成する際に、これらのライブラリのいくつかを使用します。 Redux は、JavaScript アプリ用の予測可能な状態コンテナーを提供するライブラリであり、多くの場合、React を補完するために使用されます。 JSX は、UI の外観を記述するために React でよく使用される、JavaScript のライブラリ構文拡張機能です。 NodeJS は、React アプリケーション用の Web サーバーを実行する便利な方法です。
この記事では、React Web 開発クラスに必要な、開発環境用の Visual Studio 2019、およびツールやライブラリをインストールする方法について説明します。
ラボの構成
このラボを設定するには、Azure サブスクリプションとラボ計画が必要です。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。
ラボ計画の設定
Azure サブスクリプションを取得したら、Azure Lab Services で新しいラボ計画を作成できます。 新しいラボ計画の作成の詳細については、ラボ計画の設定方法に関するチュートリアルを参照してください。 既存のラボ計画を使用することもできます。
次の表の説明に従って、ラボ計画の設定を有効にします。 Azure Marketplace イメージを有効にする方法の詳細については、「ラボ作成者が利用できる Azure Marketplace イメージを指定する」を参照してください。
| ラボ アカウントの設定 | 手順 |
|---|---|
| Marketplace イメージ | "Windows Server 2019 (x64) の Visual Studio 2019 Community (最新リリース)" イメージを有効にします。 |
ラボの設定
ラボを作成する方法については、チュートリアル: ラボの設定に関するページを参照してください。 ラボの作成時には、次の設定を使用します。
| ラボの設定 | 値 |
|---|---|
| 仮想マシン サイズ | Medium |
ワークロードをテストして、より大きなサイズが必要かどうかを確認することをお勧めします。 各サイズの詳細については、「VM のサイズ設定」のセクションを参照してください。
テンプレート マシンの構成
このセクションの手順では、テンプレート VM を設定するために以下の操作を行う方法を示します。
- 開発ツールをインストールします。
- Web ブラウザー用のデバッガー拡張機能をインストールします。
- ファイアウォール設定を更新します。
開発ツールをインストールする
'Visual Studio 2019 Community (最新リリース) on Windows Server 2019 (x64)' イメージには、Visual Studio 2019 に必要な Node.js の開発ワークロードがすでにインストールされています。
- 任意の Web ブラウザーをインストールします。 イメージには、既定で Internet Explorer がインストールされています。
- Node.js の Web サイトにアクセスし、ダウンロード ボタンを選択します。 最新の長期サービス (LTS) バージョン、最新の機能が備わった現在のバージョン、または以前のリリースを使用できます。 NodeJS をインストールすると、ノード パッケージ マネージャーもインストールされます。これは、React、Redux、および JSX のインストールに使用されます。
- 必要に応じて、Visual Studio 2019 を最新のリリースに更新します。
React ベースの Web サイトに必要なその他のコンポーネントは、NPM を使用して特定のアプリケーションにインストールされます。 NPM パッケージを追加するには、Visual Studio での NPM パッケージの管理に関するページを参照してください。
たとえば、プロジェクトで Node.js 対話型ウィンドウを使用する場合は、次のコマンドを入力して React、Redux、および JSX ライブラリをインストールします。
.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx
Visual Studio で初めての React を使用した Node.js アプリを作成するには、「チュートリアル: Visual Studio で Node.js と React のアプリを作成する」を参照してください。
デバッガー拡張機能をインストールする
ブラウザー用に React 開発者ツールの拡張機能をインストールして、React コンポーネントの調査とパフォーマンス情報の記録ができるようにします。
ファイアウォール設定の更新
既定では、Node.js サーバーへの受信トラフィックはブロックされます。 実行中の学生の Web サイトにアクセスしたい場合は、インバウンドのファイアウォール規則を追加して、トラフィックを許可してください。 デバッグ中に使用されるポートを確認するには、アプリケーション ポート プロジェクト プロパティを参照してください。 次の例では、New-NetFirewallRule PowerShell コマンドレットを使用して、ポート 1337 へのアクセスを許可しています。
New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow
重要
教師は、学生の Web サイトにアクセスするために、テンプレート VM または別のラボ VM を使用する必要があります。
次のステップ
テンプレート イメージをラボに発行できるようになります。 詳細については、「テンプレート VM の発行」を参照してください。
ラボを設定するときは、次の記事を参照してください。