次の方法で共有

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

  • [アーティクル]

Note

この記事では、ラボ アカウントに代わり導入されたラボ プランで使用できる機能について説明します。

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

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

ラボの構成

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

ラボ計画の設定

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

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

ラボ計画の設定 手順
マーケットプレースの画像 "Ubuntu Server 18.04 LTS" イメージを有効にします。

ラボの設定

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

ラボの設定 値
仮想マシン サイズ Small

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

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

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

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

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

  1. 任意の Web ブラウザーをインストールします。

  2. Node.js をインストールします。

    sudo apt install nodejs

  3. ノード パッケージ マネージャーをインストールします。これは、React、Redux、および JSX のインストールに使用されます。

    sudo apt install npm

  4. Visual Studio Code をインストールします。

  5. Visual Studio Code 用の React ネイティブ ツール拡張機能をインストールします。

  6. 必要に応じて、Redux と JSX を使用する開発用の拡張機能をインストールします。

Create React App は、React アプリを作成するために正式にサポートされている方法であり、npm 5.2 以降を使用している場合は、追加の構成は必要ありません。 Create React App を使用する方法の詳細については、概要ドキュメントを参照してください。

React ベースの Web サイトに必要なその他のコンポーネントは、NPM を使用して特定のアプリケーションにインストールされます。 たとえば、Redux ライブラリと JSX ライブラリをインストールするには、次のコマンドを入力します。

npm install react-redux
npm install react-jsx

デバッガー拡張機能をインストールする

ブラウザー用に React 開発者ツールの拡張機能をインストールして、React コンポーネントの調査とパフォーマンス情報の記録ができるようにします。

開発モードでアプリを実行するには、npm start 組み込みコマンドを使用します。 コマンドの出力に、ローカル URL とネットワーク URL が一覧表示されます。 HTTP の代わりに HTTPS を使用する方法の詳細については、Create React App: 開発時に HTTPS を使用する方法に関するページを参照してください。

ファイアウォール設定の更新

Ubuntu の公式ビルドには iptables がインストールしてあり、既定ですべての受信トラフィックを許可します。 ですが、VM のファイアウォールでそれより強い通信制限を行っている場合は、NodeJS サーバーへのトラフィックを許可する受信規則を追加します。 下の例では iptables で 3000 番ポートへの通信を許可しています。

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

重要

教師は、学生の Web サイトにアクセスするために、テンプレート VM または別のラボ VM を使用する必要があります。

コスト

このクラスのコスト見積もりの例について説明します。 選択した仮想マシンのサイズは Small で、20 ラボ ユニットです。

予定授業時間が 20 時間、宿題または課題に 10 時間の割り当てがある、学生数 25 人のクラスの場合、費用見積もりは次のようになります。

25 人の学生 x (予定された 20 時間 + 10 クォータ時間) x 20 ラボ ユニット x 0.01 USD/時間 = 150.00 USD

重要

このコスト見積もりは、例を示すためだけのものです。 現在の価格の詳細については、「Azure Lab Services の価格」を参照してください。

次のステップ

テンプレート イメージをラボに発行できるようになります。 詳細については、「テンプレート VM の発行」を参照してください。

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