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

Для этого мы будем использовать два инструмента, а именно Ngrok и Serveo. Оба продукта предоставляют доступ к вашему локальному серверу из Интернета. Так зачем использовать оба? Ну, во-первых, хотя мы могли бы использовать только Ngrok, это бесплатно только для 1 онлайн-процесса ngrok. Это означает, что мы можем обслуживать только один локальный хост в Интернете, будь то наш сервер или интерфейс. Но в данном случае нам нужны оба, поэтому мы не можем использовать только Ngrok. Serveo бесплатен для нескольких процессов, но в моем случае он не работал для моего внешнего приложения, поэтому я объединил оба.

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

Чтобы использовать Ngrok, вам необходимо зарегистрироваться на сайте. Перейдите на https://dashboard.ngrok.com/signup и зарегистрируйтесь, после чего вы будете перенаправлены в свой личный кабинет. Там следуйте инструкциям по загрузке и распаковке консоли Ngrok. Добавьте токен авторизации с помощью загруженной консоли, чтобы иметь возможность просматривать все открытые туннели на панели инструментов, когда кто-то подключается к вашему сайту.

Запустите ваше внешнее приложение. В случае Angular используйте

ng serve — prod — host 0.0.0.0 — disable-host-check

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

Теперь откройте загруженную консоль ngrok и введите

ngrok http 4200

Ngrok предоставит случайный URL-адрес http и https для вашего приложения Angular, которое будет работать на http://localhost:4200, когда вы ng serve свое приложение.

Если в вашем приложении нет внутреннего сервера, работающего на локальном хосте, то на этом вы почти закончили. Просто получите доступ к назначенному URL-адресу, и вы увидите, как ваше приложение работает в Интернете.

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

Чтобы использовать Serveo, запустите внутренний сервер. В ядре Asp.net вы делаете это, запустив

dotnet watch run

Это запустит сервер, который будет работать на http://localhost:5000.

Откройте предпочитаемую консоль и введите

ssh -R 80:localhost:5000 serveo.net

Для Serveo ничего устанавливать не нужно. Просто запустите приведенную выше команду, и все готово. После запуска команды Serveo предоставит вам случайный URL-адрес, как и Ngrok. URL-адрес является поддоменом serveo.net. Выглядит это примерно так https://abc.serveo.net/. Объяснение различных опций для Serveo можно найти на сайте https://serveo.net/

Чтобы протестировать Serveo, вы можете использовать инструмент тестирования API, такой как Postman, и отправлять запросы на ваш только что сгенерированный URL-адрес на ваш сервер. Например, вы можете отправлять запросы GET на https://abc.serveo.net/api/users, чтобы получить пользователей, если такой URL-адрес существует в вашем приложении. Если вы можете получать ответы от серверной части, вы можете заменить URL-адрес локального хоста в своем внешнем приложении. В Angular это будет служба, которая взаимодействует с серверной частью. В React вы можете заменить это, например, в axios. Этот шаг очень важен, потому что без этого изменения ваш интерфейс по-прежнему будет подключаться к вашему локальному хосту, который будет нормально работать на вашем компьютере, но не будет доступен где-либо еще.

Ваш метод обслуживания может выглядеть так в Angular

getUsers(): Observable<User[]> {
 return this.http.get<User[]>(
 `https://abc.serveo.net/api/users/`
 );
 }

Перестройте и запустите ваше внешнее приложение, и все готово.

И точно так же ваше приложение доступно по всему миру. :)

Надеюсь, эта статья была полезной.