Найти в Дзене
Заметки о программировании и не только
1 подписчик

Как запустить Angular приложение с HTTPS сертификатом

41
3 мин
Как включить HTTPS? Angular CLI предоставляет нам три параметра, которые мы можем передать вместе с командой ng serve для включения и настройки SSL. // enable or disable SSL
--ssl <boolean: defaults to false>
// path to root certificate
--ssl-cert <string: defaults to "ssl/server.crt">
// path to private key
--ssl-key <string: defaults to "ssl/server.key"> Пример №1 ng serve —-ssl true Пример №2 ng serve \
--ssl true \
--ssl-cert "/home/john/ssl/example.crt" \
--ssl-key "/home/john/ssl/example.key" Возможные проблемы 1. Certificate is not trusted Браузер не доверяет нашему сертификату, поэтому мы получаем предупреждение. Эту проблему довольно легко обойти. Просто игнорируем предупреждение и продолжаем использовать наше приложение. Если у вас не возникает вторая проблема, и вы можете жить с тем, что у вас есть ненадежный сертификат, вы можете просто остановиться здесь и продолжить разработку вашего отличного приложения. Эту проблему довольно легко обойти. Просто игнорируем п
Оглавление

Как включить HTTPS?

Angular CLI предоставляет нам три параметра, которые мы можем передать вместе с командой ng serve для включения и настройки SSL.

// enable or disable SSL
--ssl <boolean: defaults to false>
// path to root certificate
--ssl-cert <string: defaults to "ssl/server.crt">
// path to private key
--ssl-key <string: defaults to "ssl/server.key">

Пример №1

ng serve —-ssl true
  • SSL включен.
  • Проверьте, есть ли сертификат и закрытый ключ в стандартной папке ssl.
  • Если ничего не найдено, CLI сгенерирует свой собственный сертификат и закрытый ключ.

Пример №2

ng serve \
--ssl true \
--ssl-cert "/home/john/ssl/example.crt" \
--ssl-key "/home/john/ssl/example.key"
  • SSL включен.
  • Проверьте, есть ли сертификат и закрытый ключ по указанному пути.
  • Если ничего не найдено, CLI сгенерирует свой собственный сертификат и закрытый ключ.

Возможные проблемы

1. Certificate is not trusted

Браузер не доверяет нашему сертификату, поэтому мы получаем предупреждение.

Эту проблему довольно легко обойти. Просто игнорируем предупреждение и продолжаем использовать наше приложение.

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

Эту проблему довольно легко обойти. Просто игнорируем предупреждение и продолжаем использовать наше приложение. Как вариант, сертификат можно добавить в trusted root authorities (для Windows).

2. Disconnect

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

-2

На эту тему был заведен issue в github: https://github.com/angular/angular-cli/issues/5826

Решение

Чтобы решить все проблемы, нам нужно, чтобы наш браузер доверял нашему сертификату. Для решения понадобится утилита openssl. Для unix-систем она по умолчанию включена в терминал, а в Windows лучше всего воспользоваться git bash (утилита идет в комплекте с установкой git)

-3

Шаг 1. Сгенерируйте сертификат

Заберите к себе репозиторий Generate Trusted Certificate на ваш компьютер и запустите скрипт generate.sh в терминале или Git Bash. Репозиторий содержит всю необходимую конфигурацию для создания нового доверенного сертификата.

https://github.com/RubenVermeulen/generate-trusted-ssl-certificate

В папке с репозиторием будет создано 2 файла: server.crtи server.key.

Шаг 2. Установите сертификат

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

Для OS X

  1. Дважды щелкните на сертификате (server.crt).
  2. Выберите желаемую цепочку ключей (для входа должно подойти login).
  3. Добавьте сертификат.
  4. Откройте Keychain Access, если он еще не открыт.
  5. Выберите ранее выбранную вами цепочку ключей.
  6. Вы увидите сертификат localhost.
  7. Дважды щелкните на сертификате.
  8. Разверните Trust.
  9. Выберите опцию Always Trust для When using this certificate.
  10. Закройте окно сертификата.
  11. Сертификат установлен.

Windows 10

  1. Дважды щелкните на сертификате (server.crt).
  2. Нажмите кнопку «Установить сертификат...».
  3. Выберите, хотите ли вы сохранить его на уровне пользователя или на уровне машины. (Лучше выбрать второе.
  4. Нажмите «Далее».
  5. Выберите «Разместить все сертификаты в следующем хранилище».
  6. Нажмите «Обзор».
  7. Выберите "Trusted Root Authorities" (Доверенные корневые центры) сертификации».
  8. Нажмите «ОК».
  9. Нажмите «Далее».
  10. Нажмите «Готово».
  11. Если появится запрос, нажмите «Да».

Сертификат установлен

Шаг 3. Настройка Angular приложения

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

Создайте папку ssl в корне приложения.

angular-app:
- e2e
- src
- ssl
.angular-cli.json

Скопируйте закрытый ключ и корневой сертификат из шага 1 в папку ssl. Убедитесь, что имена файлов такие:

server.key (private key)
server.crt (root certificate)

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

"start": "ng serve --ssl true"

Больше материалов с хорошей подсветкой синтаксиса в моем блоге на teletype