One place for hosting & domains

      создание

      Создание резервных копий, восстановление и миграция базы данных MongoDB в Ubuntu 20.04


      Автор выбрал COVID-19 Relief Fund для получения пожертвования в рамках программы Write for DOnations.

      Введение

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

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

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

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

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

      Шаг 1 — Использование JSON и BSON в MongoDB

      Прежде чем продолжить прохождение этого учебного модуля, важно понять некоторые базовые моменты. Если у вас есть опыт работы с другими системами баз данных NoSQL, такими как Redis, вы можете найти некоторое сходство с ними при работе с MongoDB.

      MongoDB использует для хранения информации форматы JSON и BSON (двоичный JSON). JSON – это удобный для прочтения человеком формат, идеально подходящий для экспорта и импорта данных. Вы сможете управлять экспортированными данными в этом формате с помощью любого инструмента, поддерживающего JSON, включая простой текстовый редактор.

      Пример документа JSON:

      Example of JSON Format

      {"address":[
          {"building":"1007", "street":"Park Ave"},
          {"building":"1008", "street":"New Ave"},
      ]}
      

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

      Во-вторых, вам не нужно беспокоиться о явном создании базы данных MongoDB. Если база данных, которую вы указываете для импорта, еще не существует, она создается автоматически. Еще лучше обстоят дела со структурой коллекций (таблицы базы данных). В отличие от других СУБД, в MongoDB структура создается автоматически при вставке первого документа (строка базы данных).

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

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

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

      Шаг 2 — Использование mongodump для резервного копирования базы данных MongoDB

      Вначале поговорим о резервном копировании базы данных MongoDB.

      Одним из самых важных аргументов команды mongodump является аргумент --db, указывающий имя базы данных, резервную копию которой вы хотите создать. Если вы не укажете имя базы данных, mongodump создаст резервные копии всех ваших баз данных. Второй важный аргумент — это аргумент --out, определяющий каталог, в котором будут сохранены данные. Давайте создадим резервную копию базы данных newdb и сохраним ее в каталоге /var/backups/mongobackups. В идеальной ситуации все наши резервные копии будут содержаться в каталоге с текущей датой /var/backups/mongobackups/10-29-20.

      Вначале создайте каталог /var/backups/mongobackups:

      • sudo mkdir /var/backups/mongobackups

      Затем запустите команду mongodump:

      • sudo mongodump --db newdb --out /var/backups/mongobackups/`date +"%m-%d-%y"`

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

      Output

      2020-10-29T19:22:36.886+0000 writing newdb.restaurants to 2020-10-29T19:22:36.969+0000 done dumping newdb.restaurants (25359 documents)

      Обратите внимание, что в вышеуказанном пути каталога мы использовали формат date +"%m-%d-%y", который автоматически получает текущую дату. Это позволяет нам размещать резервные копии в каталогах вида /var/backups/10-29-20/. Это особенно удобно для автоматизации резервного копирования.

      Теперь у вас имеется полная резервная копия базы данных newdb в каталоге /var/backups/mongobackups/10-29-20/newdb/. В этой резервной копии есть все необходимое для правильного восстановления newdb и сохранения так называемой «корректности».

      Как правило, резервное копирование выполняется регулярно, и обычно это делается в периоды наименьшей нагрузки на сервер. Вы можете задать команду mongodump как задачу планировщика (cron), чтобы она выполнялась регулярно, например, каждый день в 03:03.

      Для этого откройте редактор crontab:

      Обратите внимание, что при запуске sudo crontab вы будете редактировать кроны пользователя root. Рекомендуется сделать именно это, потому что если вы настроите кроны для своего пользователя, они могут выполняться неправильно, особенно если для вашего профиля sudo требуется проверка пароля.

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

      crontab

      3 3 * * * mongodump --out /var/backups/mongobackups/`date +"%m-%d-%y"`
      

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

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

      Например, вы можете использовать следующую команду bash для удаления всех резервных копий старше семи дней:

      • find /var/backups/mongobackups/ -mtime +7 -exec rm -rf {} ;

      Аналогично предыдущей команде mongodump, вы можете добавить эту команду как задание cron. Его следует запускать непосредственно перед началом следующего резервного копирования, например, в 03:01. Для этого снова откройте crontab:

      Вставьте следующую строку:

      crontab

      1 3 * * * find /var/backups/mongobackups/ -mtime +7 -exec rm -rf {} ;
      

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

      Выполнение всех задач, описанных на этом шаге, обеспечит надлежащее решение резервного копирования для ваших баз данных MongoDB.

      Шаг 3 — Использование mongorestore для восстановления и переноса базы данных MongoDB

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

      Давайте продолжим наши примеры с базой данных newdb и посмотрим, как мы можем восстановить ее с предыдущей резервной копии. Вначале мы укажем имя базы данных с аргументом --nsInclude. Если использовать newdb.*, мы восстановим все коллекции. Для восстановления отдельной коллекции, например restaurants, следует использовать newdb.restaurants.

      Используя аргумент --drop мы обеспечим предварительное отбрасывание целевой базы данных так, чтобы резервная копия была восстановлена в чистой базе данных. Как последний аргумент мы зададим каталог последней резервной копии, который будет выглядеть примерно так: /var/backups/mongobackups/10-29-20/newdb/.

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

      • sudo mongorestore --db newdb --drop /var/backups/mongobackups/10-29-20/newdb/

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

      Output

      2020-10-29T19:25:45.825+0000 the --db and --collection args should only be used when restoring from a BSON file. Other uses are deprecated and will not exist in the future; use --nsInclude instead 2020-10-29T19:25:45.826+0000 building a list of collections to restore from /var/backups/mongobackups/10-29-20/newdb dir 2020-10-29T19:25:45.829+0000 reading metadata for newdb.restaurants from /var/backups/mongobackups/10-29-20/newdb/restaurants.metadata.json 2020-10-29T19:25:45.834+0000 restoring newdb.restaurants from /var/backups/mongobackups/10-29-20/newdb/restaurants.bson 2020-10-29T19:25:46.130+0000 no indexes to restore 2020-10-29T19:25:46.130+0000 finished restoring newdb.restaurants (25359 documents) 2020-10-29T19:25:46.130+0000 done

      В примере выше мы восстанавливаем данные на том же сервере, на котором создали резервную копию. Если вы хотите перенести данные на другой сервер, используя эту же методику, вам следует скопировать на другой сервер каталог резервной копии, в нашем случае это /var/backups/mongobackups/10-29-20/newdb/.

      Заключение

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



      Source link

      Создание стилей панелей прокрутки с помощью CSS


      Введение

      В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.

      В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.

      В этом учебном модуле вы научитесь использовать CSS, чтобы настраивать панели прокрутки для поддержки современных браузеров.

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

      Для понимания этой статьи вам потребуется:

      Создание стилей панелей прокрутки для Chrome, Edge и Safari

      Для создания стилей панелей прокрутки для Chrome, Edge и Safari требуется псевдоэлемент -webkit-scrollbar с префиксом поставщика.

      Вот пример с использованием псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track и ::webkit-scrollbar-thumb:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

      Снимок экрана примера веб-страницы с персонализированной синей панелью прокрутки на оранжевом фоне.

      Данный код работает с последними версиями браузеров Chrome, Edge и Safari.

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

      Создание стилей панелей прокрутки в Firefox

      Для создания стилей панелей прокрутки для Firefox используются новые CSS Scrollbars.

      В этом примере используются свойства scrollbar-width и scrollbar-color:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

      Снимок экрана примера веб-страницы с персонализированной синей панелью прокрутки на оранжевом фоне.

      Эта спецификация похожа на спецификацию -webkit-scrollbar способом контроля цвета панели прокрутки. Однако в настоящее время отсутствует поддержка заполнения и округления курсора.

      Создание готовых к будущему стилей панели прокрутки

      Вы можете писать код CSS так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и спецификацию CSS Scrollbars.

      В этом примере используются свойства scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Браузеры Blink и WebKit игнорируют правила, которые они не распознают, и применяют правила -webkit-scrollbar. Браузеры Firefox игнорируют правила, которые они не распознают, и применяют правила CSS Scrollbars. Когда в браузерах Blink и WebKit полностью перестанет использоваться спецификация -webkit-scrollbar, они постепенно перейдут на новую спецификацию CSS Scrollbars.

      Заключение

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

      Также существует возможность моделирования панели прокрутки. Для этого нужно скрыть панель прокрутки по умолчанию и использовать JavaScript для определения высоты и положения прокрутки. Однако эти подходы связаны с ограничениями в таких случаях, как инерционная прокрутка (например, замедление движения при прокрутке с использованием трекпада).

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



      Source link

      Создание эффекта многоуровневого скроллинга с помощью чистого кода CSS в Chrome


      Введение

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

      В этом учебном модуле вы настроите несколько строк кода CSS для создания эффекта многоуровневого скроллинга на веб-странице. В качестве замещающих фоновых изображений мы будем использовать изображения с сайта placekitten.com.

      После завершения учебного модуля мы получим веб-страницу с кодом CSS, реализующим эффект многоуровневого скроллинга.

      Предупреждение. В этой статье описываются экспериментальные свойства CSS, доступные не во всех браузерах. Этот проект протестирован в браузере Chrome и работает в нем. Данная методика не очень хорошо работает в браузерах Firefox, Safari и iOS в связи с некоторыми оптимизациями этих браузеров.

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

      На этом шаге мы используем командную строку для создания и настройки папки и файлов нового проекта. Для начала откройте терминал и создайте новую папку проекта.

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

      В данном случае мы присвоили папке имя css-parallax. Перейдите в папку css-parallax:

      Затем создайте файл index.html в папке css-parallax с помощью команды nano:

      В этот файл мы поместим весь код HTML для данного проекта.

      На следующем шаге мы начнем создавать структуру веб-страницы.

      Шаг 2 — Настройка структуры приложения

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

      Добавьте в файл index.html следующий код:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Это базовая структура большинства веб-страниц, которые используют код HTML.

      Добавьте следующий код внутри тега <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

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

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

      Шаг 3 — Создание файла CSS и добавление начального кода CSS

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

      Для начала создайте файл styles.css в папке css-parallax с помощью команды nano:

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

      Затем начнем работать с классом .wrapper. Добавьте в файл styles.css следующий код:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Класс .wrapper устанавливает свойства перспективы и скроллинга для всей страницы целиком.

      Чтобы эффект работал, необходимо задать фиксированное значение высоты элемента wrapper. Вы можете использовать для единицы окна экрана vh значение 100, чтобы получить полную высоту окна экрана.

      При масштабировании изображений они добавляют на экран горизонтальную панель прокрутки, которую вы можете отключить, добавив выражение overflow-x: hidden;. Свойство perspective моделирует расстояние от окна экрана до псевдоэлементов, которые мы будем создавать и трансформировать в коде CSS.

      На следующем шаге мы добавим дополнительный код CSS для настройки стиля веб-страницы.

      Шаг 4 — Добавление стилей для класса .section

      На этом шаге мы добавим стили в класс .section.

      В файле styles.css необходимо добавить следующий код под классом wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

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

      Установите позицию relative так, что дочерний элемент .parallax::after можно было абсолютно позиционировать по отношению к родительскому элементу .section.

      Каждый раздел имеет параметр view-height(vh) со значением 100, чтобы занимать полную высоту окна просмотра. Это значение можно изменить и установить любую высоту, предпочитаемую для каждого раздела.

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

      Затем мы добавим псевдоэлемент и установим для него стиль для создания эффекта многоуровневой прокрутки в двух разделах вашего кода HTML.

      Шаг 5 — Добавление стилей для класса .parallax

      На этом шаге мы добавим стили в класс .parallax.

      Вначале мы добавим псевдоэлемент в класс .parallax, к которому применяется стиль.

      Примечание. Дополнительную информацию о псевдоэлементах CSS можно найти в веб-документах MDN.

      Добавьте следующий код под классом .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

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

      Псевдоэлемент является последним дочерним элементом элемента с классом .parallax.

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

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

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

      Шаг 6 — Добавление изображений и фона для каждого раздела

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

      Вначале мы добавим сплошной фоновый цвет в раздел .static, вставив следующий код после класса .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Класс .static добавляет фон к статичному разделу, у которого нет изображения.

      Два раздела с классом .parallax также имеют дополнительный класс, причем у каждого раздела он свой. Используйте классы .bg1 и .bg2, чтобы добавить фоновые изображения Kitten.

      Добавим следующий код в класс .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Классы .bg1, .bg2 добавляют соответствующие фоновые изображения для каждого раздела.

      Изображения взяты с сайта placekitten. Это сервис, предоставляющий изображения котят для использования в качестве замещающих элементов.

      После добавления всего кода для эффекта многоуровневой прокрутки вы можете добавить ссылку на файл styles.css в файле index.html.

      Шаг 7 — Связь styles.css и открытия index.html в вашем браузере

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

      Вначале добавим следующий код в тег <head> в файле index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Теперь вы можете открыть файл index.html в браузере:

      Многоуровневая прокрутка — gif

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

      Заключение

      В этой статье мы описали настройку проекта с файлами index.html и styles.css и создание функциональной веб-страницы. Мы добавили структуру веб-страницы и создали стили для различных разделов сайта.

      Существует возможность отдаления используемых изображений или эффекта многоуровневой прокрутки так, что они будут двигаться медленнее. Вам нужно будет изменить значения в пикселях для свойств perspective и transform. Если вы не хотите прокручивать фоновое изображение, используйте background-attachment: fixed; вместо perspective/translate/scale.



      Source link