Настройка лаборатории для React в Linux

Статья
04/25/2022

Внимание

Поддержка служб лабораторий Azure прекратится 28 июня 2027 г. Дополнительные сведения см. в руководстве по выходу на пенсию.

Примечание.

Эта статья ссылается на функции, доступные в планах лабораторий, которые заменили учетные записи лаборатории.

React — популярная библиотека JavaScript для создания пользовательских интерфейсов. React служит для создания многократно используемых компонентов веб-сайта. Существует множество других популярных библиотек для разработки внешних интерфейсов с применением JavaScript. Мы будем использовать некоторые из этих библиотек при создании лаборатории. Redux — библиотека, которая предоставляет контейнер прогнозируемого состояния для приложений JavaScript и часто используется совместно с React. JSX — расширение синтаксиса библиотеки для JavaScript, которое часто используется вместе с React для описания того, как должен выглядеть пользовательский интерфейс. NodeJS — удобный способ запуска веб-сервера для приложения, использующего React.

В этой статье показано, как установить Visual Studio Code для среды разработки, средств и библиотек, необходимых для класса веб-разработки React.

Конфигурация лаборатории

Для настройки этой лаборатории вам прежде всего потребуется подписка Azure. Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.

Параметры плана лаборатории

После получения подписки Azure можно создать новый план лаборатории в Службах лабораторий Azure. Дополнительные сведения о создании нового плана лаборатории см. в руководстве по настройке плана лаборатории. Вы также можете использовать существующий план лаборатории.

Включите параметры плана лаборатории, как описано в следующей таблице. Дополнительные сведения о том, как включить образы из Azure Marketplace, см. в статье Выбор образов Marketplace, доступных для создателей лаборатории.

Настройка плана лаборатории	Instructions
Образы Marketplace	Включите образ Ubuntu Server 18.04 LTS.

Параметры лаборатории

Инструкции по созданию лаборатории см. в руководстве по настройке лаборатории. При создании лаборатории используйте следующие параметры.

Параметр лаборатории	Значение
Размер виртуальной машины	Малый

Мы рекомендуем протестировать рабочие нагрузки, чтобы узнать, требуется ли больше размера. Дополнительные сведения о каждом размере см. в статье Изменение размера виртуальной машины.

Шаблон конфигурации компьютера

В этом разделе говорится о том, как настраивается шаблон виртуальной машины путем выполнения следующих действий.

Установите инструменты разработки.
Установите расширения отладчика для веб-браузера.
Обновите параметры брандмауэра.

Установка инструментов разработки

Установите нужный веб-браузер.
Установка Node.js.
```
sudo apt install nodejs
```
Установите Диспетчер пакетов Node, который будет использоваться для установки React, Redux и JSX.
```
sudo apt install npm
```
Установка Visual Studio Code.
Установите расширение "Средства React Native" для Visual Studio Code.
При необходимости установите расширения для разработки с помощью Redux и JSX.

Создание приложения React является официально поддерживаемым способом создания приложения React и не требует дополнительной настройки, если вы используете npm 5.2 и более поздних версий. Дополнительные инструкции по использованию Create React App см . в документации по началу работы .

Другие компоненты, необходимые для веб-сайта на базе React, устанавливаются с помощью монитора производительности сети (NPM) в конкретное приложение. Например, введите следующие команды для установки библиотек Redux и JSX.

npm install react-redux
npm install react-jsx

Установка расширений отладчика

Установите расширения инструментов разработчика React, чтобы получить возможность изучать компоненты на базе React и записывать сведения о производительности.

Чтобы запустить приложение в режиме разработки, используйте встроенную команду npm start. Локальные и сетевые URL-адреса будут перечислены в выходных данных команды. Дополнительные сведения об использовании HTTPS вместо HTTP см. в статье "Создание приложения React: использование HTTPS в разработке".

Обновление параметров брандмауэра

В официальных сборках Ubuntu установлено средство iptables, которое по умолчанию будет разрешать весь входящий трафик. Но, если вы используете виртуальную машину с более ограничивающим брандмауэром, добавьте правило для входящего трафика, разрешающее трафик на сервер NodeJS. В примере ниже iptables используется для разрешения трафика на порт 3000.

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

Внимание

Преподаватели должны использовать шаблон виртуальной машины или другую виртуальную машину лаборатории для доступа к веб-сайту учащегося.

Следующие шаги

Теперь образ шаблона можно опубликовать в лаборатории. Дополнительные сведения см. в статье "Публикация виртуальной машины шаблона".

Ознакомьтесь со следующими статьями, связанными с настройкой лаборатории:

Поделиться через