One place for hosting & domains

      настройка

      Установка и настройка Elasticsearch в Ubuntu 20.04


      Введение

      Elasticsearch — это платформа для распределенного поиска и анализа данных в режиме реального времени. Она пользуется популярностью благодаря удобству в использовании, наличию мощных характеристик и возможности масштабирования.

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

      Предварительные требования

      Для работы с этим обучающим руководством вам потребуется следующее:

      • Сервер Ubuntu 20.04 с 4 ГБ оперативной памяти и 2 процессорами, а также настроенный пользователь без прав root с привилегиями sudo. Вы можете это сделать, воспользовавшись рекомендациями по начальной настройке сервера с Ubuntu 20.04.

      • Установленный OpenJDK 11.

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

      Шаг 1 — Установка и настройка Elasticsearch

      Компоненты Elasticsearch отсутствуют в репозиториях пакетов Ubuntu по умолчанию. Однако их можно установить с помощью APT после добавления списка источников пакетов Elastic.

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

      Для начала используйте cURL, инструмент командной строки для передачи данных с помощью URL, для импорта открытого ключа Elasticsearch GPG в APT. Обратите внимание, что мы используем аргументы -fsSL для подавления всех текущих и возможных ошибок (кроме сбоя сервера), а также чтобы разрешить cURL подать запрос на другой локации при переадресации. Выведите результаты команды cURL в программу apt-key, которая добавит открытый ключ GPG в APT.

      • curl -fsSL https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -

      Затем добавьте список источников Elastic в директорию sources.list.d, где APT будет искать новые источники:

      • echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" | sudo tee -a /etc/apt/sources.list.d/elastic-7.x.list

      Затем обновите списки пакетов, чтобы APT мог прочитать новый источник Elastic:

      Установите Elasticsearch с помощью следующей команды:

      • sudo apt install elasticsearch

      Теперь система Elasticsearch установлена и готова к настройке.

      Шаг 2 — Настройка Elasticsearch

      Для настройки Elasticsearch мы изменим ее основной файл конфигурации elasticsearch.yml, где хранится большинство вариантов конфигурации. Этот файл находится в директории /etc/elasticsearch.

      Используйте текстовый редактор на ваш выбор для изменения файла конфигурации Elasticsearch. Мы будем использовать nano:

      • sudo nano /etc/elasticsearch/elasticsearch.yml

      Примечание. Файл конфигурации Elasticsearch представлен в формате YAML. Это означает, что нам нужно сохранить формат отступов. Не добавляйте никакие дополнительные пробелы при редактировании этого файла.

      Файл elasticsearch.yml предоставляет варианты конфигурации для вашего кластера, узла, пути, памяти, сети, обнаружения и шлюза. Большинство из этих вариантов уже настроены в файле, но вы можете изменить их в соответствии с вашими потребностями. В нашем случае для демонстрации односерверной конфигурации мы будем регулировать настройки только для хоста сети.

      Elasticsearch прослушивает весь трафик порта 9200. По желанию вы можете ограничить внешний доступ к вашему экземпляру Elasticsearch, чтобы посторонние не смогли прочесть ваши данные или отключить ваш кластер Elasticsearch через REST API. Для ограничения доступа и повышения безопасности найдите строку с указанием network.host, уберите с нее значок комментария и замените значение на localhost, чтобы она выглядела следующим образом:

      /etc/elasticsearch/elasticsearch.yml

      . . .
      # ---------------------------------- Network -----------------------------------
      #
      # Set the bind address to a specific IP (IPv4 or IPv6):
      #
      network.host: localhost
      . . .
      

      Мы указали localhost, и теперь Elasticsearch прослушивает все интерфейсы и связанные IP-адреса. Если вы хотите, чтобы прослушивался только конкретный интерфейс, вы можете указать его IP-адрес вместо localhost. Сохраните и закройте elasticsearch.yml. Если вы используете nano, вы можете сделать это, нажав CTRL+X, затем Y, а затем ENTER.

      Это минимальные настройки, с которыми вы можете начинать использовать Elasticsearch. Теперь вы можете запустить Elasticsearch в первый раз.

      Запустите службу Elasticsearch с помощью systemctl. Запуск Elasticsearch может занять некоторое время. В другом случае вы можете увидеть сообщение об ошибке подключения.

      • sudo systemctl start elasticsearch

      Затем запустите следующую команду, чтобы активировать Elasticsearch при каждой загрузке сервера:

      • sudo systemctl enable elasticsearch

      После активации Elasticsearch можно переходить к следующему шагу, где будет обсуждаться вопрос защиты.

      Шаг 3 — Защита Elasticsearch

      По умолчанию любой пользователь, который имеет доступ к HTTP API может контролировать Elasticsearch. Это не всегда связано с риском для безопасности, так как Elasticsearch прослушивает только циклический интерфейс (имеется в виду 127.0.0.1), доступ к которому только локальный. Таким образом, невозможно получить публичный доступ к серверу, и, пока все пользователи сервера являются проверенными, вопрос безопасности не будет для вас серьезной проблемой.

      Если вам потребуется разрешить удаленный доступ к HTTP API, вы можете ограничить открытость сети с помощью настроек брандмауэра Ubuntu по умолчанию, UFW. Этот брандмауэр уже должен быть активирован, если вы выполнили все предварительные шаги по начальной настройке сервера с Ubuntu 20.04.

      Теперь мы настроим брандмауэр для доступа к порту HTTP API Elasticsearch по умолчанию (TCP 9200) для доверенного удаленного хоста. Как правило, это сервер, который вы используете при настройке на одном сервере, например 198.51.100.0. Для доступа введите следующую команду:

      • sudo ufw allow from 198.51.100.0 to any port 9200

      После этого вы можете активировать UFW с помощью команды:

      В заключение проверьте статус UFW с помощью следующей команды:

      Если вы правильно указали правила, вы должны получить следующий результат:

      Output

      Status: active To Action From -- ------ ---- 9200 ALLOW 198.51.100.0 22 ALLOW Anywhere 22 (v6) ALLOW Anywhere (v6)

      Теперь UFW должен быть активирован и настроен на защиту порта Elasticsearch 9200.

      Если вы хотите инвестировать в дополнительную защиту, Elasticsearch предлагает к покупке платный плагин Shield.

      Шаг 4 — Тестирование Elasticsearch

      Сейчас система Elasticsearch должна работать на порту 9200. Вы можете протестировать ее с помощью cURL и запроса GET.

      • curl -X GET 'http://localhost:9200'

      Вы должны получить следующий ответ:

      Output

      { "name" : "elasticsearch-ubuntu20-04", "cluster_name" : "elasticsearch", "cluster_uuid" : "qqhFHPigQ9e2lk-a7AvLNQ", "version" : { "number" : "7.6.2", "build_flavor" : "default", "build_type" : "deb", "build_hash" : "ef48eb35cf30adf4db14086e8aabd07ef6fb113f", "build_date" : "2020-03-26T06:34:37.794943Z", "build_snapshot" : false, "lucene_version" : "8.4.0", "minimum_wire_compatibility_version" : "6.8.0", "minimum_index_compatibility_version" : "6.0.0-beta1" }, "tagline" : "You Know, for Search" }

      Если вы получите ответ, аналогичный вышеуказанному, значит Elasticsearch работает корректно. Если нет, убедитесь, что вы правильно выполнили инструкции по установке и дали время системе Elasticsearch для полного запуска.

      Для более тщательной проверки Elasticsearch выполните следующую команду:

      • curl -XGET 'http://localhost:9200/_nodes?pretty'

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

      Шаг 5 — Использование Elasticsearch

      Чтобы начать использовать Elasticsearch, в первую очередь нужно добавить некоторые данные. Elasticsearch использует RESTful API, который соответствует обычным командам CRUD: create, read, update и delete. Для работы мы снова используем команду cURL.

      Ваша первая запись может выглядеть так:

      • curl -XPOST -H "Content-Type: application/json" 'http://localhost:9200/tutorial/helloworld/1' -d '{ "message": "Hello World!" }'

      Вы должны получить следующий ответ:

      Output

      {"_index":"tutorial","_type":"helloworld","_id":"1","_version":2,"result":"updated","_shards":{"total":2,"successful":1,"failed":0},"_seq_no":1,"_primary_term":1}

      С помощью cURL мы отправили запрос HTTP POST на сервер Elasticsearch. URI запроса — /tutorial/helloworld/1​​ с несколькими параметрами:

      • tutorial — это индекс данных в Elasticsearch.
      • helloworld — это тип.
      • 1 — это ID нашей записи по индексу и типу.

      Вы можете получить эту первую запись по запросу HTTP GET.

      • curl -X GET -H "Content-Type: application/json" 'http://localhost:9200/tutorial/helloworld/1' -d '{ "message": "Hello World!" }'

      Вывод должен выглядеть следующим образом:

      Output

      {"_index":"tutorial","_type":"helloworld","_id":"1","_version":1,"found":true,"_source":{ "message": "Hello, World!" }}

      Для изменения существующей записи вы можете использовать запрос HTTP PUT.

      • curl -X PUT -H "Content-Type: application/json" 'localhost:9200/tutorial/helloworld/1?pretty' -d '
      • {
      • "message": "Hello, People!"
      • }'

      Elasticsearch должна признать успешное изменение следующим образом:

      Output

      { "_index" : "tutorial", "_type" : "helloworld", "_id" : "1", "_version" : 2, "result" : "updated", "_shards" : { "total" : 2, "successful" : 1, "failed" : 0 }, "_seq_no" : 1, "_primary_term" : 1 }

      В примере, представленном выше, мы изменили message первой записи на «Hello, People!». При этом номер версии автоматически увеличился до 2.

      Возможно, вы заметили дополнительный аргумент pretty в представленном выше запросе. Он обеспечивает удобный для восприятия человеком формат, и вы можете для написания каждого поля данных использовать новый ряд. Вы также можете «приукрасить» ваши результаты при получении данных, чтобы получить более читабельный вывод, путем введения следующей команды:

      • curl -X GET -H "Content-Type: application/json" 'http://localhost:9200/tutorial/helloworld/1?pretty'

      Теперь ответ отформатирован так, чтобы синтаксис был удобен для человека:

      Output

      { "_index" : "tutorial", "_type" : "helloworld", "_id" : "1", "_version" : 2, "_seq_no" : 1, "_primary_term" : 1, "found" : true, "_source" : { "message" : "Hello, People!" } } }

      Мы добавили и запросили данные в Elasticsearch. Информацию о других операциях можно найти в документации API.

      Заключение

      Вы установили, настроили и начали использовать Elasticsearch. Чтобы продолжить изучение функций Elasticsearch, ознакомьтесь с официальной документацией Elasticsearch.



      Source link

      Настройка компонентов React с помощью свойств


      Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

      Введение

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

      После добавления свойств в ваш компонент вы будете использовать PropTypes для определения типа данных, которые ожидает компонент. PropTypes — это простая система типов для проверки того, что данные соответствуют ожидаемым типам во время исполнения. Они будут использоваться как в качестве документации, так и в качестве механизма проверки ошибок, который позволит сохранить прогнозируемое поведение вашего приложения по мере его масштабирования.

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

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

      Предварительные требования

      Шаг 1 — Создание пустого проекта

      На этом шаге мы создадим новый проект, используя Create React App. Затем вы удалите пример проекта и связанные файлы, которые устанавливаются при инициализации проекта. В заключение вы создадите простую структуру файлов для организации ваших компонентов.

      Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app:

      • npx create-react-app prop-tutorial

      После завершения создания проекта перейдите в его директорию:

      В новой вкладке или окне терминала запустите проект, используя скрипт start Create React App​​​. Браузер будет выполнять автообновление при изменениях, поэтому вы должны оставить этот скрипт работающим все время при работе:

      Вы получите запущенный локальный сервер. Если проект не был открыт в браузере, вы можете открыть его, перейдя на страницу http://localhost:3000/. Если вы запустили приложение на удаленном сервере, воспользуйтесь адресом http://your_IP_address:3000.

      Ваш браузер загрузит простое приложение React в качестве элемента Create React App:

      Шаблон проекта React

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

      Откройте src/App.js в текстовом редакторе. Это корневой компонент, который встраивается в страницу. Все компоненты будут запускаться отсюда. Дополнительную информацию об App.js можно найти в статье Настройка проекта React с помощью Create React App.

      Откройте src/App.js с помощью следующей команды:

      Вы увидите следующий файл:

      prop-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Удалите строку import logo from './logo.svg';​​. Затем замените весь код оператора return, который должен возвращать набор пустых тегов: <></>​​​. В результате вы получите страницу валидации, которая ничего не возвращает. Окончательный код будет выглядеть следующим образом:

      prop-tutorial/src/App.js

      
      import React from 'react';
      import './App.css';
      
      function App() {
        return <></>;
      }
      
      export default App;
      

      Сохраните изменения и закройте текстовый редактор.

      В заключение удалите логотип. Вы не будете использовать ее в вашем приложении. Кроме того, вам нужно удалить неиспользуемые файлы, которые не пригодятся вам в работе. Это позволит вам избежать путаницы в будущем.

      В окне терминала введите следующую команду:

      Если вы откроете ваш браузер, то увидите пустой экран.

      пустой экран в chrome

      Теперь, когда вы успешно очистили пример проекта Create React App, создайте простую структуру файлов. Это позволит вам поддерживать ваши компоненты изолированными и независимыми.

      Создайте каталог с именем components в каталоге src. В нем будут храниться все ваши пользовательские компоненты.

      Каждый компонент будет иметь собственный каталог для хранения файла компонента, а также стилей, изображений, если таковые имеются, и тестов.

      Создайте каталог для App:

      Переместите все файлы App в этот каталог. Используйте подстановочный символ * для выбора любых файлов, начинающихся с App. вне зависимости от их расширения. Затем используйте команду mv для их отправки в новый каталог.

      • mv src/App.* src/components/App

      В заключение обновите относительный путь импорта в index.js, который представляет собой корневой компонент и инициализирует весь процесс.

      Оператор импорта должен указывать на файл App.js в каталоге App, поэтому необходимо внести следующее изменение:

      prop-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      Сохраните и закройте файл.

      Теперь, когда проект настроен, вы можете создать ваш первый компонент.

      Шаг 2 — Настройка динамических компонентов со свойствами

      На этом шаге вы создадите компонент, который будет изменяться на основе передаваемой информации, т.е. свойств. Свойства — это аргументы, которые вы передаете функции или классу, но так как ваши компоненты трансформируются в HTML-объекты с JSX, вы будете передавать свойства в виде HTML-атрибутов. В отличие от HTML-элементов, вы можете передавать множество разных типов данных, от строк до массивов, объектов и даже функций.

      Здесь вы создадите компонент, который будет отображать информацию о животных. Этот компонент будет получать имя и научное наименование животного в форме строк, размер в форме целого числа, питание в форме массива строк и дополнительную информацию в форме объекта. Вы будете передавать информацию новому компоненту в форме свойств и использовать эти данные в вашем компоненте.

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

      Добавление данных

      Во-первых, вам потребуются шаблонные данные. Создайте файл в каталоге src/App с именем data.

      • touch src/components/App/data.js

      Откройте новый файл в текстовом редакторе:

      • nano src/components/App/data.js

      Далее добавьте массив объектов, который вы будете использовать в качестве примера данных:

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: 140,
          diet: ['meat'],
        },
        {
          name: 'Gorilla',
          scientificName: 'Gorilla beringei',
          size: 205,
          diet: ['plants', 'insects'],
          additional: {
            notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
          }
        },
        {
          name: 'Zebra',
          scientificName: 'Equus quagga',
          size: 322,
          diet: ['plants'],
          additional: {
            notes: 'There are three different species of zebra.',
            link: 'https://en.wikipedia.org/wiki/Zebra'
          }
        }
      ]
      

      Массив объектов содержит разные данные и дает вам возможность использовать различные свойства. Каждый объект представляет собой отдельное животное с именем, научным наименованием, размером, питанием и опциональным полем дополнительных данных, которое будет содержать ссылки или заметки. В этом коде вы также экспортировали массив default.

      Сохраните и закройте файл.

      Создание компонентов

      Затем создайте временный компонент AnimalCard. Этот компонент будет получать свойства и отображать данные.

      Сначала создайте каталог в src/components​​​ с названием AnimalCard, а затем файл с именем src/components/AnimalCard/AnimalCard.js и CSS-файл с именем src/components/AnimalCard/AnimalCard.css.

      • mkdir src/components/AnimalCard
      • touch src/components/AnimalCard/AnimalCard.js
      • touch src/components/AnimalCard/AnimalCard.css

      Откройте AnimalCard.js​​​ в текстовом редакторе:

      • nano src/components/AnimalCard/AnimalCard.js

      Добавьте базовый компонент, который импортирует CSS и возвращает тег <h2>.

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard() {
        return <h2>Animal</h2>
      }
      

      Сохраните и закройте файл. Теперь вам нужно импортировать данные и компонент в базовый компонент App.

      Откройте src/components/App/App.js​​​:

      • nano src/components/App/App.js

      Импортируйте данные и компонент, а затем пройдите по данным, возвращая компонент для каждого элемента в массиве:

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      import data from './data';
      import AnimalCard from '../AnimalCard/AnimalCard';
      import './App.css';
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard key={animal.name}/>
            ))}
          </div>
        )
      }
      
      export default App;
      

      Сохраните и закройте файл. Здесь вы используете метод массива .map() для итерации по данным. Кроме добавления цикла у вас также имеется оборачивающий div с классом, который вы будете использовать для стилей, и тег <h1> для наименования вашего проекта.

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

      Проект React в браузере без стилей

      Далее добавьте несколько стилей для выравнивания элементов. Откройте App.css:

      • nano src/components/App/App.css

      Замените его содержимое на следующее для организации элементов:

      prop-tutorial/src/components/App/App.css

      .wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 20px;
      }
      
      .wrapper h1 {
          text-align: center;
          width: 100%;
      }
      

      Здесь используется flexbox для приведения в порядок данных и их выравнивания. padding добавляет некоторое пространство в окне браузера. justify-content будет обеспечивать дополнительное пространство между элементами, а .wrapper h1​​​ будет размещать заголовок Animal на всю его длину.

      Сохраните и закройте файл. Когда вы сделаете это и обновите браузер, то увидите, что между данными теперь есть определенное свободное пространство.

      Проект React в браузере с распределенными данными

      Добавление свойств

      Теперь, когда у вас есть настроенные компоненты, вы можете добавить свое первое свойство. При итерации по данным у вас был доступ к каждому объекту в массиве data и элементам, которые он содержит. Вы будете добавлять каждый элемент данных в отдельное свойство, которое затем будет использоваться в компоненте AnimalCard.

      Откройте App.js:

      • nano src/components/App/App.js

      Добавьте свойство name в AnimalCard.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard
                key={animal.name}
                name={animal.name}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Сохраните и закройте файл. Свойство name выглядит как стандартный HTML-атрибут, но вместо строки вы передаете свойство name объекта animal в фигурных скобках.

      Теперь, когда вы передали одно свойство в новый компонент, необходимо использовать его. Откройте AnimalCard.js:

      • nano src/components/AnimalCard/AnimalCard.js

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

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      
      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard(props) {
        const { name } = props;
        return (
          <h2>{name}</h2>
        );
      }
      

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

      После деструктурирования объекта вы можете использовать отдельные элементы данных. В данном случае вы будете использовать заголовок в теге <h2>, включающий значение в фигурных скобках, чтобы React мог использовать его в качестве JavaScript.

      Также вы можете использовать свойство в объекте prop, используя запись через точку. В качестве примера вы можете создать элемент <h2>​​​ следующим образом: <h2>{props.title}</h2>​​​. Преимущество деструктурирования состоит в том, что вы можете собирать неиспользуемые свойства и использовать оператор rest объекта.

      Сохраните и закройте файл. Сделав это и перезагрузив браузер, вы увидите конкретное имя для каждого животного вместо заполнителя.

      Проекты React с указанием имен животных

      Свойство name представляет собой строку, но строка может быть любым типом данных, который вы можете передавать функции JavaScript. Чтобы посмотреть, как это работает, добавьте остальные данные.

      Откройте файл App.js:

      • nano src/components/App/App.js

      Добавьте свойство для каждого из следующих элементов: scientificName, size, diet и additional. Они сдержат строки, целые числа, массивы и объекты.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {albums.map(album => (
              <AnimalCard
                additional={animal.additional}
                diet={animal.diet}
                key={animal.name}
                name={animal.name}
                scientificName={animal.scientificName}
                size={animal.size}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Поскольку вы создаете объект, вы можете добавить их в любом желаемом порядке. Использование алфавитного порядка повышает читаемость списка свойств, особенно для больших списков. Также вы можете добавить их в одной строке, но их разделение на отдельные строки делает код более читабельным.

      Сохраните и закройте файл. Откройте AnimalCard.js.

      • nano src/components/AnimalCard/AnimalCard.js

      На этот раз выполните деструктуризацию свойств списка параметров функции и используйте данные в компоненте:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
        additional,
        diet,
        name,
        scientificName,
        size
      }) {
        return (
          <div>
            <h2>{name}</h2>
            <h3>{scientificName}</h3>
            <h4>{size}kg</h4>
            <div>{diet.join(', ')}.</div>
          </div>
        );
      }
      

      После получения данных вы можете добавить scientificName и size в теги заголовка, но вам нужно превратить массив в строку, чтобы React мог отобразить их на странице. Вы можете сделать это с помощью join(', '), который будет создавать разделенный запятой список.

      Сохраните и закройте файл. Сделав это и обновив браузер, вы увидите структурированные данные.

      Проект React с полным списком данных для животных

      Вы можете создать аналогичный список с объектом additional, но вместо этого добавьте функцию для оповещения пользователя с данными. Это даст вам возможность передавать функции в виде свойств, а затем использовать данные внутри компонента при вызове функции.

      Откройте App.js:

      • nano src/components/App/App.js

      Создайте функцию showAdditionalData, которая будет конвертировать объект в строку и отображать ее в качестве оповещения.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      
      function showAdditional(additional) {
        const alertInformation = Object.entries(additional)
          .map(information => `${information[0]}: ${information[1]}`)
          .join('n');
        alert(alertInformation)
      };
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard
                additional={animal.additional}
                diet={animal.diet}
                key={animal.name}
                name={animal.name}
                scientificName={animal.scientificName}
                showAdditional={showAdditional}
                size={animal.size}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Функция showAdditional конвертирует объект в массив пар, где первый элемент — это ключ, а второй — значение. Затем она преобразовывает данные, конвертируя пару ключей в строку. После этого функция добавляет разделитель строки n, прежде чем передавать полную строку в сигнальную функцию.

      Поскольку JavaScript может принимать функции в качестве аргументов, React также может принимать функции в качестве свойств. Поэтому вы можете передать showAdditional в AnimalCard в качестве свойства с именем showAdditional.

      Сохраните и закройте файл. Откройте AnimalCard:

      • nano src/components/AnimalCard/AnimalCard.js

      Извлеките функцию showAdditional из объекта свойства, затем создайте <button> с событием onClick, которое вызывает функцию с объектом additional:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
        additional,
        diet,
        name,
        scientificName,
        showAdditional,
        size
      }) {
        return (
          <div>
            <h2>{name}</h2>
            <h3>{scientificName}</h3>
            <h4>{size}kg</h4>
            <div>{diet.join(', ')}.</div>
            <button onClick={() => showAdditional(additional)}>More Info</button>
          </div>
        );
      }
      

      Сохраните файл. Сделав это и обновив браузер, вы увидите кнопку после каждой карточки. При нажатии на кнопку, вы получите оповещение с дополнительными данными.

      Оповещение с информацией

      Если вы попробуете нажать More Info для карточки Lion, то получите ошибку. Это связано с тем, что для льва дополнительные данные отсутствуют. Вы увидите, как исправить это, в шаге 3.

      В заключение давайте добавим немного оформления в наш проект. Добавьте className для animal-wrapper в div в AnimalCard:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
        return (
          <div className="animal-wrapper">
      ...
          </div>
        )
      }
      

      Сохраните и закройте файл. Откройте AnimalCard.css:

      • nano src/components/AnimalCard/AnimalCard.css

      Добавьте CSS для добавления тонкой границы и отступа для карточек и кнопки:

      prop-tutorial/src/components/AnimalCard/AnimalCard.css

      .animal-wrapper {
          border: solid black 1px;
          margin: 10px;
          padding: 10px;
          width: 200px;
      }
      
      .animal-wrapper button {
          font-size: 1em;
          border: solid black 1px;
          padding: 10;
          background: none;
          cursor: pointer;
          margin: 10px 0;
      }
      

      Это код CSS добавит небольшую границу для карточки и заменит стиль кнопки, используемый по умолчанию, на границу и отступ. cursor: pointer​​​ будет менять курсор при наведении на кнопку.

      Сохраните и закройте файл. После выполнения этих действий и обновления браузера вы увидите данные в отдельных карточках.

      Проект React с добавленными стилями для карточек животных

      На данный момент вы создали два пользовательских компонента. Вы передали данные второму компоненту из первого компонента, используя свойства. Свойства включают разные данные, такие как строки, целые числа, массивы, объекты и функции. В вашем втором компоненте вы использовали свойства для создания динамического компонента с помощью JSX.

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

      Шаг 3 — Создание предсказуемых свойств с помощью PropTypes и defaultProps

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

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

      Пакет prop-types устанавливается вместе с Create React App, поэтому для его использования необходимо только импортировать его в ваш компонент.

      Откройте AnimalCard.js:

      • nano src/components/AnimalCard/AnimalCard.js

      Затем импортируйте PropTypes из prop-types:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      

      Добавьте PropTypes прямо в функцию компонента. В JavaScript функции являются объектами, что означает, что вы можете добавить свойства, используя точечный синтаксис. Добавьте следующие PropTypes в AnimalCard.js:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      
      AnimalCard.propTypes = {
        additional: PropTypes.shape({
          link: PropTypes.string,
          notes: PropTypes.string
        }),
        diet: PropTypes.arrayOf(PropTypes.string).isRequired,
        name: PropTypes.string.isRequired,
        scientificName: PropTypes.string.isRequired,
        showAdditional: PropTypes.func.isRequired,
        size: PropTypes.number.isRequired,
      }
      

      Сохраните и закройте файл.

      Как видите, существует множество разных PropTypes. Это только небольшой пример; изучите официальную документацию React, чтобы узнать об остальных типах, которые вы можете использовать.

      Давайте начнем со свойства name. Здесь вы указываете, что в name должна находиться строка. Свойство scientificName аналогично предыдущему примеру. sizeчисло, которое может включать как числа с плавающей точкой, например, 1.5, так и целые числа, например 6. showAdditional — это функция (func).

      diet же имеет определенные отличия. В данном случае вы указываете, что diet представляет собой массив, но вам также необходимо указать, что будет содержать этот массив. В нашем случае массив будет содержать только строки. Если вы хотите смешивать типы, то можете использовать другое свойство oneOfType, которое принимает массив валидных значений PropTypes. Вы можете использовать oneOfType где угодно, так что если вы хотите, чтобы size принимал числа или строки, внесите следующие изменения:

      size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
      

      Свойство additional также немного более сложное. В этом случае вы указываете объект, но, чтобы внести большую ясность, вы указываете, что должен содержать объект. Для этого вы можете использовать PropTypes.shape, принимающий объект с дополнительными полями, которым требуются собственные значения PropTypes. В нашем случае link и notes имеют значение PropTypes.string.

      В настоящее время все данные имеют правильную форму и отвечают свойствам. Чтобы узнать, что произойдет, если значение PropTypes не будет совпадать, откройте ваши данные:

      • nano src/components/App/data.js

      Измените для size значение на строку в первом элементе:

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: '140',
          diet: ['meat'],
        },
      ...
      ]
      

      Сохраните файл. После выполнения этих действий и обновления браузера вы увидите ошибку в консоли.

      Error

      index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`. in AnimalCard (at App.js:18) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

      Браузер с ошибкой типизации

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

      Измените данные обратно на правильный тип:

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: 140,
          diet: ['meat'],
        },
      ...
      ]
      

      Сохраните и закройте файл.

      Откройте AnimalCard.js:

      • nano src/components/AnimalCard/AnimalCard.js

      Каждое свойство, за исключением additional, имеет параметр isRequired. Это означает, что они должны быть обязательно указаны. Если вы не укажете обязательное свойство, код все равно скомпилируется, но вы получите ошибку исполнения в консоли.

      Если свойство не обязательное, вы можете добавить значение по умолчанию. Рекомендуется всегда добавлять значение по умолчанию для предотвращения ошибок при исполнении, если свойство не обязательное. Например, в компоненте AnimalCard вы вызываете функцию с данными additional. Если их там нет, функция попытается получить их и изменить несуществующий объект, в результате чего приложение упадет.

      Чтобы предотвратить эту проблему, добавьте значение defaultProp для additional:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      
      AnimalCard.propTypes = {
        additional: PropTypes.shape({
          link: PropTypes.string,
          notes: PropTypes.string
        }),
      ...
      }
      
      AnimalCard.defaultProps = {
        additional: {
          notes: 'No Additional Information'
        }
      }
      

      Вы добавляете значение defaultProps в функцию, используя точечный синтаксис, как вы это делали для propTypes, затем вы добавляете значение по умолчанию, которое компонент должен использовать, если свойство не определено. В нашем случае вы подставляете форму additional, включая сообщение, которое не содержит дополнительной информации.

      Сохраните и закройте файл. После этого обновите браузер. После обновления страницы нажмите кнопку More Info​​​ карточки Lion. У нее нет поля additional в данных, поэтому свойство не определено. Но AnimalCard будет заменять свойство по умолчанию.

      Браузер с сообщением по умолчанию в оповещении

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

      Заключение

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

      Свойства — это важнейший инструмент для создания сложных приложений, дающий возможность создания компонентов, которые могут адаптироваться к получаемым данным. С помощью PropTypes вы создаете предсказуемые и понятные компоненты, которые дадут команде возможность повторно использовать работу друг друга для создания гибкой и стабильной базы кода. Если вас интересуют другие обучающие модули по React, ознакомьтесь с нашей страницей тем по React или вернитесь на страницу серии Программирование на React.js.



      Source link

      Установка Django и настройка среды разработки в Ubuntu 20.04


      Введение

      Django — бесплатная веб-структура с открытым исходным кодом, написанная на Python. Она построена на принципах масштабируемости, многократного использования элементов и быстрой разработки. Также она отличается согласованностью и слабой связанностью компонентов, за счет чего отдельные компоненты не зависят друг от друга.

      В этом обучающем модуле мы выполним настройку среды Django для целей разработки на сервере Ubuntu 20.04. Для общедоступного сайта нужно учитывать и дополнительные аспекты, включая подключение к базе данных, настройку доменного имени и добавление уровней безопасности. Мы предлагаем много разных обучающих модулей Django, которые помогут вам на разных этапах построения приложений. Все они отмечены тегом Django.

      Предварительные требования

      Для прохождения этого обучающего модуля вам потребуется следующее:

      Шаг 1 — Установка Django

      Существует несколько способов установки Django, в том числе установка с помощью диспетчера пакетов Python pip в виртуальной среде.

      В домашнем каталоге сервера мы создадим каталог, где будет располагаться наше приложение Django. Используйте следующую команду для создания каталога с именем django-apps или другим предпочитаемым именем. Затем перейдите в каталог.

      • mkdir django-apps
      • cd django-apps

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

      Активируйте виртуальную среду с помощью следующей команды:

      После активации префикс изменится на (env),что будет выглядеть примерно так, в зависимости от каталога, в котором вы находитесь:

      Установите пакет Django в этой среде с помощью pip. Установка Django позволит нам создавать и запускать приложения Django.

      Для подтверждения установки Django следует запустить проверку версии:

      Результат должен выглядеть примерно так:

      Output

      3.0.6

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

      Шаг 2 — Настройка брандмауэра

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

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

      Шаг 3 — Запуск проекта

      Теперь мы можем сгенерировать приложение, используя утилиту командной строки django-admin, предназначенную для выполнения административных задач Python. Затем мы используем команду startproject для создания структуры каталогов проекта для нашего тестового сайта.

      Запустите следующую команду в каталоге django-apps:

      • django-admin startproject testsite

      Примечание. При запуске команды django-admin startproject <projectname> каталогу проекта и пакету проекта будет присвоено имя <projectname>, а сам проект будет создан в каталоге запуска команды. Если указан необязательный параметр <destination>, Django использует указанный в нем каталог в качестве каталога проекта и создаст в нем файл manage.py и пакет проекта.

      Посмотрим, какие файлы проекта были только что созданы. Перейдите в каталог testsite и выведите содержимое каталога, чтобы просмотреть список созданных файлов:

      Output

      manage.py testsite

      Вы увидите на экране, что этот каталог содержит файл manage.py и папку testsite. Файл manage.py аналогичен файлу django-admin и помещает пакет проекта в sys.path. Также он задает переменную среды DJANGO_SETTINGS_MODULE, указывающую на файл settings.py вашего проекта.

      Вы можете просмотреть скрипт manage.py в терминале, запустив команду less следующим образом:

      Закончив чтение скрипта, нажмите q, чтобы закрыть просмотр файла.

      Теперь перейдите в каталог testsite для просмотра других созданных файлов:

      Затем запустите следующую команду для вывода списка содержимого каталога:

      Вы увидите четыре файла:

      Output

      __init__.py asgi.py settings.py urls.py wsgi.py

      Расскажем об этих файлах подробнее:

      • __init__.py выступает как точка входа вашего проекта Python.
      • asgi.py содержит конфигурацию для опционального развертывания на асинхронный интерфейс шлюза сервера ASGI, являющийся стандартным для синхронных или асинхронных приложений и считающийся преемником стандарта WSGI (см. ниже).
      • settings.py описывает конфигурацию установки Django и сообщает Django о том, какие доступны настройки.
      • urls.py содержит список urlpatterns, осуществляющий перенаправление и сопоставление URL с представлениями.
      • wsgi.py содержит конфигурацию интерфейса шлюза веб-сервера WSGI, стандартного варианта для синхронных приложений Python.

      Примечание. Хотя файлы по умолчанию уже сгенерированы, вы можете изменить файл asgi.py или wsgi.py в любое время в зависимости от требований разработки.

      Шаг 4 — Настройка Django

      Теперь мы можем запустить сервер и посмотреть сайт на указанном хосте и порту с помощью команды runserver.

      IP-адрес вашего сервера нужно будет добавить в список ALLOWED_HOSTS в файце settings.py в каталоге ~/test_django_app/testsite/testsite/.

      Как указано в документации по Django, переменная ALLOWED_HOSTS содержит «список строк, представляющих хосты и доменные имена, которые может обслуживать этот сайт Django. Эта мера безопасности предназначена для предотвращения атак через заголовки хоста HTTP, которые возможны даже в кажущихся безопасными конфигурациях веб-серверов».

      Вы можете использовать предпочитаемый текстовый редактор, чтобы добавить свой IP-адрес. Например, если вы используете nano, запустите следующую команду:

      • nano ~/django-apps/testsite/testsite/settings.py

      После запуска команды перейдите в раздел Allowed Hosts документа и добавьте IP-адрес вашего сервера в квадратных скобках в двойных или одинарных кавычках.

      settings.py

      """
      Django settings for testsite project.
      
      Generated by 'django-admin startproject' using Django 2.0.
      ...
      """
      ...
      # SECURITY WARNING: don't run with debug turned on in production!
      DEBUG = True
      
      # Edit the line below with your server IP address
      ALLOWED_HOSTS = ['your-server-ip']
      ...
      

      Чтобы сохранить изменения и выйти из nano, нажмите CTRL + x, а затем нажмите y. Теперь откроем наше веб-приложение в браузере.

      Шаг 5 — Доступ к веб-приложению Django

      Мы завершили настройку конфигурации, и теперь вы можете вернуться в каталог, где располагается файл manage.py:

      • cd ~/django-apps/testsite/

      Теперь запустите следующую команду, заменяющую your-server-ip на IP-адрес вашего сервера:

      • python manage.py runserver 0.0.0.0:8000

      В заключение вы можете перейти по ссылке ниже, чтобы посмотреть карка сайта. Для этого замените выделенный текст фактическим IP-адресом вашего сервера:

      http://your-server-ip:8000/
      

      После загрузки страницы вы увидите следующее:

      Страница Django по умолчанию

      Это подтверждает, что установка Django выполнена правильно, и наш тестовый проект нормально работает.

      Чтобы получить доступ к интерфейсу администратора, добавьте /admin/ в конец URL:

      http://your_server_ip:8000/admin/
      

      Вы перейдете на экран входа:

      Вход в панель администратора Django

      При вводе имени администратора и пароля, которые вы только что создали, вы получите доступ к основному административному разделу сайта:

      Страница администратора Django

      Дополнительную информацию о работе с интерфейсом администратора Django можно найти в статье «Активация и подключение интерфейса администратора Django».

      Закончив тестирование приложения, нажмите CTRL + C для остановки команды runserver. Вы вернетесь в среду программирования.

      Когда вы будете готовы покинуть вашу среду Python, вы можете запустить команду deactivate:

      После отключения среды программирования вы вернетесь в командную строку терминала.

      Заключение

      В этом обучающем модуле мы успешно выполнили установку Django и настроили среду разработки, чтобы начать работать с вашим приложением Django.

      Теперь у вас есть необходимый фундамент для построения веб-приложений Django.



      Source link