Уроки, полученные при развертывании моей первой полноценной веб-программы

uroki poluchennye pri razvertyvanii moej pervoj polnoczennoj veb programmy

Вилл Абрамсон

Недавно я достиг одной из своих долгосрочных целей: развернул свою первую полноценную веб-программу.

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

Проведя более шести недель в гуглении, попытках, неудачах и попытках снова, мне наконец удалось развернуть свою веб-программу. Он состоял из бэкенда Node.js вместе с интерфейсом React для виртуальной машины Amazon Web Services (AWS) EC2.

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

7lX00uJHwR2qavL7Wm7oV-W-6LcApDtK1aP3
Победный скачок! — После развертывания вашей веб-приложения

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

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

Итак, вот оно…

Что значит развернуть приложение?

Веб-приложение разделено на две части.

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

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

Вам также нужно настроить сервер. Это включает:

  • настройка машины для доступа в Интернет и запуска кода
  • выставление правильных портов
  • прослушивание HTTP-запросов (Интернет-запросов)
  • указывая собственное доменное имя на сервер, с которого работает ваша программа

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

Итак, это обзор. Но как мы это делаем?

Начинаем

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

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

Это придало сложности и сделало поиск ответов в Гугле напрасным. Это оставило меня ошеломленным.

Я разделил проблему на эти шаги. Хотя любую проблему всегда можно разобрать дальше.

  • Настройка виртуальной машины и развертывание серверной части
  • Развертывание вашего Frontend
  • Установление связи двух программ
  • Указание вашего доменного имени

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

eBec3M2S8ovEMvyboray1w2JoZn1kp3uueXY
Процесс развертывания. Создано с помощью draw.io – великолепного бесплатного инструмента создания диаграмм.

Настройка виртуальной машины и развертывание серверной части

В моем случае это был сервер Express.js, развернутый на виртуальной машине amazon EC2. Я бы объяснил, как это сделать, но учебник «Создание и управление сервером Node.js на AWS – Часть 1» выполняет гораздо лучшую работу.

Это лучший учебник, который я встречал в этом пространстве, и охватывает:

  • Запуск виртуальной машины AWS
  • Создание правильных групп безопасности для портов
  • Загрузка кода с GitHub на виртуальную машину
  • Запуск сервера
  • Использование Nginx, HTTP-сервера, для отправки запросов из порта 80
  • Использование PM2 для сохранения процесса, запускающего ваш сервер

Это было спасение жизни, и без него я бы, наверное, все еще застрял. Спасибо, Роберт Тод.

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

Развертывание вашего Frontend

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

К сожалению, долго не делал. К примеру, в начале я попытался запустить свой Frontend с помощью npm start.

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

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

Примерами веб-серверов являются Apache и Nginx.

Веб-сервер прослушивает определенные порты, порт 80 или чаще порт 443 (защищенный), и либо обслуживает статические файлы (ваш код Frontend), либо передает запрос на другой порт. К примеру, мы видели запрос к Backend в учебнике Node.js выше.

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

Быстрее загрузка страницы означает счастливых пользователей.

Все файлы JavaScript Frontend можно объединить в один файл JavaScript. Обычно это делается путем запуска npm run build, предполагая, что этот сценарий определен в вашем package.json.

Вы можете прочитать больше о пакетном коде здесь.

В сущности, объединение программы удаляет все несущественное. Это включает в себя сокращение имен и размещение всего кода JavaScript в одном файле. Он также скомпилирует ваш код в правильной версии JavaScript. Это делается для того, чтобы все веб-браузеры могли понимать и запускать его (например, конвертировать TypeScript в JavaScript).

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

Вот хорошая статья о развертывании статических файлов на веб-сервере Nginx.
Надеемся, если все идет хорошо (а это никогда не происходит), ваш код Frontend теперь работает.

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

Установление связи двух программ

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

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

Совместное использование ресурсов между источниками (CORS) — это механизм, обеспечивающий связь между разными IP-адресами или портами. Вы хотите, чтобы ваша серверная часть позволила отправлять данные обратно на вашу внешнюю часть.

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

  • Заголовки можно добавить в Nginx, хотя это требует определенных уяснений. Вы можете начать здесь.
  • Для включения заголовков можно использовать модуль cors npm.

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

y1rlso3aqjosHHJaBZpKCwdOugXiYNOLLHQW

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

Ваш Frontend общается с Backend посредством HTTP-запросов. Где-то в вашем Frontend код, который укажет, где находится ваш Backend.

const networkInterface = createNetworkInterface({
 uri: ‘
});

Мой смотрелся так, что очевидно не подходило для моего рабочего сервера.

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

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

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

const networkInterface = createNetworkInterface({   
   uri: process.env.NODE_ENV === 'production' ?      
                     ' : 
                     '
});

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

Мы почти на месте. Фактически, ваше развертывание может работать сейчас.

Но мне пришлось справиться с последней проблемой.

Несмотря на то, что моя настройка CORS была правильной, необходимые заголовки не включались постоянно и добавлялись только иногда. Для некоторых запросов POST заголовки CORS не всегда присутствовали. Очень удивительно!

Эта ошибка привела меня к неприятной попытке исправить настройки CORS в Nginx, хотя на самом деле это не имело ничего общего с CORS.

На самом деле, мне даже не нужно было ничего делать с CORS в Nginx, потому что я использовал модуль CORS npm.

Ошибка возникла из-за двух других проблем:

  • Моя база данных была включена как sqlite файл в Backend и
  • Мой менеджер процессов, PM2, следил за изменениями файлов

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

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

Эти журналы дали ключ к решению моей проблемы.

Мне просто пришлось выключить функцию просмотра PM2. Бинго. И, наконец, это сработало.

Указание вашего доменного имени

Это вишенка на торте. Вы хотите хороший чистый URL для вашего только что развернутого приложения.

Я приобрел свое доменное имя через Amazon и воспользовался Route 53, чтобы направить его на верный экземпляр EC2. Это был удивительно безболезненный опыт.

Учебника Amazon было вполне достаточно.

gi7iwvOLcVgcWyejOR2SDpnnV3hImGJPBpG5
Прекрасная диаграмма — Источник: WPBeginner

Резюме

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

По крайней мере, вы должны лучше понимать, для чего искать Google!

Счастья.

Добавить комментарий

Ваш адрес email не будет опубликован.