Я недавно запущен А Веб-приложение который состоял из реагированного интерфейса, который сообщал с экспресс-сервером. Это был мой первый раз, работая с этим стеком, и все работало гладко на моем местном, но потом пришло время для развертывания. Подсчитывать зловещую музыку Отказ
Есть много многих статей и учебных пособий о том, как развернуть это приложение к производству, до того, как я решил, чтобы не следовать никому из них и составлять свой путь. Я хотел бы практиковать использование AWS, поэтому все используемые здесь услуги находятся на этой платформе. Я не претендую, это лучший способ Но это просто то, что работало для меня.
TL; доктор
- Доменное имя, зарегистрированное на маршруте 53
- React Foreend развернут для усиления
- Экспресс-бэкэнда, организованная на световых экземплярах
Усилитель — это служба AWS для хостинга SPA. Он подключается непосредственно с вашим репозитором GitHub или GitLab, имеет постоянное развертывание на каждом толчке на Master и совершенно бесплатно. Он также имеет другие потрясающие службы, такие как развертывание тестовых ветвей, или генерируют предварительный просмотр, когда создан PR.
Начните с навигации на консоль усилителя в AWS и нажмите на Подключить приложение кнопка.
После выбора провайдера хостинга кода AMPLIFY попросит доступ только к чтению доступа к своей учетной записи, и вы можете включить с выбором репо и ветви для развертывания.
После этого вам будет предложено проверить процесс сборки, созданный для вас, и в ближайшее время ваше приложение будет жить! 🙌. Сгенерированные URL-адреса усиления следуют в этом формате branchName.randomCharacters.amplifyapp.com Так что ваш сайт URL может выглядеть что-то вроде этого https://master.d1dgz538iqckwr.amplifyapp.com/ Отказ
В моем коде я использовал переменную среды, и меня смущены, как усилитель сможет прочитать его с момента .env Файл был в .gitignore. И поэтому не совершил, и у меня не было возможности получить доступ к серверу, на котором размещено приложение. Тогда мой глаз поймал боковое меню, где Переменные среды написано. Здесь я смог добавить пару ключ и значение для моей переменной окружающей среды.
Переменные обновления среды требуют перерасхождения сайта, поэтому вернитесь к странице приложения и нажимайте на любую из шагов, отображаемых зелеными. Это покажет вам историю сборки и связанные с ними данные, а также повторно развернуть эту версию кнопка, которую вы должны нажать. Теперь ваше развертываемое приложение может использовать указанную вами переменную среды. 👏
Еще одна замечательная вещь по использованию Amminify заключается в том, что вы получаете SSL-сертификат, установленный на вашем сайте и автоматическое перенаправление с HTTP в HTTPS.
Маршрут 53 — это служба DNS, предлагаемая AWS, которое хорошо интегрируется с усилением. Это позволяет получить свое собственное доменное имя и легко подключить его к своему развернутому приложению.
Во-первых, перейдите на страницу маршрута 53 в консоли AWS, где вы увидите следующий компонент, позволяющий вам знать, что вы можете создать новый домен или передавать существующий домен на маршрут 53. В моем случае мне нужен новый домен.
Просто введите доменное имя, которое вы хотите иметь, и вы получите список всех доступных вариантов с ценами, а также некоторые соответствующие предложения. После того, как вы соглашаетесь на домене, добавьте его в корзину и проверьте. Вас попросят ваши контактные данные для проверки.
Теперь вернитесь в приложение в консоли усилителя, нажмите Управление доменом В боковом меню, и вы сможете увидеть Добавить домен . кнопка.
Обратите внимание, что имя домена занимает некоторое время для настройки, и вы получите электронное письмо, когда он закончен. Мой был готов примерно через 15 минут. Стакан воды и некоторые растягивается позже, посетите ваше доменное имя, чтобы увидеть ваше развернутое приложение Frontend. 🥳
Есть много вариантов развертывания экспресс-бэкинда. Я хотел попробовать неверный Но я нашел это слишком сложным. Я видел много учебных пособий, использующих EC2, потому что он включен в свободный уровень, но это также требует намного больше настроек. Я решил использовать AWS LightSail, которая является легкой версией EC2, которая позволяет вам раскрутить виртуальные серверы в кратчайшие сроки.
Просто перейдите к консоли светильника в консоли AWS и нажмите на Создать экземпляр . Отказ Здесь вам нужно выбрать операционную систему для вашего сервера, географический регион и план. Чертеж — это предварительно настроенное изображение, уже настроенное для запуска ваших приложений. Я выбрал план Node.js.
Я выбрал наименьший размер экземпляра с памятью 512 МБ, 1 виртуальный процессор CPU и 20 ГБ SSD-хранилища. Все это затрачено на $ 3,50 в месяц, а первый месяц предлагается бесплатно. После того, как ваш экземпляр создан, вы сможете увидеть его в световой консе.
Скорее всего, ваша экспресс-приложение работает на пользовательском порту, как порты 3000 или 4000. Все эти порты закрываются по умолчанию для защиты экземпляра. Вы можете открыть пользовательские порты, нажав на три вертикальных точка в компоненте экземпляра и нажав на Управлять Затем нажав на Сетевые вкладка. На этой странице вы можете бесплатно прикрепить статический IP-адрес для вашего экземпляра, чтобы IP-адрес не продолжал меняться каждый раз, когда экземпляр перезагружен или снят и перезапущен. Немного дальше вниз под Брандмауэр , вы можете добавить правило, чтобы открыть свой порт на все IP-адреса.
Теперь, когда сервер устанавливается и доступен в Интернете на указанном порту прикрепленного статического IP-адреса, вы можете использовать его и получить код приложения. Light Highs позволяет SSH через клемму браузера, но вы также можете скачать закрытый ключ с страницы вашей учетной записи и использовать свой собственный локальный терминал. После входа в сервер я клонировал бэкэнд Reppo из GitHub, установленные зависимости затем перезагружали север. Я использовал PM2 в качестве менеджера процесса. Теперь мои конечные точки доступны в интернете! 🎊 Я также вернулся в маршрут 53, чтобы добавить запись в мою размещенную зону, чтобы иметь поддомен для моей бэкинги: https://api.example.com Отказ
Эта настройка означает, что всякий раз, когда я вносим изменения в код, я должен SSH на сервер, запустите git pull. и PM2 Перезагрузка приложения , который слишком руководил для моего вкуса. Я посмотрел в действия GitHub, который непрерывно развернут для освещенных экземпляров, но не нашел никаких хороших вариантов. Я в порядке, если это так, поскольку это на данный момент, так как я знаю, что мой Backeng Refo не будет иметь много изменений.
Когда я развивался на моем местном, у меня был прокси опция добавлена в package.json в моей фабрике. Он был жесткозедирован к ценности моего бэкэндского URL, а после немного исследований казалось, что замена жесткодируемого значения с переменной окружающей среды была слишком большая из хлопот. Вместо этого я удалил опцию прокси и добавил переменную среды в каждом извлекать запрос.
const token = await fetch(`${process.env.REACT_APP_BACKEND_URL}/token`);
На данный момент мой интерфейс живет и имеет URL для моей бэкенда, который также живет, поэтому они должны быть в состоянии поговорить друг с другом, верно? Не так быстро! Мой интерфейс подавал через HTTPS, пока моя бэкэнда была подана на http. Браузер справедливо не позволил мне сделать запрос от безопасного домена в небезопасную.
С BitMai, вы можете бесплатно установить сертификат SSL на сервере бесплатно с помощью одной команды: sudo/opt/bitnami/bncert-tool Отказ Больше информации на этом здесь Отказ Этот инструмент также позволяет вам включить автоматическое повторное управление HTTP на HTTPS. После этого шага я мог бы набрать мою URL-адрес сервера с HTTP и увидеть, что он будет разрешен в HTTPS в браузере.
На данный момент я перезагружал свой интерфейс через консоль усиления, чтобы попытаться получить запросы API. На вкладке сети браузера я смог увидеть, что запрос собирается на правильный URL: https://api.example.com:4000/ , но моя просьба не может даже не достигать сервера! По приближению взгляда я заметил ошибку, показанную рядом с не удалось Статус: Net:: err_ssl_protocol_Error Отказ Здесь я понял, что пытаюсь получить доступ к пользовательскому порту, используя протокол HTTPS.
Я подумал о нескольких вариантах: либо запустите свой экспресс-сервер на порту 443, который будет подаваться через HTTPS, или как-то сделать мой пользовательский порт для HTTPS. После проверки множества вариантов, я смог в состоянии работать, настроив виртуальный хост Apache, чтобы перенаправить весь трафик от портов 80 и 443 в порт 4000.
Наконец, мое полное приложение стека было искренне и запущено! 🎉 Если вам интересно, что такое приложение, проверьте мое объявление.
Спасибо за чтение 👋 до следующего раза. Обложка Фото Марек СЗТУРК на бессплашне
Оригинал: «https://dev.to/dmahely/how-i-deployed-a-full-stack-react-express-app-to-production-4216»