Windows 上の React のラボを設定する

重要

Azure Lab Services は 2027 年 6 月 28 日に廃止されます。詳細については、退職ガイドを参照してください。

注

この記事では、ラボアカウントを置き換えたラボプランで使用できる機能について説明します。

React は、ユーザーインターフェイス (UI) を構築するための一般的な JavaScript ライブラリです。 React は、Web サイト用に再利用可能なコンポーネントを作成するための宣言型の方法です。 JavaScript ベースのフロントエンド開発には、他にも多くの一般的なライブラリがあります。ラボを作成する際に、これらのライブラリのいくつかを使用します。 Redux は、JavaScript アプリ用の予測可能な状態コンテナーを提供するライブラリであり、React と補完するためによく使用されます。 JSX は、UI の外観を記述するために React でよく使用される JavaScript のライブラリ構文拡張機能です。 NodeJS は、React アプリケーション用の Web サーバーを実行するのに便利な方法です。

この記事では、開発環境用に Visual Studio 2019 をインストールする方法と、React Web 開発クラスに必要なツールとライブラリについて説明します。

ラボの構成

このラボを設定するには、Azure サブスクリプションとラボ計画が必要です。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

ラボ計画の設定

Azure サブスクリプションを取得したら、Azure Lab Services で新しいラボ計画を作成できます。新しいラボプランの作成の詳細については、ラボ計画の設定方法に関するチュートリアルを参照してください。既存のラボ計画を使用することもできます。

次の表の説明に従って、ラボ計画の設定を有効にします。 Azure Marketplace イメージを有効にする方法の詳細については、「ラボ作成者が使用できる Azure Marketplace イメージを指定する」を参照してください。

ラボアカウントの設定	手順
Marketplace イメージ	"Windows Server 2019 (x64) の Visual Studio 2019 Community (最新リリース)" イメージを有効にします。

ラボの設定

ラボを作成する方法については、「チュートリアル: ラボを設定する」を参照してください。ラボの作成時には、次の設定を使用します。

ラボの設定	値
仮想マシンサイズ	中程度

ワークロードをテストして、より大きなサイズが必要かどうかを確認することをお勧めします。各サイズの詳細については、VM のサイズ設定に関するページを参照してください。

テンプレートマシンの構成

このセクションの手順では、テンプレート VM を設定するために以下の操作を行う方法を示します。

開発ツールをインストールします。
Web ブラウザー用のデバッガー拡張機能をインストールします。
ファイアウォール設定を更新します。

開発ツールをインストールする

'Windows Server 2019 (x64) 上の Visual Studio 2019 Community (最新リリース) イメージには、Visual Studio 2019 に必要な Node.js 開発ワークロードが既にインストールされています。

任意の Web ブラウザーをインストールします。イメージには、既定で Internet Explorer がインストールされています。
Node.js Web サイトに移動し、[ダウンロード] ボタンを選択します。最新の長期サービス (LTS) バージョン、最新の機能が備わった現在のバージョン、または以前のリリースを使用できます。 NodeJS をインストールすると、 Node Package Manager もインストールされます。これは React、Redux、JSX のインストールに使用されます。
必要に応じて、Visual Studio 2019 を最新リリースに更新します。

React ベースの Web サイトに必要なその他のコンポーネントは、NPM を使用して特定のアプリケーションにインストールされます。 NPM パッケージを追加するには、 Visual Studio で NPM パッケージを管理する方法に関するページを参照してください。

たとえば、プロジェクトで Node.js Interactive Window を使用する場合は、次のコマンドを入力して 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 の発行」を参照してください。

ラボを設定するときは、次の記事を参照してください。

Last updated on 2021-05-16