Konfigurowanie laboratorium dla platformy React w systemie Linux

  • Artykuł

Uwaga

Ten artykuł odwołuje się do funkcji dostępnych w planach laboratorium, które zastąpiły konta laboratorium.

React to popularna biblioteka języka JavaScript do tworzenia interfejsów użytkownika. React to deklaratywny sposób tworzenia składników wielokrotnego użytku dla witryny internetowej. Istnieje wiele innych popularnych bibliotek do tworzenia frontonu opartego na języku JavaScript. Użyjemy kilku z tych bibliotek podczas tworzenia laboratorium. Redux to biblioteka, która zapewnia przewidywalny kontener stanu dla aplikacji JavaScript i jest często używana w uzupełniuj platformę React. JSX to rozszerzenie składni biblioteki dla języka JavaScript często używane z platformą React w celu opisania wyglądu interfejsu użytkownika. NodeJS to wygodny sposób uruchamiania serwera internetowego dla aplikacji React.

W tym artykule pokazano, jak zainstalować program Visual Studio Code dla środowiska programistycznego, narzędzia i biblioteki potrzebne dla klasy deweloperów internetowych platformy React.

Konfiguracja laboratorium

Aby skonfigurować to laboratorium, potrzebujesz subskrypcji platformy Azure, aby rozpocząć pracę. Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Ustawienia planu laboratorium

Po utworzeniu subskrypcji platformy Azure możesz utworzyć nowy plan laboratorium w usługach Azure Lab Services. Aby uzyskać więcej informacji na temat tworzenia nowego planu laboratorium, zobacz samouczek dotyczący konfigurowania planu laboratorium. Możesz również użyć istniejącego planu laboratorium.

Włącz ustawienia planu laboratorium zgodnie z opisem w poniższej tabeli. Aby uzyskać więcej informacji na temat włączania obrazów witryny Azure Marketplace, zobacz Określanie obrazów witryny Azure Marketplace dostępnych dla twórców laboratorium.

Ustawienie planu laboratorium Instrukcje
Obrazy z witryny Marketplace Włącz obraz "Ubuntu Server 18.04 LTS".

Ustawienia laboratorium

Aby uzyskać instrukcje dotyczące tworzenia laboratorium, zobacz Samouczek: konfigurowanie laboratorium. Podczas tworzenia laboratorium użyj następujących ustawień.

Ustawienie laboratorium Wartość
Rozmiar maszyny wirtualnej Small

Zalecamy przetestowanie obciążeń, aby sprawdzić, czy wymagany jest większy rozmiar. Aby uzyskać więcej informacji na temat każdego rozmiaru, zobacz Ustalanie rozmiaru maszyny wirtualnej.

Konfiguracja maszyny szablonu

W krokach w tej sekcji pokazano, jak wykonać następujące czynności, aby skonfigurować maszynę wirtualną szablonu:

  1. Zainstaluj narzędzia programistyczne.
  2. Zainstaluj rozszerzenia debugera dla przeglądarki internetowej.
  3. Zaktualizuj ustawienia zapory.

Instalowanie narzędzi programistycznych

  1. Zainstaluj preferowaną przeglądarkę internetową.

  2. Zainstalowanie środowiska Node.js.

    sudo apt install nodejs

  3. Zainstaluj Menedżer pakietów Node, które będą używane do instalowania oprogramowania React, Redux i JSX.

    sudo apt install npm

  4. Zainstalowanie programu Visual Studio Code.

  5. Zainstaluj rozszerzenie Reaktywne narzędzia natywne dla programu Visual Studio Code.

  6. Opcjonalnie zainstaluj rozszerzenia na potrzeby programowania za pomocą oprogramowania Redux i JSX.

Tworzenie aplikacji React to oficjalnie obsługiwany sposób tworzenia aplikacji React i nie wymaga dalszej konfiguracji, jeśli używasz narzędzia npm 5.2 lub nowszego. Aby uzyskać więcej instrukcji dotyczących korzystania z funkcji Tworzenia aplikacji React, zobacz dokumentację wprowadzającą .

Inne składniki potrzebne do witryny internetowej opartej na platformie React są instalowane przy użyciu narzędzia NPM w określonej aplikacji. Na przykład wprowadź następujące polecenia, aby zainstalować biblioteki Redux i JSX:

npm install react-redux
npm install react-jsx

Instalowanie rozszerzeń debugera

Zainstaluj rozszerzenia react developer tools dla przeglądarki, aby można było sprawdzić składniki react i rejestrować informacje o wydajności.

Aby uruchomić aplikację w trybie programowania, użyj wbudowanego npm start polecenia. Adresy URL lokalne i sieciowe zostaną wyświetlone w danych wyjściowych polecenia. Aby uzyskać więcej informacji na temat używania protokołu HTTPS zamiast protokołu HTTP, zobacz Tworzenie aplikacji React: Korzystanie z protokołu HTTPS w środowisku deweloperskich.

Aktualizowanie ustawień zapory

Oficjalne kompilacje systemu Ubuntu mają zainstalowane tabele iptable i domyślnie zezwalają na cały ruch przychodzący. Jeśli jednak używasz maszyny wirtualnej, która ma bardziej restrykcyjną zaporę, dodaj regułę ruchu przychodzącego, aby zezwolić na ruch do serwera NodeJS. W poniższym przykładzie użyto tabel iptable , aby zezwolić na ruch na porcie 3000.

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

Ważne

Nauczyciele muszą używać maszyny wirtualnej szablonu lub innej maszyny wirtualnej laboratorium, aby uzyskać dostęp do witryny internetowej ucznia.

Koszt

Omówimy przykładowy szacowany koszt dla tej klasy. Wybrany rozmiar maszyny wirtualnej to Mały, czyli 20 jednostek laboratorium.

W przypadku klasy 25 uczniów z 20 godzinami zaplanowanego czasu zajęć i 10 godzin przydziału pracy domowej lub przydziałów szacowany koszt będzie:

25 uczniów × (20 zaplanowanych godzin + 10 godzin przydziału) × 20 jednostek laboratorium × USD0,01 na godzinę = 150,00 USD

Ważne

Oszacowanie kosztów jest przeznaczone tylko do celów przykładowych. Aby uzyskać bieżące informacje o cenach, zobacz Cennik usług Azure Lab Services.

Następne kroki

Obraz szablonu można teraz opublikować w laboratorium. Aby uzyskać więcej informacji, zobacz Publikowanie maszyny wirtualnej szablonu.

Podczas konfigurowania laboratorium zapoznaj się z następującymi artykułami: