One place for hosting & domains

      April 2020

      Настройка брандмауэра с помощью firewalld в CentOS 8


      Введение

      firewalld — программное обеспечение для управления брандмауэрами, поддерживаемое многими дистрибутивами Linux. Выступает в качестве клиентского интерфейса для встроенных в ядро Linux систем фильтрации пакетов nftables и iptables.

      В этом обучающем руководстве мы покажем, как настраивать брандмауэр firewalld для сервера CentOS 8 и расскажем об основах управления брандмауэром с помощью административного инструмента firewall-cmd.

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

      Для прохождения этого обучающего руководства нам потребуется сервер под управлением CentOS 8. Мы будем считать, что вы выполнили вход на этот сервер в качестве пользователя non-root user с привилегиями sudo. Чтобы выполнить настройку сервера, воспользуйтесь нашим руководством по начальной настройке сервера CentOS 8.

      Основные концепции в firewalld

      Прежде чем обсуждать фактическое использование утилиты firewall-cmd для управления конфигурацией брандмауэра, мы должны познакомиться с несколькими концепциями, которые вводит этот инструмент.

      Зоны

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

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

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

      • drop: самый низкий уровень доверия. Все входящие соединения отбрасываются без ответа и разрешаются только исходящие соединения.
      • block: аналогично вышеописанному, но запросы входящих соединений не просто отбрасываются, а отклоняются с сообщением icmp-host-prohibited или icmp6-adm-prohibited.
      • public: публичные сети, к которым нет доверия. Вы не доверяете другим компьютерам, но можете разрешать отдельные входящие соединения на разовой основе.
      • external: внешние сети, если вы используете брандмауэр в качестве шлюза. Эта зона настроена для маскировки NAT, чтобы ваша внутренняя сеть оставалась частной, но доступной.
      • internal: другая сторона внешней зоны, используемая для внутренней части шлюза. Компьютеры в основном достойны доверия, доступны некоторые дополнительные службы.
      • dmz: используется для компьютеров в ДМЗ (изолированные компьютеры, у которых нет доступа к остальной части вашей сети). Разрешены только некоторые входящие соединения.
      • work: используется для рабочих компьютеров. Большинство компьютеров в сети являются доверенными. Могут быть разрешены некоторые дополнительные службы.
      • home: домашняя среда. Обычно подразумевается, что вы доверяете большей части других компьютеров и что будут приниматься запросы еще нескольких служб.
      • trusted: все компьютеры в сети являются доверенными. Наиболее открытый из доступных вариантов, который следует использовать с осторожностью.

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

      Постоянство правил

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

      Большинство операций firewall-cmd могут принимать флаг --permanent, указывающий на необходимость применения изменений к постоянной конфигурации. Кроме того, текущую конфигурацию брандмауэра можно сохранить в постоянной конфигурации с помощью команды firewall-cmd --runtime-to-permanent.

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

      Установка и активация firewalld

      Брандмауэр firewalld установлен по умолчанию в некоторых дистрибутивах Linux, в том числе во многих образах CentOS 8. Однако вам может потребоваться установить firewalld самостоятельно:

      • sudo dnf install firewalld

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

      • sudo systemctl enable firewalld
      • sudo systemctl start firewalld

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

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

      • sudo firewall-cmd --state

      Output

      running

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

      Знакомство с текущими правилами брандмауэра

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

      Изучение параметров по умолчанию

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

      • firewall-cmd --get-default-zone

      Output

      public

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

      • firewall-cmd --get-active-zones

      Output

      public interfaces: eth0 eth1

      Здесь мы видим, что на нашем сервере брандмауэр контролирует два сетевых интерфейса (eth0 и eth1). Управление обоими интерфейсами осуществляется в соответствии с правилами, заданными для зоны public.

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

      • sudo firewall-cmd --list-all

      Output

      public (active) target: default icmp-block-inversion: no interfaces: eth0 eth1 sources: services: cockpit dhcpv6-client ssh ports: protocols: masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:

      Из выводимых результатов мы видим, что эта зона активна и используется по умолчанию и что с ней связаны интерфейсы eth0 и eth1 (все это мы уже знали из предыдущих запросов). Также мы видим, что эта зона разрешает трафик клиента DHCP (для назначения IP-адресов), SSH (для удаленного администрирования) и Cockpit (веб-консоль).

      Изучение альтернативных зон

      Мы получили представление о конфигурации зоны по умолчанию и активной зоны. Также мы можем получить информацию о других зонах.

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

      Output

      block dmz drop external home internal public trusted work

      Чтобы посмотреть конкретную конфигурацию, относящуюся к зоне, необходимо добавить параметр --zone= к команде --list-all:

      • sudo firewall-cmd --zone=home --list-all

      Output

      home target: default icmp-block-inversion: no interfaces: sources: services: cockpit dhcpv6-client mdns samba-client ssh ports: protocols: masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:

      Вы можете вывести все определения зон, используя опцию --list-all-zones. Возможно вы захотите вывести результаты на пейджер для удобства просмотра:

      • sudo firewall-cmd --list-all-zones | less

      Далее мы узнаем о назначении зон сетевым интерфейсам.

      Выбор зон для интерфейсов

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

      Изменение зоны интерфейса

      Для перемещения интерфейса между зонами во время сеанса следует использовать параметр --zone= в сочетании с параметром --change-interface=. Как и для всех остальных команд, изменяющих брандмауэр, вам потребуется использовать sudo.

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

      • sudo firewall-cmd --zone=home --change-interface=eth0

      Output

      success

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

      Чтобы убедиться в успешности операции мы можем снова запросить активные зоны:

      • firewall-cmd --get-active-zones

      Output

      home interfaces: eth0 public interfaces: eth1

      Изменение зоны по умолчанию

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

      Вы можете изменить зону по умолчанию с помощью параметра --set-default-zone=. При этом немедленно изменятся все интерфейсы, использующие зону по умолчанию:

      • sudo firewall-cmd --set-default-zone=home

      Output

      success

      Установка правил для приложений

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

      Добавление службы к зонам

      Самый простой метод заключается в том, чтобы добавлять необходимые службы или порты в используемые зоны. Список доступных определений служб можно получить с помощью опции --get-services:

      • firewall-cmd --get-services

      Output

      RH-Satellite-6 amanda-client amanda-k5-client amqp amqps apcupsd audit bacula bacula-client bb bgp bitcoin bitcoin-rpc bitcoin-testnet bitcoin-testnet-rpc bittorrent-lsd ceph ceph-mon cfengine cockpit condor-collector ctdb dhcp dhcpv6 dhcpv6-client distcc dns dns-over-tls docker-registry docker-swarm dropbox-lansync elasticsearch etcd-client etcd-server finger freeipa-4 freeipa-ldap freeipa-ldaps freeipa-replication freeipa-trust ftp ganglia-client ganglia-master git grafana gre high-availability http https imap imaps ipp ipp-client ipsec irc ircs iscsi-target isns jenkins kadmin kdeconnect kerberos kibana klogin kpasswd kprop kshell ldap ldaps libvirt libvirt-tls lightning-network llmnr managesieve matrix mdns memcache minidlna mongodb mosh mountd mqtt mqtt-tls ms-wbt mssql murmur mysql nfs nfs3 nmea-0183 nrpe ntp nut openvpn ovirt-imageio ovirt-storageconsole ovirt-vmconsole plex pmcd pmproxy pmwebapi pmwebapis pop3 pop3s postgresql privoxy prometheus proxy-dhcp ptp pulseaudio puppetmaster quassel radius rdp redis redis-sentinel rpc-bind rsh rsyncd rtsp salt-master samba samba-client samba-dc sane sip sips slp smtp smtp-submission smtps snmp snmptrap spideroak-lansync spotify-sync squid ssdp ssh steam-streaming svdrp svn syncthing syncthing-gui synergy syslog syslog-tls telnet tentacle tftp tftp-client tile38 tinc tor-socks transmission-client upnp-client vdsm vnc-server wbem-http wbem-https wsman wsmans xdmcp xmpp-bosh xmpp-client xmpp-local xmpp-server zabbix-agent zabbix-server

      Примечание. Вы можете получить более подробную информацию о каждой из этих служб, посмотрев соответствующий файл .xml в директории /usr/lib/firewalld/services. Например, служба SSH определяется следующим образом:

      /usr/lib/firewalld/services/ssh.xml

      <?xml version="1.0" encoding="utf-8"?>
      <service>
        <short>SSH</short>
        <description>Secure Shell (SSH) is a protocol for logging into and executing commands on remote machines. It provides secure encrypted communications. If you plan on accessing your machine remotely via SSH over a firewalled interface, enable this option. You need the openssh-server package installed for this option to be useful.</description>
        <port protocol="tcp" port="22"/>
      </service>
      

      Вы можете активировать службу для зоны с помощью параметра --add-service=. Данная операция будет нацелена на зону по умолчанию или на другую зону, заданную параметром --zone=. По умолчанию изменения применяются только к текущему сеансу брандмауэра. Для изменения постоянной конфигурации брандмауэра следует использовать флаг --permanent.

      Например, если у нас запущен веб-сервер, обслуживающий стандартный трафик HTTP, мы можем временно разрешить этот трафик для интерфейсов в зоне public с помощью следующей команды:

      • sudo firewall-cmd --zone=public --add-service=http

      Вы можете опустить флаг --zone=, если хотите внести изменения в зону по умолчанию. Для проверки успешного выполнения операции можно использовать команду --list-all или --list-services:

      • sudo firewall-cmd --zone=public --list-services

      Output

      cockpit dhcpv6-client http ssh

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

      • sudo firewall-cmd --zone=public --add-service=http --permanent

      Output

      success

      Также можно использовать флаг --runtime-to-permanent для сохранения текущей конфигурации брандмауэра в постоянной конфигурации:

      • sudo firewall-cmd --runtime-to-permanent

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

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

      • sudo firewall-cmd --zone=public --list-services --permanent

      Output

      cockpit dhcpv6-client http ssh

      Теперь в зоне public разрешен веб-трафик HTTP на порту 80. Если ваш веб-сервер настроен для использования SSL/TLS, вы также можете добавить службу https. Мы можем добавить ее в текущий сеанс и постоянный набор правил с помощью следующей команды:

      • sudo firewall-cmd --zone=public --add-service=https
      • sudo firewall-cmd --zone=public --add-service=https --permanent

      Что делать, если подходящая служба отсутствует?

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

      В этой ситуации у вас будет два варианта.

      Открытие порта для зон

      Проще всего добавить поддержку определенного приложения можно посредством открытия используемых им портов в соответствующих зонах. Для этого нужно указать порт или диапазон портов, а также протокол (TCP или UDP), связанный с портами.

      Например, если наше приложение работает на порту 5000 и использует TCP, мы можем временно добавить его в зону public с помощью параметра --add-port=. Протоколы могут назначаться как tcp или udp:

      • sudo firewall-cmd --zone=public --add-port=5000/tcp

      Output

      success

      Мы можем проверить успешность назначения с помощью операции --list-ports:

      • sudo firewall-cmd --zone=public --list-ports

      Output

      5000/tcp

      Также можно указать последовательный диапазон портов, разделив начальный и конечный порты диапазона дефисом. Например, если наше приложение используйте порты UDP с 4990 по 4999, мы можем открыть их на public с помощью следующей команды:

      • sudo firewall-cmd --zone=public --add-port=4990-4999/udp

      После тестирования мы вероятно захотим добавить это правило в брандмауэр на постоянной основе. Используйте для этого sudo firewall-cmd --runtime-to-permanent или запустите команды снова с флагом --permanent:

      • sudo firewall-cmd --zone=public --permanent --add-port=5000/tcp
      • sudo firewall-cmd --zone=public --permanent --add-port=4990-4999/udp
      • sudo firewall-cmd --zone=public --permanent --list-ports

      Output

      success success 5000/tcp 4990-4999/udp

      Определение службы

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

      Службы представляют собой наборы портов с именем и описанием. Использование служб упрощает администрирование портов, но требует некоторой предварительной подготовки. Проще всего начать с копирования существующего скрипта (из директории /usr/lib/firewalld/services) в директорию /etc/firewalld/services, где брандмауэр ищет нестандартные определения.

      Например, мы можем скопировать определение службы SSH и использовать его для определения службы example. Имя файла без суффикса .xml определяет имя службы в списке служб брандмауэра:

      • sudo cp /usr/lib/firewalld/services/ssh.xml /etc/firewalld/services/example.xml

      Теперь можно изменить определение в скопированном вами файле. Вначале откройте его в предпочитаемом текстовом редакторе. Здесь мы используем vi:

      • sudo vi /etc/firewalld/services/example.xml

      Вначале файл будет содержать только что скопированное вами определение SSH:

      /etc/firewalld/services/example.xml

      <?xml version="1.0" encoding="utf-8"?>
      <service>
        <short>SSH</short>
        <description>Secure Shell (SSH) is a protocol for logging into and executing commands on remote machines. It provides secure encrypted communications. If you plan on accessing your machine remotely via SSH over a firewalled interface, enable this option. You need the openssh-server package installed for this option to be useful.</description>
        <port protocol="tcp" port="22"/>
      </service>
      

      Основная часть этого определения представляет собой метаданные. Вы можете изменить короткое имя службы, заключенное в тегах <short>. Это имя службы, предназначенное для чтения людьми. Также следует добавить описание на случай, если вам потребуется дополнительная информация при проведении аудита службы. Единственное изменение конфигурации, которое вам потребуется, и которое повлияет на функциональность службы, будет заключаться в определении портов, где вы идентифицируете номер порта и протокол, который хотите открыть. Можно указать несколько тегов <port/>.

      Представьте, что для нашей службы example нам необходимо открыть порт 7777 для TCP и 8888 для UDP. Мы можем изменить существующее определение примерно так:

      /etc/firewalld/services/example.xml

      <?xml version="1.0" encoding="utf-8"?>
      <service>
        <short>Example Service</short>
        <description>This is just an example service. It probably shouldn't be used on a real system.</description>
        <port protocol="tcp" port="7777"/>
        <port protocol="udp" port="8888"/>
      </service>
      

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

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

      • sudo firewall-cmd --reload

      Теперь вы увидите ее в списке доступных служб:

      • firewall-cmd --get-services

      Output

      RH-Satellite-6 amanda-client amanda-k5-client amqp amqps apcupsd audit bacula bacula-client bb bgp bitcoin bitcoin-rpc bitcoin-testnet bitcoin-testnet-rpc bittorrent-lsd ceph ceph-mon cfengine cockpit condor-collector ctdb dhcp dhcpv6 dhcpv6-client distcc dns dns-over-tls docker-registry docker-swarm dropbox-lansync elasticsearch etcd-client etcd-server example finger freeipa-4 freeipa-ldap freeipa-ldaps freeipa-replication freeipa-trust ftp ganglia-client ganglia-master git grafana gre high-availability http https imap imaps ipp ipp-client ipsec irc ircs iscsi-target isns jenkins kadmin kdeconnect kerberos kibana klogin kpasswd kprop kshell ldap ldaps libvirt libvirt-tls lightning-network llmnr managesieve matrix mdns memcache minidlna mongodb mosh mountd mqtt mqtt-tls ms-wbt mssql murmur mysql nfs nfs3 nmea-0183 nrpe ntp nut openvpn ovirt-imageio ovirt-storageconsole ovirt-vmconsole plex pmcd pmproxy pmwebapi pmwebapis pop3 pop3s postgresql privoxy prometheus proxy-dhcp ptp pulseaudio puppetmaster quassel radius rdp redis redis-sentinel rpc-bind rsh rsyncd rtsp salt-master samba samba-client samba-dc sane sip sips slp smtp smtp-submission smtps snmp snmptrap spideroak-lansync spotify-sync squid ssdp ssh steam-streaming svdrp svn syncthing syncthing-gui synergy syslog syslog-tls telnet tentacle tftp tftp-client tile38 tinc tor-socks transmission-client upnp-client vdsm vnc-server wbem-http wbem-https wsman wsmans xdmcp xmpp-bosh xmpp-client xmpp-local xmpp-server zabbix-agent zabbix-server

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

      Создание собственных зон

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

      Например, вы можете захотеть создать для своего веб-сервера зону с именем publicweb. При этом вы можете также захотеть использовать другую зону для службы DNS в вашей частной сети. Эту зону вы можете назвать privateDNS.

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

      • sudo firewall-cmd --permanent --new-zone=publicweb
      • sudo firewall-cmd --permanent --new-zone=privateDNS

      Вы можете проверить их наличие в постоянной конфигурации с помощью следующей команды:

      • sudo firewall-cmd --permanent --get-zones

      Output

      block dmz drop external home internal privateDNS public publicweb trusted work

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

      Output

      block dmz drop external home internal public trusted work

      Перезагрузите брандмауэр, чтобы добавить эти зоны в активную конфигурацию:

      • sudo firewall-cmd --reload
      • firewall-cmd --get-zones

      Output

      block dmz drop external home internal privateDNS public publicweb trusted work

      Теперь вы можете назначать в зоны соответствующие службы и порты. Обычно лучше всего изменять активный брандмауэр и сохранять изменения в постоянной конфигурации только после тестирования. Например, для зоны publicweb вы можете захотеть добавить службы SSH, HTTP и HTTPS:

      • sudo firewall-cmd --zone=publicweb --add-service=ssh
      • sudo firewall-cmd --zone=publicweb --add-service=http
      • sudo firewall-cmd --zone=publicweb --add-service=https
      • sudo firewall-cmd --zone=publicweb --list-all

      Output

      publicweb target: default icmp-block-inversion: no interfaces: sources: services: http https ssh ports: protocols: masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:

      Для зоны privateDNS можно добавить службу DNS:

      • sudo firewall-cmd --zone=privateDNS --add-service=dns
      • sudo firewall-cmd --zone=privateDNS --list-all

      Output

      privateDNS target: default icmp-block-inversion: no interfaces: sources: services: dns ports: protocols: masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:

      Затем мы можем изменить интерфейсы на новые зоны, чтобы протестировать их:

      • sudo firewall-cmd --zone=publicweb --change-interface=eth0
      • sudo firewall-cmd --zone=privateDNS --change-interface=eth1

      Сейчас вы можете протестировать свою конфигурацию. Если эти значения будут работать, эти правила можно будет добавить в постоянную конфигурацию. Для этого можно снова запустить все команды с флагом --permanent, но в этом случае мы используем флаг --runtime-to-permanent для полного сохранения активной конфигурации как постоянной:

      • sudo firewall-cmd --runtime-to-permanent

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

      • sudo firewall-cmd --reload

      Проверьте правильность назначения зон:

      • firewall-cmd --get-active-zones

      Output

      privateDNS interfaces: eth1 publicweb interfaces: eth0

      Убедитесь, что в обеих зонах доступны соответствующие службы:

      • sudo firewall-cmd --zone=publicweb --list-services

      Output

      http https ssh
      • sudo firewall-cmd --zone=privateDNS --list-services

      Output

      dns

      Вы успешно настроили собственные зоны! Если вы захотите задать одну из этих зон по умолчанию для других интерфейсов, используйте для настройки параметр --set-default-zone=:

      • sudo firewall-cmd --set-default-zone=publicweb

      Заключение

      Теперь вы должны неплохо понимать принципы администрирования службы firewalld в системе CentOS на каждодневной основе.

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

      Дополнительную информацию о firewalld можно найти в официальной документации по firewalld.



      Source link

      Создание и настройка проекта React с помощью приложения Create React App


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

      Введение

      React — популярная система JavaScript для создания клиентских приложений. Первоначально эта система была разработана Facebook и быстро стала популярной, поскольку она позволяет разработчикам создавать быстрые приложения на основе интуитивно понятной парадигмы программирования, соединяющей JavaScript с похожим на HTML синтаксисом под названием JSX.

      Раньше для создания нового проекта React требовался сложный процесс, состоящий из множества шагов и включающий систему для сборки, компилятор для конвертации современного синтаксиса в читаемый всеми браузерами код, а также базовую структуру директорий. Однако сейчас появилось приложение Create React App, включающее все пакеты JavaScript, необходимые для запуска проекта React, включая системы компиляции кода, проверки соблюдения стандартов кодирования, тестирования и сборки. Также приложение включает сервер с функцией горячей перезагрузки, обновляющей страницу при внесении изменений в код. Также оно создает структуру директорий и компонентов, позволяя перейти к программированию уже через несколько минут.

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

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

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

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

      • Node.js версии 10.16.0, установленный на вашем компьютере. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.

      • Также вам нужно понимать основы языка JavaScript, для изучения которого вам подойдет серия Программирование на JavaScript, а также обладать базовыми знаниями языков HTML и CSS.

      Шаг 1 — Создание нового проекта с помощью приложения Create React App

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

      При установке Node вы также установили приложение для управления пакетами npm. npm установит пакеты JavaScript для вашего проекта и будет отслеживать детали проекта. Если вы хотите узнать больше об npm, воспользуйтесь обучающим руководством Использование модулей Node.js с npm и package.json.

      npm также включает инструмент npx, отвечающий за запуск исполняемых пакетов. Это означает, что вы сможете запускать код приложения Create React App без предварительной загрузки проекта.

      Используемый пакет выполнит установку create-react-app в указанную вами директорию. Для начала он создаст в директории новый пакет, которому в этом обучающем руководстве мы присвоим имя digital-ocean-tutorial. Если этой директории не существует, исполняемый пакет просто создаст ее. Скрипт также запустит команду npm install в директории проекта для загрузки всех дополнительных зависимостей.

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

      • npx create-react-app digital-ocean-tutorial

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

      После успешного выполнения скрипта вы увидите соответствующее сообщение:

      Output

      ... Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd digital-ocean-tutorial npm start Happy hacking!

      your_file_path будет текущим путем. Если вы используете macOS, путь будет выглядеть как /Users/your_username; а если вы используете сервер Ubuntu — /home/your_username.

      Также вы увидите список команд npm для выполнения, сборки, запуска и тестирования вашего приложения. Более подробно вы узнаете об этом в следующем разделе.

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

      Если вы ранее устанавливали yarn в вашей системе, вы увидите список команд yarn, таких как yarn start. Эти команды работают так же, как и команды npm. Вы можете запускать команды npm, даже если у вас установлен yarn. Если вы предпочитаете yarn, просто заменяйте npm на yarn во всех будущих командах. Результат будет точно таким же.

      Теперь ваш проект настроен в новой директории. Перейдите в новую директорию:

      • cd digital-ocean-tutorial

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

      Шаг 2 — Использование скриптов react-scripts

      На этом шаге вы узнаете о различных скриптах react-scripts, устанавливаемых вместе с репозиторием. Вначале вы запустите скрипт test для выполнения тестового кода. Затем вы запустите скрипт build для создания минифицированной версии. В заключение вы узнаете, как использовать скрипт eject для полного контроля персонализированной настройки.

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

      Флаг -a обеспечивает добавление в вывод скрытых файлов.

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

      Output

      node_modules/ public/ src/ .gitignore README.md package-lock.json package.json

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

      • node_modules/ содержит все внешние библиотеки JavaScript, используемые приложением. Вам нечасто потребуется использовать его.

      • Директория public/ содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта. Вы сможете узнать о них более подробно на шаге 4.

      • В директории src/ содержится код React JavaScript для вашего проекта. В основном вы будете работать именно с этой директорией. Более подробно мы расскажем об этой директории на шаге 5.

      • Файл .gitignore содержит несколько директорий и файлов по умолчанию, которые система контроля исходного кода git будет игнорировать, в том числе директорию node_modules. Игнорируемые элементы — это большие директории или файлы журнала, которые не нужны при контроле исходного кода. Также здесь указаны некоторые директории, которые вы создадите с помощью некоторых скриптов React.

      • README.md — это файл разметки, содержащий много полезной информации о приложении Create React App, в том числе обзор команд и ссылки на расширенные опции конфигурации. Сейчас лучше оставить файл README.md в первозданном виде. По мере развития проекта вы будете заменять данные по умолчанию более подробной информацией о вашем проекте.

      Последние два файла используются вашим диспетчером пакетов. При запуске первоначальной команды npx вы создали базовый проект, а также установили дополнительные зависимости. При установке зависимостей вы создали файл package-lock.json. Этот файл используется npm для проверки точного соответствия версий пакетов. Так вы можете быть уверены, что если кто-то другой установит ваш проект, у него будут идентичные зависимости. Поскольку этот файл создается автоматически, вам нечасто потребуется редактировать его.

      Последний файл — package.json. Он содержит метаданные о вашем проекте, включая заголовок, номер версии и зависимости. Также он содержит скрипты, которые вы можете использовать для запуска проекта.

      Откройте файл package.json в предпочитаемом текстовом редакторе:

      Открыв файл, вы увидите объект JSON, содержащий все метаданные. Если посмотреть на объект scripts, вы увидите, что он содержит четыре разных скрипта: start, build, test и eject.

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

      Скрипт build

      Для запуска любого скрипта npm нужно просто ввести в терминале команду npm run script_name. Существует несколько особых скриптов, где можно опустить run в составе команды, но вводить команду полностью никогда не будет ошибкой. Чтобы запустить скрипт build, введите в терминале следующую команду:

      Вы немедленно увидите следующее сообщение:

      Output

      > digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial > react-scripts build Creating an optimized production build... ...

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

      После завершения вы увидите следующее:

      Output

      ... Compiled successfully. File sizes after gzip: 39.85 KB build/static/js/9999.chunk.js 780 B build/static/js/runtime-main.99999.js 616 B build/static/js/main.9999.chunk.js 556 B build/static/css/main.9999.chunk.css The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "http://myname.github.io/myapp", The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: bit.ly/CRA-deploy

      Выведите содержимое проекта, и вы увидите несколько новых директорий:

      Output

      build/ node_modules/ public/ src/ .gitignore README.md package-lock.json package.json

      Теперь у вас появилась директория build. Если вы открывали файл .gitignore, вы могли заметить, что директория build игнорируется git. Это связано с тем, что директория build просто представляет собой минифицированную и оптимизированную версию других файлов. Контроль версий не требуется, поскольку вы можете в любое время запустить команду build. О результатах выполнения этого скрипта мы поговорим чуть позже, а пока что перейдем к скрипту test.

      Скрипт test

      Скрипт test — один из специальных скриптов, для которых не требуется ключевое слово run, однако он будет работать и с этим ключевым словом. Этот скрипт запускает программу тестирования Jest. Программа тестирования ищет в проекте файлы с расширением .spec.js или .test.js, а затем запускает эти файлы.

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

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

      Output

      PASS src/App.test.js ✓ renders learn react link (67ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 4.204s Ran all test suites. Watch Usage › Press f to run only failed tests. › Press o to only run tests related to changed files. › Press q to quit watch mode. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press Enter to trigger a test run.

      Здесь нужно обратить внимание на несколько вещей. Во-первых, как говорилось выше, тест автоматически обнаруживает все файлы с тестовыми расширениями, включая .test.js и .spec.js. В нашем случае у нас имеется только один тестовый набор, то есть только один файл с расширением .test.js, и этот набор содержит только один тест. Jest может обнаруживать тесты в иерархии кода, то есть вы можете размещать тесты в директории, и Jest найдет их там.

      Во-вторых, Jest не просто запускает тест один раз и закрывается. Он продолжает работать в терминале. Если вы внесете изменения в исходный код, он проведет тесты снова.

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

      Для выхода из системы тестирования следует ввести q. Сделайте это сейчас, чтобы вернуться в командную строку.

      Скрипт eject

      Последний скрипт называется npm eject. Этот скрипт копирует зависимости и файлы конфигурации в ваш проект, обеспечивая полный контроль над кодом, но при этом извлекая проект из интегрированной системы инструментов приложения Create React App. Сейчас мы не будем запускать этот скрипт, поскольку это действие нельзя отменить, а при его запуске вы потеряете все будущие обновления приложения Create React App.

      Ценность приложения Create React App заключается в том, что вам не нужно беспокоиться о значительном количестве аспектов настройки конфигурации. Для создания современных приложений JavaScript требуется множество разных инструментов, от Webpack и других сборочных систем до Babel и других средств компиляции. Приложение Create React App выполняет за вас все задачи по настройке конфигурации, поэтому извлечение проекта из приложения означает, что вам придется вносить все сложные настройки самостоятельно.

      Минус приложения Create React App заключается в том, что вы не можете полностью персонализировать проект. Для большинства проектов это неважно, однако если вы захотите полностью контролировать все аспекты процесса сборки, вам нужно будет выполнить извлечение кода. Однако, как мы уже говорили выше, после извлечения кода вы не сможете обновлять его с новыми версиями приложения Create React App, и вам придется вручную добавлять все улучшения.

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

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

      На этом шаге вы инициализируете локальный сервер и запустите проект в своем браузере.

      Для запуска проекта используется еще один скрипт npm. Как и скрипт npm test, этот скрипт не требует использования команды run. Этот скрипт запускает локальный сервер, выполняет код проекта, запускает программу отслеживания изменений кода и открывает проект в браузере.

      Запустите проект, введя следующую команду в корневой директории проекта. В данном обучающем руководстве в качестве корневой директории проекта выступает директория digital-ocean-tutorial. Откройте ее на отдельном терминале или вкладке, поскольку этот скрипт будет работать все время, пока вы это разрешаете:

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

      Output

      Compiled successfully! You can now view digital-ocean-tutorial in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.

      Если вы запускаете скрипт в локальной системе, он откроет проект в окне браузера и переключит фокус с терминала на браузер.

      Если этого не произойдет, вы можете открыть URL-адрес http://localhost:3000/, чтобы увидеть сайт в работе. Если на порту 3000 уже запущен другой сервер, это не представляет проблемы. Приложение Create React App найдет следующий доступный порт и запустит сервер на нем. Другими словами, если у вас уже запущен проект на порту 3000, новый проект будет запущен на порту 3001.

      При запуске с удаленного сервера вы все равно сможете увидеть свой сайт без дополнительной настройки. Он будет иметь адрес http://your_server_ip:3000. Если у вас включен и настроен брандмауэр, вам нужно будет открыть данный порт на удаленном сервере.

      В браузере вы увидите следующий шаблон проекта React:

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

      Пока скрипт работает, у вас будет активный локальный сервер. Для остановки скрипта следует закрыть окно или вкладку терминала или ввести CTRL+C или ⌘-+c в окне или на вкладке терминала, где выполняется ваш скрипт.

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

      Шаг 4 — Изменение главной страницы

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

      Если вы отключили сервер, запустите его с помощью команды npm start, а затем откройте public/ в предпочитаемом текстовом редакторе в новом окне терминала:

      Также вы можете вывести список файлов с помощью команды ls:

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

      Output

      favicon.ico logo192.png manifest.json index.html logo512.png robots.txt

      favicon.ico, logo192.png и logo512.png — это значки, которые пользователь будет видеть на вкладке браузера или в телефоне. Браузер автоматически выберет значок подходящего размера. Впоследствии вы можете заменить их на другие значки, которые лучше подойдут для вашего проекта. Пока же вы можете использовать их как есть.

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

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

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

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

      Вот что вы увидите:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="icon" href="https://www.digitalocean.com/%PUBLIC_URL%/favicon.ico" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          <meta
            name="description"
            content="Web site created using create-react-app"
          />
          <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
          <!--
            manifest.json provides metadata used when your web app is installed on a
            user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
          -->
          <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
          <!--
            Notice the use of %PUBLIC_URL% in the tags above.
            It will be replaced with the URL of the `public` folder during the build.
            Only files inside the `public` folder can be referenced from the HTML.
      
            Unlike "https://www.digitalocean.com/favicon.ico" or "favicon.ico", "https://www.digitalocean.com/%PUBLIC_URL%/favicon.ico" will
            work correctly both with client-side routing and a non-root public URL.
            Learn how to configure a non-root public URL by running `npm run build`.
          -->
          <title>React App</title>
        </head>
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="root"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      

      Сам файл довольно короткий. В части <body> нет изображений или слов. Это связано с тем, что React самостоятельно строит всю структуру HTML и вставляет ее с помощью JavaScript. Однако React нужно знать, куда вставлять код, и для этого и используется файл index.html.

      В текстовом редакторе измените значение тега <title> с React App на Sandbox:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="icon" href="https://www.digitalocean.com/%PUBLIC_URL%/favicon.ico" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          ...
          <title>Sandbox</title>
        </head>
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="root"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      
      

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

      Теперь вернитесь в текстовый редактор. Каждый проект React начинается с корневого элемента. На странице может быть несколько корневых элементов, но один должен присутствовать обязательно. Так React узнает, куда поместить сгенерированный код HTML. Найдите элемент <div id="root">. Этот элемент div будет использоваться React для всех будущих обновлений. Измените id с root на base:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          ...
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="base"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      

      Сохраните изменения.

      В браузере вы увидите сообщение об ошибке:

      Сообщение об ошибке гласит «Target container is not a DOM element» (целевой контейнер не является элементом DOM)

      React искал элемент с id root. Теперь этого элемента нет, и React не может запустить проект.

      Измените имя с base на root:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          ...
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="root"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      

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

      Вы запустили сервер и внесли небольшое изменение в корневую страницу HTML. Пока еще вы не меняли код JavaScript. В следующем разделе мы начнем изменять код React JavaScript.

      Шаг 5 — Изменение тега заголовка и стилей

      На этом шаге вы внесете первое изменение в компонент React в директории src/. Вы внесете небольшое изменение в код CSS и JavaScript, который будет автоматически обновляться в браузере с помощью встроенной функции горячей перезагрузки.

      Если вы остановили сервер, обязательно перезапустите его с помощью команды npm start. Познакомьтесь с содержимым директории src/. Вы можете открыть полную директорию в предпочитаемом текстовом редакторе или вывести проект на терминал с помощью следующей команды:

      Вы увидите в терминале или текстовом редакторе следующие файлы.

      Output

      App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js setupTests.js

      Рассмотрим каждый из этих файлов по отдельности.

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

      Далее взглянем на файлы setupTests.js и App.test.js. Они используются для тестовых файлов. При запуске npm test на шаге 2 скрипт уже запускал эти файлы. Файл setupTests.js небольшой и содержит несколько настраиваемых методов expect. Вы узнаете о них больше в следующих обучающих руководствах этой серии.

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

      Когда вы откроете этот файл, вы увидите простой тест:

      digital-ocean-tutorial/src/App.test.js

      import React from 'react';
      import { render } from '@testing-library/react';
      import App from './App';
      
      test('renders learn react link', () => {
        const { getByText } = render(<App />);
        const linkElement = getByText(/learn react/i);
        expect(linkElement).toBeInTheDocument();
      });
      

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

      Далее вы видите несколько файлов стилей: App.css, index.css и logo.svg. Существует много вариантов работы со стилями в React, но проще всего написать простой код CSS, не требующий дополнительной настройки.

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

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

      Вы увидите следующий код:

      digital-ocean-tutorial/src/App.css

      .App {
        text-align: center;
      }
      
      .App-logo {
        height: 40vmin;
        pointer-events: none;
      }
      
      @media (prefers-reduced-motion: no-preference) {
        .App-logo {
          animation: App-logo-spin infinite 20s linear;
        }
      }
      
      .App-header {
        background-color: #282c34;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }
      
      .App-link {
        color: #61dafb;
      }
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      

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

      Вернемся к файлу App.css. Одно из преимуществ приложения Create React заключается в том, что оно наблюдает за всеми файлами, и при внесении изменения вы увидите его в браузере без перезагрузки.

      Чтобы увидеть это, внесем небольшое изменение в параметр background-color в файле App.css. Измените его с #282c34 на blue, а затем сохраните файл. Окончательный стиль будет выглядеть следующим образом:

      digital-ocean-tutorial/src/App.css

      .App {
        text-align: center;
      }
      ...
      .App-header {
        background-color: blue
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }
      ...
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      

      Проверьте браузер. Вот как это выглядело раньше:

      Приложение React с темным фоном

      Вот как это будет выглядеть после изменения:

      Приложение React с синим фоном

      Измените значение background-color обратно на #282c34.

      digital-ocean-tutorial/src/App.css

      .App {
        text-align: center;
      
      ...
      
      .App-header {
        background-color: #282c34
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }
      
      ...
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      

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

      Вы внесли небольшое изменение в файл CSS. Теперь внесем изменения в код React JavaScript. Для начала откройте файл index.js.

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

      digital-ocean-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(<App />, 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();
      

      Прежде всего, вы импортируете React, ReactDOM, index.css, App и serviceWorker. Импортируя React, вы фактически извлекаете код для конвертации JSX в JavaScript. JSX — это элементы в стиле HTML. Обратите внимание, что при использовании App вы обращаетесь с ним как с элементом HTML <App />. Вы узнаете об этом подробнее из следующих обучающих руководств этой серии.

      ReactDOM — это код, который связывает ваш код React с базовыми элементами, такими как страница index.html, которую мы увидели в public/. Посмотрите на следующую выделенную строку:

      digital-ocean-tutorial/src/index.js

      ...
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(<App />, document.getElementById('root'));
      ...
      serviceWorker.unregister();
      

      Этот код предписывает React найти элемент с id root и вставить в него код React. <App/> — это корневой элемент, от которого идут все ответвления. Это исходная точка для всего будущего кода React.

      Вверху файла имеется несколько операций импорта. Мы импортируем index.css, но ничего не делаем с этим файлом. Импортируя его, мы предписываем Webpack через скрипты React включить этот код CSS в окончательную скомпилированную версию пакета. Если его не импортировать, он не будет отображаться.

      Выйдите из файла src/index.js.

      Пока что вы еще не видели ничего, что вы видите в браузере. Чтобы увидеть это, откройте файл App.js:

      Код в этом файле выглядит как набор стандартных элементов HTML. Вы увидите следующее:

      digital-ocean-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;
      

      Измените содержимое тега <p> с Edit <code>src/App.js</code> and save to reload. на Hello, world и сохраните изменения.

      digital-ocean-tutorial/src/App.js

      ...
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  Hello, world
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      ...
      

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

      Приложение React с текстом "Hello, world" в теге абзаца

      Вы внесли первое изменение в компонент React.

      Прежде чем заканчивать, обратите внимание еще на несколько вещей. В этом компоненте мы импортируем файл logo.svg и назначаем его переменной. Затем в элементе <img> мы добавляем этот код как src.

      Здесь происходит еще несколько вещей. Посмотрите на элемент img:

      digital-ocean-tutorial/src/App.js

      ...
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  Hello, world
              </p>
      ...
      

      Обратите внимание, как вы передаете logo в фигурных скобках. Каждый раз, когда вы передаете атрибуты, которые не являются строками или числами, вам нужно будет использовать фигурные скобки. React обрабатывает их как элементы JavaScript, а не как строки. В этом случае вы не импортируете образ, а ссылаетесь на него. Когда Webpack выполняет сборку проекта, он обрабатывает образ и задает для источника соответствующее место.

      Закройте текстовый редактор.

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

      Вот как это будет выглядеть в браузере:

      Инспектирование элемента с помощью инструментов chrome для разработчиков

      В DOM содержится следующая строка:

      <img src="https://www.digitalocean.com/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">
      

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

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

      Шаг 6 — Сборка проекта

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

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

      Возможна небольшая задержка, пока код будет компилироваться, а после завершения компиляции будет создана новая директория build/.

      Откройте build/index.html в текстовом редакторе.

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

      digital-ocean-tutorial/build/index.html

      <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://www.digitalocean.com/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="http://www.digitalocean.com/logo192.png"/><link rel="manifest" href="http://www.digitalocean.com/manifest.json"/><title>React App</title><link href="http://www.digitalocean.com/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>
      

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

      Заключение

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

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

      Если вы хотите увидеть React в действии, пройдите обучающее руководство Отображение данных из DigitalOcean API с помощью React.



      Source link

      Cómo instalar y configurar un servidor de OpenVPN en CentOS 8


      Introducción

      Una red privada virtual (VPN), le permite atravesar redes no fiables como si estuviese en una red privada. Le permite acceder a internet de forma segura desde su smartphone o equipo portátil cuando se conecta a una red no fiable, como la WiFi de un hotel o de una cafetería.

      Cuando se combina con conexiones HTTPS, esta configuración le permite proteger los inicios de sesión y las operaciones que realiza por medios inalámbricos. Puede evadir censuras y restricciones geográficas, y proteger su ubicación y el tráfico de HTTP no cifrado contra la actividad de las redes no fiables.

      OpenVPN es una solución VPN de seguridad en la capa de transporte (TLS) de código abierto y con características completas que aloja muchas configuraciones. En este tutorial, configurará OpenVPN en un servidor CentOS 8 y, luego, lo configurará para que sea accesible desde la máquina de un cliente.

      Nota: Si planea configurar un servidor de OpenVPN en un Droplet de DigitalOcean tenga en cuenta que, como muchos proveedores de host, cobraremos por excesos de ancho de banda. Por este motivo, controle el volumen de tráfico que maneja su servidor.

      Consulte esta página para obtener más información.

      Requisitos previos

      Para este tutorial, necesitará lo siguiente:

      Nota: Si bien es técnicamente posible usar su servidor de OpenVPN o su máquina local como CA, no se recomienda, dado que expone su VPN a algunas vulnerabilidades de seguridad. Según la documentación oficial de OpenVPN, debería colocar su CA en una máquina independiente dedicada a importar y firmar solicitudes de certificado. Por ello, esta guía presupone que su CA está en un servidor separado de CentOS 8 que también tiene un non-root user con privilegios sudo y firewall básico habilitado.

      Además de eso, necesitará una máquina de cliente que usará para conectarse a su servidor de OpenVPN. En esta guía, lo llamaremos Cliente de OpenVPN. A los efectos de este tutorial, le recomendamos que use su máquina local como el cliente de OpenVPN.

      Una vez implementados estos requisitos previos, estará listo para comenzar a instalar y configurar un servidor de OpenVPN en CentOS 8.

      Nota: Tenga en cuenta que si deshabilita la autenticación de contraseña mientras configura estos servidores, es posible que experimente dificultades al transferir archivos entre ellos más adelante en esta guía. Para solucionar este problema, puede volver a habilitar la autenticación de contraseña en cada servidor. De manera alternativa, puede generar un par de claves SSH para cada servidor, luego agregar la clave SSH pública del servidor de OpenVPN al archivo authorized_keys y viceversa. Consulte Cómo configurar claves SSH en CentOS 8 para obtener instrucciones sobre cómo aplicar cualquiera de estas soluciones.

      Paso 1: Instalar OpenVPN y Easy-RSA

      El primer paso de este tutorial es instalar OpenVPN y Easy-RSA. Easy-RSA es una herramienta de gestión de infraestructura de clave pública (PKI) que usará en el servidor de OpenVPN para generar una solicitud de certificado que, luego, verificará y firmará en el servidor CA.

      Sin embargo, OpenVPN y Easy-RSA no vienen predeterminadas en CentOS 8, por lo que deberá habilitar el repositorio Extra Packages for Enterprise Linux (EPEL). El Proyecto Fedora gestiona el EPEL, que contiene paquetes no estándar, pero populares, para Fedora, CentOS y otras distribuciones de Linux que usan el formato de paquete RPM. Inicie sesión en su servidor de OpenVPN como el non-root sudo user que creó durante los pasos de configuración iniciales y ejecute lo siguiente:

      • sudo dnf install epel-release
      • sudo dnf install openvpn easy-rsa

      A continuación, deberá crear un directorio nuevo en el servidor de OpenVPN como su non-root user llamado ~/easy-rsa:

      Ahora, deberá crear un symlink desde la secuencia de comandos de easyrsa que el paquete instaló en el directorio ~/easy-rsa que acaba de crear:

      • ln -s /usr/share/easy-rsa/3/* ~/easy-rsa/

      Nota: Aunque otras guías le indiquen que copie los archivos del paquete easy-rsa a su directorio de la PKI, en este tutorial, usaremos enlaces simbólicos. Como resultado, toda actualización del paquete easy-rsa se reflejará automáticamente en las secuencias de comandos de su PKI.

      Por último, asegúrese de que el propietario del directorio sea su non-root sudo user y restrinja el acceso a ese usuario usando chmod:

      • sudo chown sammy ~/easy-rsa
      • chmod 700 ~/easy-rsa

      Cuando haya instalado estos programas y se hayan movido a las ubicaciones correctas en su sistema, el siguiente paso es crear una infraestructura de clave pública (PKI) en el servidor de OpenVPN para que pueda solicitar y administrar certificados TLS para clientes y otros servidores que se conecten a su VPN.

      Paso 2: Crear una PKI para OpenVPN

      Antes de poder crear la clave y el certificado privados de su servidor de OpenVPN, deberá crear un directorio local de infraestructura de clave pública en su servidor de OpenVPN. Usará este directorio para gestionar las solicitudes de certificado de clientes y del servidor en vez de hacerlas directamente en su servidor CA.

      Para crear un directorio de PKI en su servidor de OpenVPN, deberá completar un archivo llamado vars con algunos valores predeterminados. Primero, usará cd para ingresar al directorio easy-rsa y, luego, creará y editará el archivo vars con el editor de texto que prefiera.

      El editor de texto predeterminado que viene con CentOS 8 es vi. vi es un editor de texto extremadamente potente, pero puede ser un tanto obtuso para los usuarios que carecen de experiencia con él. Posiblemente desee instalar un editor más sencillo, como nano, para facilitar la edición de los archivos de configuración en su servidor de CentOS 8.

      Cuando se le solicite instalar nano ingrese y para proceder con los pasos de la instalación. Con eso, estará listo para editar el archivo vars:

      Una vez abierto el archivo, pegue las siguientes dos líneas:

      ~/easy-rsa/vars

      set_var EASYRSA_ALGO "ec"
      set_var EASYRSA_DIGEST "sha512"
      

      Estas líneas garantizarán que se configuren sus claves y solicitudes de certificado privadas para que la moderna Elliptic Curve Cryptography (ECC) genere claves y firmas seguras para sus clientes y su servidor de OpenVPN.

      Configurar sus servidores de OpenVPN y CA para que usen ECC significa que cuando un cliente y un servidor intenten establecer una clave simétrica compartida, pueden usar algoritmos de Elliptic Curve para realizar el intercambio. Usar ECC para un intercambio de claves es mucho más rápido que usar solo Diffie-Hellman con el clásico algoritmo RSA, dado que los números son mucho más pequeños y los cálculos son más rápidos.

      Antecedentes: Cuando los clientes se conectan a OpenVPN, usan el cifrado asimétrico (también conocido como la clave pública/privada) para realizar un protocolo de enlace TLS. Sin embargo, al transmitir tráfico de VPN cifrado, el servidor y los clientes usan el cifrado simétrico, que también se conoce como cifrado de clave compartida.

      Hay mucha menos estructura informática con cifrado simétrico que con el asimétrico: los números que se utilizan son mucho más pequeños y las CPU modernas integran instrucciones para realizar operaciones de cifrado simétricas optimizadas. Para hacer el cambio de cifrado de asimétrico a simétrico, el servidor de OpenVPN y el cliente usarán el algoritmo Elliptic Curve Diffie-Hellman (ECDH) para acordar una clave secreta compartida lo antes posible.

      Cuando haya completado el archivo vars, puede continuar creando el directorio PKI. Para ello, ejecute la secuencia de comandos easyrsa con la opción init-pki. Aunque ya ejecutó este comando en el servidor CA como parte de los requisitos previos, debe ejecutarlo aquí porque su servidor de OpenVPN y el de CA tienen directorios PKI separados:

      Tenga en cuenta que no necesita crear una entidad de certificación en su servidor de OpenVPN. Su servidor de CA es el único responsable de validar y firmar certificados. La PKI de su servidor VPN solo se usa como una ubicación adecuada y centralizada para almacenar solicitudes de certificado y certificados públicos.

      Después de iniciar su PKI en el servidor de OpenVPN, estará listo para continuar con el siguiente paso: crear una solicitud de certificado de servidor de OpenVPN y una clave privada.

      Paso 3: Crear una solicitud de certificado de servidor de OpenVPN y una clave privada

      Ahora que su servidor de OpenVPN tiene todos los requisitos previos instalados, el siguiente paso es generar una clave privada y una solicitud de firma de certificados (CSR) en su servidor de OpenVPN. A continuación, transferirá la solicitud a su CA para que se firme, lo que creará el certificado requerido. Cuando tenga un certificado firmado, lo transferirá de vuelta al servidor de OpenVPN y lo instalará para que el servidor lo use.

      Para comenzar, diríjase al directorio ~/easy-rsa de su servidor de OpenVPN como su non-root user:

      Invoque easyrsa con la opción gen-req seguida de un nombre común (CN) para la máquina. El CN puede ser el que prefiera, pero puede resultarle útil que sea descriptivo. Durante este tutorial, el CN del servidor de OpenVPN será server. Asegúrese de incluir también la opción nopass. Si no lo hace, se protegerá con contraseña el archivo de solicitud, lo que puede generar problemas de permisos más adelante.

      Nota: Si elige otro nombre que no sea server, deberá modificar algunas de las instrucciones a continuación. Por ejemplo, al copiar los archivos generados al directorio /etc/openvpn, deberá sustituir los nombres que correspondan. También deberá modificar el archivo /etc/openvpn/server.conf más adelante para señalar los archivos .crt y .key correctos.

      • ./easyrsa gen-req server nopass

      Output

      Common Name (eg: your user, host, or server name) [server]: Keypair and certificate request completed. Your files are: req: /home/sammy/easy-rsa/pki/reqs/server.req key: /home/sammy/easy-rsa/pki/private/server.key

      Con esto, se crearán una clave privada para el servidor y un archivo de solicitud de certificado llamado server.req. Copie la clave del servidor al directorio /etc/openvpn/server:

      • sudo cp /home/sammy/easy-rsa/pki/private/server.key /etc/openvpn/server/

      Tras completar estos pasos, habrá creado correctamente una clave privada para su servidor de OpenVPN. También generó una solicitud de firma de certificado para el servidor de OpenVPN. Ahora la CSR está listo para firmar por su CA. En la siguiente sección de este tutorial, aprenderá a firmar una CSR con la clave privada de su servidor CA.

      Paso 4: Firmar la solicitud de certificado del servidor de OpenVPN

      En el paso anterior, creó una solicitud de firma de certificado (CSR) y una clave privada para el servidor de OpenVPN. Ahora el servidor de CA necesita conocer el certificado server y validarlo. Una vez que el CA valide y devuelva el certificado al servidor de OpenVPN, los clientes que confían en su CA podrán confiar también en el servidor de OpenVPN.

      En el servidor de OpenVPN, como su non-root user, use SCP u otro método de transferencia para copiar la solicitud de certificado server.req al servidor CA para firmar lo siguiente:

      • scp /home/sammy/easy-rsa/pki/reqs/server.req sammy@your_ca_server_ip:/tmp

      Ahora inicie sesión en el servidor CA como el non-root user que posee el directorio easy-rsa, donde creó su PKI. Importe la solicitud del certificado usando la secuencia de comandos easyrsa:

      • cd ~/easy-rsa
      • ./easyrsa import-req /tmp/server.req server

      Output

      . . . The request has been successfully imported with a short name of: server You may now use this name to perform signing operations on this request.

      A continuación, firme la solicitud ejecutando la secuencia de comandos easyrsa con la opción sign-req seguida del tipo de solicitud y el nombre común. El tipo de solicitud puede ser client o server. Como estamos trabajando con la solicitud de certificado del servidor de OpenVPN, asegúrese de usar el tipo de solicitud server:

      • ./easyrsa sign-req server server

      En el resultado, se le solicitará que verifique que la solicitud provenga de una fuente de confianza. Escriba yes y pulse ENTER para confirmar:

      Output

      You are about to sign the following certificate. Please check over the details shown below for accuracy. Note that this request has not been cryptographically verified. Please be sure it came from a trusted source or that you have verified the request checksum with the sender. Request subject, to be signed as a server certificate for 3650 days: subject= commonName = server Type the word 'yes' to continue, or any other input to abort. Confirm request details: yes . . . Certificate created at: /home/sammy/easy-rsa/pki/issued/server.crt

      Tenga en cuenta que si cifró su clave privada CA, se le solicitará su contraseña en este momento.

      Completados estos pasos, ha firmado la solicitud de certificado del servidor de OpenVPN usando la clave privada del servidor de CA. El archivo server.crt resultante contiene la clave de cifrado pública del servidor de OpenVPN, así como una nueva firma del servidor de CA. El objetivo de la firma es indicar a todos los que confían en el servidor de CA que también pueden confiar en el servidor de OpenVPN cuando se conecten a él.

      Para terminar de configurar los certificados, copie los archivos server.crt y ca.crt desde el servidor de CA al servidor de OpenVPN:

      • scp pki/issued/server.crt sammy@your_vpn_server_ip:/tmp
      • scp pki/ca.crt sammy@your_vpn_server_ip:/tmp

      Ahora vuelva a su servidor de OpenVPN, copie los archivos de /tmp a /etc/openvpn/server:

      • sudo cp /tmp/{server.crt,ca.crt} /etc/openvpn/server

      Ahora su servidor de OpenVPN está casi listo para aceptar conexiones. En el siguiente paso, realizará algunos pasos adicionales para aumentar la seguridad del servidor.

      Paso 5: Configurar materiales de cifrado de OpenVPN

      Para obtener una capa de seguridad adicional, añadiremos una clave secreta extra compartida que el servidor y todos los clientes usarán con la directiva tls-crypt de OpenVPN. Esta opción se usa para confundir el certificado TLS que se usa cuando un servidor y un cliente se conectan inicialmente. También lo usa el servidor de OpenVPN para realizar comprobaciones rápidas de los paquetes entrantes: si se firma un paquete usando la clave previamente compartida, el servidor lo procesa; si no se firma, el servidor sabe que es de una fuente no confiable y puede descartarlo sin tener que realizar otras tareas de descifrado.

      Esta opción lo ayudará a asegurarse de que su servidor de OpenVPN pueda hacer frente al tráfico sin autenticación, a los escáneres de puerto y a los ataques de denegación de servicio, que pueden restringir recursos del servidor. También hace que sea más difícil identificar el tráfico de red de OpenVPN.

      Para generar la clave tls-crypt antes compartida, ejecute lo siguiente en el servidor de OpenVPN en el directorio ~/easy-rsa:

      • cd ~/easy-rsa
      • openvpn --genkey --secret ta.key

      El resultado será un archivo llamado ta.key. Cópielo en el directorio /etc/openvpn/server/:

      • sudo cp ta.key /etc/openvpn/server

      Con estos archivos implementados en el servidor de OpenVPN, estará listo para crear certificados de cliente y archivos de clave para sus usuarios, que usará para conectarse con la VPN.

      Paso 6: Generar un par de certificado y clave de cliente

      Aunque puede generar una solicitud de claves y certificados privados en su máquina cliente y, luego, enviarla a la CA para que la firme, en esta guía se describe un proceso para generar la solicitud de certificado en el servidor de OpenVPN. El beneficio de este enfoque es que podemos crear una secuencia de comandos que generará de manera automática archivos de configuración de cliente que contienen las claves y los certificados necesarios. Esto le permite evitar la transferencia de claves, certificados y archivos de configuración a los clientes y optimiza el proceso para unirse a la VPN.

      Generaremos un par individual de clave y certificado de cliente para esta guía. Si tiene más de un cliente, puede repetir este proceso para cada uno. Tenga en cuenta que deberá pasar un valor de nombre único a la secuencia de comandos para cada cliente. En este tutorial, el primer par de certificado y clave se denominará client1.

      Comience por crear una estructura de directorios dentro de su directorio de inicio para almacenar los archivos de certificado y clave de cliente:

      • mkdir -p ~/client-configs/keys

      Debido a que almacenará los pares de certificado y clave de sus clientes y los archivos de configuración en este directorio, debe bloquear sus permisos ahora como medida de seguridad:

      • chmod -R 700 ~/client-configs

      Luego, diríjase al directorio EasyRSA y ejecute la secuencia de comandos ​​​​​​easyrsa con las opciones gen-req y nopass, junto con el nombre común para el cliente:

      • cd ~/easy-rsa
      • ./easyrsa gen-req client1 nopass

      Presione ENTER para confirmar el nombre común. Luego, copie el archivo client1.key al directorio ~/client-configs/keys/ que creó antes:

      • cp pki/private/client1.key ~/client-configs/keys/

      Luego, transfiera el archivo client1.req a su servidor de CA usando un método seguro:

      • scp pki/reqs/client1.req sammy@your_ca_server_ip:/tmp

      Ahora inicie sesión en su servidor de CA. A continuación, diríjase al directorio de EasyRSA e importe la solicitud de certificado:

      • cd ~/easy-rsa
      • ./easyrsa import-req /tmp/client1.req client1

      Luego, firme la solicitud como lo hizo para el servidor en el paso anterior. Esta vez, asegúrese de especificar el tipo de solicitud client:

      • ./easyrsa sign-req client client1

      Cuando se le solicite, ingrese yes para confirmar que desea firmar la solicitud de certificado y que esta provino de una fuente confiable:

      Output

      Type the word 'yes' to continue, or any other input to abort. Confirm request details: yes

      Nuevamente, si cifró su clave de CA, se le solicitará la contraseña en este punto.

      Con esto, se creará un archivo de certificado de cliente llamado client1.crt. Transfiera este archivo de vuelta al servidor:

      • scp pki/issued/client1.crt sammy@your_server_ip:/tmp

      Vuelva a su servidor de OpenVPN, copie el certificado del cliente al directorio ~/client-configs/keys/:

      • cp /tmp/client1.crt ~/client-configs/keys/

      Luego copie los archivos ca.crt y ta.key al directorio ~/client-configs/keys/ también y establezca los permisos correspondientes para su usuario sudo:

      • cp ~/easy-rsa/ta.key ~/client-configs/keys/
      • sudo cp /etc/openvpn/server/ca.crt ~/client-configs/keys/
      • sudo chown sammy.sammy ~/client-configs/keys/*

      Con esto, se generarán los certificados y las claves de su servidor y cliente, y se almacenarán en los directorios correspondientes de su servidor de OpenVPN. Aún quedan algunas acciones que se deben realizar con estos archivos, pero se realizarán más adelante. Por ahora, puede continuar con la configuración de OpenVPN.

      Paso 7: Configurar OpenVPN

      Al igual que muchas otras herramientas de código abierto ampliamente usadas, OpenVPN tiene muchas opciones de configuración disponibles para personalizar su servidor para sus necesidades específicas. En esta sección, le daremos instrucciones para instalar una configuración de un servidor de OpenVPN basada en uno de los archivos de configuración de muestra incluidos en la documentación de este software.

      Primero, copie el archivo de muestra server.conf como punto de inicio para su propio archivo de configuración:

      • sudo cp /usr/share/doc/openvpn/sample/sample-config-files/server.conf /etc/openvpn/server/

      Abra el archivo nuevo para editarlo con el editor de texto que prefiera. Usaremos nano en nuestro ejemplo:

      • sudo nano /etc/openvpn/server/server.conf

      Deberá cambiar algunas líneas en este archivo. Primero, encuentre la sección HMAC de la configuración buscando la directiva tls-auth. Esta línea no debería tener comentarios. Elimine los comentarios agregando un ; al comienzo de la línea. Luego, añada una nueva línea después que contenga solo el valor tls-crypt ta.key:

      /etc/openvpn/server.conf

      ;tls-auth ta.key 0 # This file is secret
      tls-crypt ta.key
      

      Luego, busque las líneas cipher para encontrar la sección de cifrado. El valor predeterminado está configurado para AES-256-CBC; sin embargo, el cipher de AES-256-GCM ofrece un mejor nivel de cifrado, de rendimiento y es muy compatible con los clientes de OpenVPN actualizados. Eliminaremos el valor predeterminado añadiendo un signo ; al inicio de esta línea y, luego, añadiremos otra línea que contenga el valor actualizado de AES-256-GCM:

      /etc/openvpn/server.conf

      ;cipher AES-256-CBC
      cipher AES-256-GCM
      

      Justo después de esta línea, añada una directiva auth para seleccionar el algoritmo de codificación de mensajes HMAC. SHA256 es una buena opción:

      /etc/openvpn/server.conf

      auth SHA256
      

      Luego, encuentre la línea que contenga la directiva dh que define los parámetros Diffie-Hellman. Como hemos configurado todos los certificados para usar Elliptic Curve Cryptography, no necesita un archivo seed Diffie-Hellman. Elimine la línea existente que se parece a dh dh2048.pem o dh dh.pem. El nombre del archivo para la clave Diffie-Hellman puede ser diferente al indicado en el archivo de configuración del servidor de ejemplo. Luego, añada una línea después con el contenido dh none:

      /etc/openvpn/server.conf

      ;dh dh2048.pem
      dh none
      

      A continuación, queremos que OpenVPN se ejecute sin privilegios cuando se inicie, por lo que debemos indicarle que se ejecute con un usuario y grupo de nobody. Para ello, encuentre y elimine el comentario de las líneas user nobody y group nobody eliminando el signo ; desde el inicio de cada línea:

      /etc/openvpn/server.conf

      user nobody
      group nobody
      

      (Opcional) Aplicar cambios de DNS para redireccionar todo el tráfico a través de la VPN

      Con los ajustes anteriores, creará la conexión de VPN entre su cliente y el servidor, pero no se forzarán conexiones para usar el túnel. Si desea usar la VPN para dirigir todo su tráfico de clientes a la VPN, probablemente le convenga aplicar algunos ajustes más a las computadoras de clientes.

      Para comenzar, encuentre y elimine el comentario de la línea que contenga push "redirect-gateway def1 bypass-dhcp". Al hacerlo le indicará a su cliente que redirija todo su tráfico a través de su servidor de OpenVPN. Tenga en cuenta que habilitar esta funcionalidad puede causar problemas de conectividad con otros servicios de red, como SSH:

      /etc/openvpn/server.conf

      push "redirect-gateway def1 bypass-dhcp"
      

      Debajo de esta línea, encontrará la sección dhcp-option. Nuevamente, elimine ; del inicio de ambas líneas para quitar los comentarios:

      /etc/openvpn/server.conf

      push "dhcp-option DNS 208.67.222.222"
      push "dhcp-option DNS 208.67.220.220"
      

      Estas líneas le indicarán a su cliente que use los solucionadores OpenDNS gratuitos en las direcciones IP en la lista. Si prefiere otros solucionadores DNS, puede sustituirlos en lugar de las IP resaltadas.

      Esto ayudará a los clientes a configurar de nuevo sus ajustes de DNS para usar el túnel de la VPN como puerta de enlace predeterminada.

      (Opcional) Ajustar el puerto y el protocolo

      Por defecto, el servidor de OpenVPN usa el puerto 1194 y el protocolo UDP para aceptar las conexiones de los clientes. Si necesita usar un puerto diferente debido a restricciones de los entornos de red que sus clientes puedan emplear, puede cambiar la opción port. Si no aloja contenido web en su servidor de OpenVPN, el puerto 443 es una opción común, ya que se suele permitir en las reglas de firewall.

      Para hacer que OpenVPN escuche en el puerto 443, abra el archivo server.conf y encuentre la línea que tiene el siguiente aspecto:

      /etc/openvpn/server.conf

      port 1194
      

      Edítela para que el puerto sea 443:

      /etc/openvpn/server.conf

      # Optional!
      port 443
      

      Algunas veces, el protocolo se limita a ese puerto también. Si es así, encuentre la línea proto debajo de la línea port y cambie el protocolo de udp a tcp:

      /etc/openvpn/server.conf

      # Optional!
      proto tcp
      

      Si cambia el protocolo a TCP, deberá cambiar el valor de la directiva explicit-exit-notify de 1 a 0, ya que solo UDP la usa. Si no lo hace al usar TCP, se producirán errores al iniciar el servicio de OpenVPN.

      Busque la línea explicit-exit-notify al final del archivo y cambie el valor a 0:

      /etc/openvpn/server.conf

      # Optional!
      explicit-exit-notify 0
      

      Si no tiene necesidad de usar un puerto y protocolo distintos, es mejor dejar estos ajustes sin cambiar.

      (Opcional) Apuntar a credenciales no predeterminadas

      Si seleccionó antes un nombre diferente durante el comando ./easyrsa gen-req server, modifique las líneas cert y key en el archivo de configuración server.conf para que apunten a los archivos .crt y .key correspondientes. Si usa el nombre predeterminado, server, ya está configurado correctamente:

      /etc/openvpn/server.conf

      cert server.crt
      key server.key
      

      Cuando termine, guarde y cierre el archivo.

      Ya ha terminado de configurar sus ajustes generales de OpenVPN. En el siguiente paso, personalizaremos las opciones de redes del servidor.

      Paso 6: Ajustar la configuración de redes del servidor de OpenVPN

      Hay algunos aspectos de la configuración de redes del servidor que deben modificarse para que OpenVPN pueda dirigir el tráfico de manera correcta a través de la VPN. El primero es el reenvío IP, un método para determinar a dónde se debe dirigir el tráfico de IP. Esto es esencial para la funcionalidad de VPN que proporcionará su servidor.

      Para ajustar su configuración de IP predeterminada de su servidor de OpenVPN, abra el archivo /etc/sysctl.conf usando nano o su editor preferido:

      • sudo nano /etc/sysctl.conf

      Luego, añada la siguiente línea en la parte superior del archivo:

      /etc/sysctl.conf

      net.ipv4.ip_forward = 1
      

      Guarde y cierre el archivo cuando termine.

      Para leer el archivo y cargar los nuevos valores de la sesión actual, escriba lo siguiente:

      Output

      net.ipv4.ip_forward = 1

      Ahora, su servidor de OpenVPN podrá reenviar el tráfico entrante de un dispositivo ethernet a otro. Este ajuste garantiza que el servidor pueda dirigir tráfico desde los clientes que se conectan en la interfaz de VPN virtual fuera de sus otros dispositivos de ethernet físicos. Esta configuración enviará todo el tráfico web de su cliente a través de la dirección IP de su servidor y la dirección IP pública de su cliente se ocultará de manera eficaz.

      En el siguiente paso, deberá configurar algunas reglas de firewall para asegurarse de que el tráfico hacia y desde su servidor de OpenVPN fluye adecuadamente.

      Paso 9: Configuración del firewall

      Hasta ahora, instaló OpenVPN en su servidor, lo configuró y generó las claves y los certificados necesarios para que su cliente acceda a la VPN. Sin embargo, aún no ha proporcionado ninguna instrucción a OpenVPN sobre a dónde enviar el tráfico web entrante de los clientes. Puede especificar cómo el servidor debería gestionar el tráfico de clientes estableciendo algunas reglas de firewall y configuraciones de enrutamiento.

      Asumiendo que ha seguido los requisitos previos al inicio de este tutorial, ya debería tener instalado firewalld y ejecutándose en su servidor. Para permitir OpenVPN en el firewall, debe saber qué zona de firewalld está activa. Búsquelo con el siguiente comando:

      • sudo firewall-cmd --get-active-zones

      Output

      public Interfaces: eth0

      Si no ve una zona trusted que indique la interfaz tun0, ejecute los siguientes comandos para agregar el dispositivo VPN a esa zona:

      • sudo firewall-cmd --zone=trusted --add-interface=tun0
      • sudo firewall-cmd --permanent --zone=trusted --add-interface=tun0

      A continuación, agregue el servicio openvpn a la lista de servicios permitidos por firewalld dentro de su zona activa y, luego, haga que el ajuste sea permanente ejecutando el comando de nuevo pero añadiendo la opción --permanent:

      • sudo firewall-cmd --permanent --add-service openvpn
      • sudo firewall-cmd --permanent --zone=trusted --add-service openvpn

      Para aplicar los cambios en el firewall, ejecute:

      • sudo firewall-cmd --reload

      Ahora puede verificar que el servicio se haya añadido correctamente con el siguiente comando:

      • sudo firewall-cmd --list-services --zone=trusted

      Output

      openvpn

      Luego, añadiremos una regla de mascarada al firewall. Enmascarar permite a su servidor de OpenVPN traducir las direcciones de sus clientes de OpenVPN a la dirección pública propia del servidor y hacer lo contrario con el tráfico que se envía de vuelta a los clientes. Este proceso también se conoce como Traducción de la dirección de red (NAT).

      Añada reglas de enmascaramiento con los siguientes comandos:

      • sudo firewall-cmd --add-masquerade
      • sudo firewall-cmd --add-masquerade --permanent

      Puede verificar que el enmascaramiento se haya añadido correctamente con este comando:

      • sudo firewall-cmd --query-masquerade

      Output

      yes

      A continuación, deberá crear la regla de enmascaramiento específica para su subred de OpenVPN solo. Puede hacerlo creando primero una variable shell (DEVICE en nuestro ejemplo) que representará la interfaz de red principal usada por su servidor y, luego, usar esa variable para añadir de manera permanente la regla de enrutamiento:

      • DEVICE=$(ip route | awk '/^default via/ {print $5}')
      • sudo firewall-cmd --permanent --direct --passthrough ipv4 -t nat -A POSTROUTING -s 10.8.0.0/24 -o $DEVICE -j MASQUERADE

      Asegúrese de volver a cargar firewalld para que se activen todos sus cambios:

      • sudo firewall-cmd --reload

      Los comandos con el indicador --permanent se asegurarán de que las reglas persistirán en los reinicios. El comando firewall-cmd --reload garantiza que se apliquen todos los cambios pendientes en el firewall. Con las reglas de firewall implementadas, podemos iniciar el servicio de OpenVPN en el servidor.

      Paso 10: Iniciar OpenVPN

      OpenVPN se ejecuta como servicio systemd, por lo que podemos usar systemctl para administrarlo. Configuraremos OpenVPN para que se inicie en el arranque para que pueda conectarse a su VPN en cualquier momento siempre que su servidor se esté ejecutando. Para ello, habilite el servicio de OpenVPN añadiéndolo a systemctl:

      Luego, inicie el servicio de OpenVPN:

      Vuelva a verificar que el servicio de OpenVPN está activo con el siguiente comando. Debería ver active (running) en el resultado:

      Output

      [email protected] - OpenVPN service for server Loaded: loaded (/usr/lib/systemd/system/[email protected]; enabled; vendor preset: disabled) Active: active (running) since Tue 2020-04-07 02:32:07 UTC; 1min 52s ago Docs: man:openvpn(8) https://community.openvpn.net/openvpn/wiki/Openvpn24ManPage https://community.openvpn.net/openvpn/wiki/HOWTO Main PID: 15868 (openvpn) Status: "Initialization Sequence Completed" Tasks: 1 (limit: 5059) Memory: 1.2M CGroup: /system.slice/system-openvpnx2dserver.slice/[email protected] └─15868 /usr/sbin/openvpn --status /run/openvpn-server/status-server.log --status-version 2 --suppress-timestamps --cipher AES-256-GCM --ncp-ciphers AES-256-GCM:AES-128-GCM:AES-256-CBC:AES-128-CBC:BF-CBC --config server.conf . . .

      Ya completamos la configuración de la parte del servidor para OpenVPN. A continuación, configurará su máquina de cliente y se conectará con el servidor de OpenVPN.

      Paso 11: Crear la infraestructura de configuración de clientes

      Es posible que se deban crear archivos de configuración para clientes de OpenVPN, ya que todos los clientes deben tener su propia configuración y alinearse con los ajustes mencionados en el archivo de configuración del servicio. En este paso, en lugar de detallarse el proceso para escribir un único archivo de configuración que solo se pueda usar en un cliente, se describe un proceso para crear una infraestructura de configuración de cliente que puede usar para generar archivos de configuración sobre la marcha. Primero creará un archivo de configuración “de base” y, luego, una secuencia de comandos que le permitirá generar archivos de configuración, certificados y claves de clientes exclusivos según sea necesario.

      Comience creando un nuevo directorio en el que almacenará archivos de configuración de clientes dentro del directorio client-configs creado anteriormente:

      • mkdir -p ~/client-configs/files

      Luego, copie un archivo de configuración de cliente de ejemplo al directorio client-configs para usarlo como su configuración de base:

      • cp /usr/share/doc/openvpn/sample/sample-config-files/client.conf ~/client-configs/base.conf

      Abra este archivo nuevo con nano o su editor de texto preferido:

      • nano ~/client-configs/base.conf

      Dentro de este, ubique la directiva remote. Esto dirige al cliente a la dirección de su servidor de OpenVPN: la dirección IP pública de su servidor de OpenVPN. Si decidió cambiar el puerto en el que el servidor de OpenVPN escucha, también deberá cambiar 1194 por el puerto seleccionado:

      ~/client-configs/base.conf

      . . .
      # The hostname/IP and port of the server.
      # You can have multiple remote entries
      # to load balance between the servers.
      remote your_server_ip 1194
      . . .
      

      Asegúrese de que el protocolo coincida con el valor que usa en la configuración del servidor:

      ~/client-configs/base.conf

      proto udp
      

      Luego, elimine los comentarios de las directivas user y group quitando el signo ; al inicio de cada línea:

      ~/client-configs/base.conf

      # Downgrade privileges after initialization (non-Windows only)
      user nobody
      group nobody
      

      Encuentre las directivas que establecen ca, cert y key. Elimine los comentarios de estas directivas, ya que pronto agregará los certificados y las claves dentro del archivo:

      ~/client-configs/base.conf

      # SSL/TLS parms.
      # See the server config file for more
      # description. It's best to use
      # a separate .crt/.key file pair
      # for each client. A single ca
      # file can be used for all clients.
      ;ca ca.crt
      ;cert client.crt
      ;key client.key
      

      De modo similar, elimine la directiva tls-auth, ya que añadirá ta.key directamente al archivo de configuración del cliente (y se configura el servidor para que use tls-crypt):

      ~/client-configs/base.conf

      # If a tls-auth key is used on the server
      # then every client must also have the key.
      ;tls-auth ta.key 1
      

      Refleje los ajustes de cipher y auth establecidos en el archivo /etc/openvpn/server/server.conf:

      ~/client-configs/base.conf

      cipher AES-256-GCM
      auth SHA256
      

      Luego, agregue la directiva key-direction en algún lugar del archivo. Es necesario que fije el valor “1” para esta, a fin de que la VPN funcione de manera correcta en la máquina cliente:

      ~/client-configs/base.conf

      key-direction 1
      

      Por último, agregue algunas líneas no incluidas. Aunque puede incluir estas directivas en todos los archivos de configuración de clientes, solo debe habilitarlas para clientes Linux que incluyan un archivo /etc/openvpn/update-resolv-conf. Esta secuencia de comandos usa la utilidad resolvconf para actualizar la información de DNS para clientes Linux.

      ~/client-configs/base.conf

      ; script-security 2
      ; up /etc/openvpn/update-resolv-conf
      ; down /etc/openvpn/update-resolv-conf
      

      Si su cliente tiene Linux instalado y un archivo /etc/openvpn/update-resolv-conf, elimine los comentarios de estas líneas del archivo de configuración de cliente luego de que se haya generado.

      Guarde y cierre el archivo cuando termine.

      A continuación, cree una secuencia de comandos que compile su configuración de base con el certificado, la clave y los archivos de cifrado pertinentes, y, luego, ubique la configuración generada en el directorio ~/client-configs/files. Abra un nuevo archivo llamado make_config.sh en el directorio ~/client-configs:

      • nano ~/client-configs/make_config.sh

      Dentro de este, agregue el siguiente contenido:

      ~/client-configs/make_config.sh

      #!/bin/bash
      
      # First argument: Client identifier
      
      KEY_DIR=~/client-configs/keys
      OUTPUT_DIR=~/client-configs/files
      BASE_CONFIG=~/client-configs/base.conf
      
      cat ${BASE_CONFIG} 
      <(echo -e '<ca>') 
      ${KEY_DIR}/ca.crt 
      <(echo -e '</ca>n<cert>') 
      ${KEY_DIR}/${1}.crt 
      <(echo -e '</cert>n<key>') 
      ${KEY_DIR}/${1}.key 
      <(echo -e '</key>n<tls-crypt>') 
      ${KEY_DIR}/ta.key 
      <(echo -e '</tls-crypt>') 
      > ${OUTPUT_DIR}/${1}.ovpn
      

      Guarde y cierre el archivo cuando termine.

      Antes de continuar, asegúrese de marcar este archivo como ejecutable escribiendo lo siguiente:

      • chmod 700 ~/client-configs/make_config.sh

      Esta secuencia de comandos realizará una copia del archivo base.conf que creó, recopilará todos los archivos de certificados y claves que haya confeccionado para su cliente, extraerá el contenido de estos y los anexará a la copia del archivo de configuración de base, y exportará todo este contenido a un nuevo archivo de configuración de cliente. Esto significa que se evita la necesidad de administrar los archivos de configuración, certificado y clave del cliente por separado, y que toda la información necesaria se almacena en un solo lugar. El beneficio de este método es que, si alguna vez necesita agregar un cliente más adelante, puede simplemente ejecutar esta secuencia de comandos para crear de manera rápida el archivo de nueva configuración y asegurarse de que toda la información importante se almacene en una sola ubicación de acceso sencillo.

      Tenga en cuenta que siempre que agregue un nuevo cliente, deberá generar claves y certificados nuevos para poder ejecutar esta secuencia de comandos y generar su archivo de configuración. Podrá practicar con este comando en el siguiente paso.

      Paso 12: Generar las configuraciones de clientes

      Si siguió la guía, creó un certificado y una clave de cliente llamados client1.crt y client1.key, respectivamente, en el paso 6. Puede generar un archivo de configuración para estas credenciales si se dirige al directorio ~/client-configs y ejecuta la secuencia de comandos que realizó al final del paso anterior:

      • cd ~/client-configs
      • ./make_config.sh client1

      Con esto, se creará un archivo llamado client1.ovpn en su directorio ~/client-configs/files:

      • ls ~/client-configs/files

      Output

      client1.ovpn

      Debe transferir este archivo al dispositivo que planee usar como cliente. Por ejemplo, puede ser su computadora local o un dispositivo móvil.

      Si bien las aplicaciones exactas empleadas para lograr esta transferencia dependerán del sistema operativo de su dispositivo y sus preferencias personales, un método seguro y confiable consiste en usar el protocolo de transferencia de archivos SSH (SFTP ) o la copia segura (SCP) en el backend. Con esto, se transportarán los archivos de autenticación de VPN de su cliente a través de una conexión cifrada.

      Aquí tiene un comando SFTP de ejemplo que puede ejecutar desde su computadora local (macOS o Linux). Esto copiará el archivo client1.ovpn que hemos creado en el último paso a su directorio de inicio:

      • sftp sammy@openvpn_server_ip:client-configs/files/client1.ovpn ~/

      A continuación, se muestran diferentes herramientas y tutoriales para transferir de manera segura los archivos del servidor de OpenVPN a una computadora local:

      Paso 13: Instalar la configuración de cliente

      En esta sección, se aborda la forma de instalar un perfil de VPN de cliente en Windows, macOS, Linux, iOS y Android. Ninguna de estas instrucciones para clientes depende de la otra. Por lo tanto, no dude en dirigirse directamente a la que corresponda para su dispositivo.

      La conexión de OpenVPN tendrá el mismo nombre que usó para el archivo .ovpn. En lo que respecta a este tutorial, esto significa que la conexión se llama client1.ovpn y guarda correspondencia con el primer archivo de cliente que generó.

      Windows

      Instalación

      Descargue la aplicación de cliente de OpenVPN para Windows de la página de descargas de OpenVPN. Seleccione la versión adecuada del instalador para su versión de Windows.

      Nota: OpenVPN necesita privilegios administrativos para instalarse.

      Luego de instalar OpenVPN, copie el archivo .ovpn a esta ubicación:

      C:Program FilesOpenVPNconfig
      

      Cuando inicie OpenVPN, este detectará el perfil de manera automática y lo dejará disponible.

      Debe ejecutar OpenVPN como administrador cada vez que lo use, aun en cuentas administrativas. Para realizar esto sin tener que hacer clic con el botón secundario y seleccionar Ejecutar como administrador cada vez que use la VPN, debe fijarlo como ajuste predeterminado desde una cuenta administrativa. Esto también significa que los usuarios estándares deberán ingresar la contraseña del administrador para usar OpenVPN. Por otro lado, los usuarios estándares no pueden conectarse de manera adecuada al servidor a menos que la aplicación OpenVPN del cliente tenga derechos de administrador. Por lo tanto, se necesitan privilegios elevados.

      Para configurar la aplicación OpenVPN de modo que se ejecute siempre con privilegios de administrador, haga clic con el botón secundario en su ícono de acceso directo y diríjase a Propiedades. Al final de la pestaña Compatibilidad, haga clic en el botón Cambiar la configuración para todos los usuarios. En la nueva ventana, seleccione Ejecutar este programa como administrador.

      Conexión

      Cada vez que inicie OpenVPN GUI, Windows le preguntará si quiere que el programa realice cambios en su computadora. Haga clic en . Iniciar la aplicación OpenVPN de cliente solo ubica el applet en la bandeja del sistema para que pueda conectar y desconectar la VPN según sea necesario; no establece la conexión de VPN.

      Una vez que se inicie OpenVPN, establezca una conexión ingresando al área de notificación y haga clic con el botón secundario en el ícono de OpenVPN. Con esto, se abrirá el menú contextual. Seleccione client1 en la parte superior del menú (su perfil client1.ovpn) y, luego, Connect.

      Una ventana de estado se abrirá y mostrará el resultado de registro mientras se establece la conexión, y se mostrará un mensaje una vez que el cliente esté conectado.

      Desconéctese de la VPN de la misma forma: ingrese al applet de la bandeja del sistema, haga clic con el botón secundario en el icono de OpenVPN, seleccione el perfil del cliente y haga clic en Disconnect.

      macOS

      Instalación

      Tunnelblick es un cliente de OpenVPN gratuito y de código abierto para macOS. Puede descargar la última imagen de disco desde la página de descargas de Tunnelblick. Haga clic en el archivo .dmg descargado y siga las instrucciones para instalarlo.

      Al finalizar el proceso de instalación, Tunnelblick le preguntará si tiene algún archivo de configuración. Responda I have configuration files (tengo archivos de configuración) y deje que Tunnelblick finalice el proceso. Abra una ventana de Finder, busque client1.ovpn y haga doble clic en él. Tunnelblick instalará el perfil de cliente. Se necesitan privilegios de administrador.

      Conexión

      Inicie Tunnelblick haciendo doble clic en el icono de Tunnelblick de la carpeta Aplicaciones. Una vez que se haya iniciado Tunnelblick, su icono aparecerá en la barra de menú de la esquina superior derecha de la pantalla para controlar las conexiones. Haga clic en el icono y, luego, en el elemento de menú Connect client1 para iniciar la conexión de VPN.

      Linux

      Instalación

      Si usa Linux, dispone de varias herramientas según su distribución. En su entorno de escritorio o gestor de ventanas, también pueden incluirse utilidades de conexión.

      Sin embargo, el método de conexión más universal consiste en simplemente usar el software OpenVPN.

      En Ubuntu o Debian, puede instalarlo como en el servidor escribiendo lo siguiente:

      • sudo apt update
      • sudo apt install openvpn

      En CentOS, puede habilitar los repositorios EPEL y, luego, instalarlo escribiendo lo siguiente:

      • sudo yum install epel-release
      • sudo yum install openvpn

      Configuración

      Verifique si su distribución incluye una secuencia de comandos /etc/openvpn/update-resolv-conf:

      Output

      update-resolv-conf

      A continuación, edite el archivo de configuración de cliente de OpenVPN que transfirió:

      Si pudo encontrar un archivo update-resolv-conf, elimine los comentarios de las tres líneas de agregó para modificar los ajustes de DNS:

      client1.ovpn

      script-security 2
      up /etc/openvpn/update-resolv-conf
      down /etc/openvpn/update-resolv-conf
      

      Si usa CentOS, cambie la directiva group de nogroup a nobody para que coincidan los grupos de distribución disponibles:

      client1.ovpn

      group nobody
      

      Guarde y cierre el archivo.

      Ahora, podrá conectarse a la VPN simplemente apuntando el comando openvpn hacia el archivo de configuración de cliente:

      • sudo openvpn --config client1.ovpn

      Esto debería permitirle establecer conexión con la VPN.

      iOS

      Instalación

      Desde iTunes App Store, busque e instale OpenVPN Connect, la aplicación oficial de cliente de OpenVPN de iOS. Para transferir su configuración de cliente iOS al dispositivo, conéctelo directamente a una computadora.

      El proceso para completar la transferencia con iTunes se describe aquí. Abra iTunes en la computadora y haga clic en iPhone > apps. Deslícese hacia la parte inferior, hasta la sección Compartir archivos, y haga clic en la app OpenVPN. La ventana en blanco de la derecha, Documentos OpenVPN, sirve para compartir archivos. Arrastre el archivo .ovpn a la ventana de documentos de OpenVPN. iTunes con el perfil de VPN listo para cargar en el iPhone

      Ahora inicie la aplicación OpenVPN en el iPhone. Recibirá una notificación de que un nuevo perfil está listo para importarse. Toque el símbolo verde del signo de suma para importarlo.

      La app OpenVPN de iOS muestra un nuevo perfil listo para importarse Connecting (Conectando)

      De esta manera, OpenVPN estará listo para usarse con el nuevo perfil. Inicie la conexión deslizando el botón Connect (Conectar) a la posición On (Activado). Finalice la conexión deslizando el mismo botón a la posición Off (Desactivado).

      Nota: El conmutador de VPN de Settings (Ajustes) no se puede usar para establecer conexión con la VPN. Si lo intenta, recibirá un aviso que le indicará conectarse únicamente utilizando la aplicación OpenVPN.

      Aplicación OpenVPN de iOS conectada a la VPN

      Android

      Instalación

      Abra Google Play Store. Busque e instale Android OpenVPN Connect, la aplicación de cliente de OpenVPN oficial de Android.

      Puede transferir el perfil .ovpn conectando el dispositivo Android a su computadora a través de un puerto USB y copiando el archivo. De manera alternativa, si tiene un lector de tarjetas SD, puede quitar la tarjeta SD del dispositivo, copiar el perfil a ella y, luego, insertarla tarjeta de vuelta en el dispositivo Android.

      Inicie la aplicación OpenVPN y haga clic en el menú FILE (Archivo) para importar el perfil.

      Selección del menú de importación de perfiles de la aplicación OpenVPN de Android.

      Luego, diríjase a la ubicación del perfil guardado (en la captura de pantalla se usa /storage/emulated/0/openvpn​​​) y seleccione su archivo .ovpn. Haga clic en el botón IMPORT para terminar de importar este perfil.

      Selección de un perfil de VPN para su importación en la aplicación OpenVPN de Android.

      Connecting (Conectando) Cuando se añada el perfil, verá una pantalla como esta:

      La aplicación de Android de OpenVPN con un nuevo perfil añadido

      Para conectarse, haga clic en el botón de activar para el perfil que desea usar. Verá datos en tiempo real de su conexión y tráfico enrutados a través de su servidor de OpenVPN: la aplicación de Android de OpenVPN conectada a la VPN

      Para desconectarse, solo haga clic en el botón de alternancia en la parte superior izquierda de nuevo. Se le solicitará que confirme que desea desconectarse de su VPN.

      Paso 14: Probar la conexión de su VPN (opcional)

      Nota: Este método para probar su conexión de VPN solo funcionará si optó por enrutar todo el tráfico a través de la VPN en el paso 7 cuando editó el archivo server.conf para OpenVPN.

      Una vez que todo esté instalado, con una simple revisión confirmará que todo funciona de forma correcta. Sin tener una conexión VPN habilitada, abra un explorador e ingrese a DNSLeakTest.

      El sitio mostrará la dirección de IP asignada por su proveedor de servicio de Internet y la forma en que aparece para el resto del mundo. Para corroborar sus ajustes de DNS a través del mismo sitio web, haga clic en Extended Test (Prueba extendida). Esto le indicará los servidores DNS que usa.

      Ahora, conecte el cliente de OpenVPN a la VPN de su Droplet y actualice el navegador. Con esto, debería aparecer una dirección de IP totalmente distinta (la de su servidor de VPN). De esta manera, aparecerá ante el mundo. Una vez más, la opción Extended Test de DNSLeakTest revisará sus ajustes de DNS y confirmará que ahora use los solucionadores de DNS enviados por su VPN.

      Paso 15: Revocar certificados de clientes

      Es posible que, de tanto en tanto, deba rechazar un certificado de cliente para evitar más accesos al servidor de OpenVPN.

      Para ello, siga el ejemplo en el tutorial de requisitos previos Cómo instalar y configurar una entidad de certificación en CentOS 8 en la sección Revocar un certificado.

      Cuando haya revocado un certificado para un cliente usando estas instrucciones, deberá copiar el archivo crl.pem generado a su servidor de OpenVPN en el directorio /etc/openvpn/server:

      • sudo cp /tmp/crl.pem /etc/openvpn/server/

      Luego, abra el archivo de configuración del servidor de OpenVPN:

      • sudo nano /etc/openvpn/server/server.conf

      Al final del archivo, agregue la opción crl-verify, que indicará al servidor OpenVPN que revise la lista de rechazo de certificados que creamos cada vez que se realice un intento de conexión:

      /etc/openvpn/server/server.conf

      crl-verify crl.pem
      

      Guarde y cierre el archivo.

      Por último, reinicie OpenVPN para implementar el rechazo de certificados:

      El cliente ya no debería poder conectarse de manera correcta al servidor usando la credencial anterior.

      Para rechazar clientes adicionales, siga este proceso:

      1. Rechace el certificado con el comando ./easyrsa revoke client-name.
      2. Genere una nueva CRL.
      3. Transfiera el archivo crl.pem nuevo a su servidor de OpenVPN y cópielo al directorio /etc/openvpn/server/ para sobrescribir la lista anterior.
      4. Reinicie el servicio de OpenVPN.

      Puede usar este proceso para rechazar cualquier certificado emitido anteriormente para su servidor.

      Conclusión

      Ahora debería tener una red privada completamente funcional ejecutándose en su servidor de OpenVPN. Puede navegar en la web y descargar contenido sin preocuparse porque individuos malintencionados rastreen su actividad.

      Hay varios pasos que podría seguir para personalizar su instalación de OpenVPN aún más, como configurar su cliente para que se conecte a la VPN de manera automática o configurar reglas específicas para los clientes y políticas de acceso. Para esto y para otras personalizaciones de OpenVPN, debería consultar la documentación oficial de OpenVPN.

      Para configurar más clientes, solo debe seguir los pasos 6 y 11-13 para cada dispositivo adicional. Para rechazar el acceso de los clientes, siga el paso 15.



      Source link