Как создать и развернуть приложение стека MERN (React + Express + MongoDB + Node.js) на AWS EC2?

В этом посте мы собираемся настроить готовый к производству веб-сервер с нуля на AWS EC2 и развернуть приложение MERN Stack, которое имеет функции регистрации и установки целей?

Содержание
  1. Что такое приложение MERN Stack?
  2. Область применения данного учебника
  3. MERN Stack Goal Setter Application
  4. Содержание учебника
  5. Сфера применения данного руководства
  6. 1. Как создать новый сервер Ubuntu на AWS EC2
  7. 2. Как подключить терминал нашей локальной машины к экземпляру Ubuntu EC2 через SSH
  8. 3. Как настроить сервер с Nodejs , Mongodb, PM2, Nginx
  9. 4. Клонируйте проект на вашем сервере, вставив следующую команду
  10. 5. Настройте сервер NGINX с помощью следующих команд
  11. 6. Запуск сервера с помощью модуля pm2
  12. Вы успешно развернули ваше приложение MERN. Кроме того, вы можете добавить Elastic IP к вашему экземпляру EC2. Вы можете добавить доменное имя к вашему приложению с помощью сервиса route53 в Aws. Вы можете защитить свое приложение от атак с помощью AWS Waf (брандмауэр веб-приложений).
  13. Здравствуйте, я Абдул Вакар.
  14. Веб-разработчик, работающий в качестве разработчика MERN Stack. Я делюсь статьями о GraphQL, AWS, Typescript и React:

Что такое приложение MERN Stack?

Приложение MERN Stack состоит из фронтального приложения, построенного на React, а фронтенд React соединен с бэкенд api, построенным на Node.js + Expressjs + MongoDB, отсюда и название MERN (MongoDB, Expressjs, React, Nodejs). Другие вариации стека включают MEAN Stack, использующий Angular в качестве фронтенда, и MEVN Stack, использующий Vue.js в качестве фронтенда.

Область применения данного учебника

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

MERN Stack Goal Setter Application

Содержание учебника

  • Создайте новый сервер Ubuntu на AWS EC2
  • Подключите локальный терминал к экземпляру Ubunto EC2 через SSH
  • Настроить и установить Nodejs, MongoDB, PM2, NGINX
  • Разверните бэкенд и фронтенд приложения.
  • Настройте NGINX для сервера APIS.
  • Тестирование приложения MERN STack в браузере

В этом руководстве мы с нуля создадим готовый к производству веб-сервер на сервисе Amazon EC2 (Elastic Compute Cloud), а затем развернем на нем пользовательское приложение MERN Stack, поддерживающее регистрацию пользователей, авторизацию и функцию Goal Setter.

Что такое приложение MERN Stack?
Приложение MERN Stack состоит из внешнего приложения, построенного на React, которое подключается к внутреннему api, построенному на Node.js + Express + MongoDB, отсюда и название MERN Stack (Mongo, Express, React, Node). Другие варианты стека включают MEAN Stack, который имеет фронтенд на Angular, и MEVN Stack, который имеет фронтенд на Vue.js.

Сфера применения данного руководства

Целью данного урока является установка сервера на AWS EC2, затем развертывание и настройка фронтенда и бэкенда приложения стека MERN для совместной работы.

Содержание руководства
Создайте новый сервер Ubuntu на AWS EC2
Подключение к экземпляру Ubuntu EC2 через SSH
Настройте сервер с Node.js + MongoDB + NGINX
Развертывание Node.js + MongoDB back-end API
Развертывание React + Redux Front-end приложения
Настройте NGINX для обслуживания API и внешнего приложения
Протестируйте приложение MERN Stack в браузере

1. Как создать новый сервер Ubuntu на AWS EC2

Первое, что нам нужно для этого руководства — это сервер, выполните следующие шаги, чтобы создать новый экземпляр сервера Ubuntu 18.04 на AWS EC2.

  1. Войдите в консоль управления AWS по адресу https://aws.amazon.com/console/. Если у вас еще нет учетной записи, нажмите кнопку «Create a Free Account» и следуйте инструкциям.
  2. Перейдите в раздел EC2 Service в консоли AWS.
  3. Нажмите кнопку «Запустить экземпляр».
  4. Выберите AMI — В целях обучения вы можете использовать «Free tier only», введите имя вашего сервера в поле Name и нажмите enter, затем выберите Amazon Machine Image (AMI) «Ubuntu Server 18.04».
  5. Выберите тип экземпляра — мы используем Free Tier, поэтому выберем тип экземпляра «t2.micro» (подходит для Free tier) и нажмите «Configure Security Group» в верхнем меню.

  6. Настройте группу безопасности — добавьте новое правило для разрешения HTTP-трафика и нажмите «Review and Launch».

  7. Просмотрите детали и нажмите «Запуск».

  8. Нам нужна пара ключей для подключения терминала к серверу Ubunto. Выберите «Create a new key pair», введите имя пары ключей (например, «mern-key-pair») и нажмите «Download Key Pair», чтобы загрузить закрытый ключ, который мы будем использовать для подключения к серверу по SSH.

  9. Нажмите «Launch Instances», затем прокрутите страницу в самый низ и нажмите «View Instances», чтобы увидеть подробную информацию о новом запущенном экземпляре Ubuntu EC2.

2. Как подключить терминал нашей локальной машины к экземпляру Ubuntu EC2 через SSH

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

  1. Откройте окно терминала, куда мы загрузили ключи, и измените разрешения файла закрытого ключа командой chmod 400, например chmod 400 ~/Downloads/my-aws-key.pem, Если вы открыли терминал в той же директории, то нам не нужно передавать путь, просто передайте имя файла с ключами, иначе передайте полный путь к ключам. Для работы SSH ключ не должен быть доступен для публичного просмотра.

  2. Выберите вновь созданный сервер и нажмите кнопку «подключиться» в верхней части и перейдите на вкладку SSH Client. Здесь вы увидите команду для подключения к серверу типа ssh -i ubuntu@ Скопируйте эту команду и вставьте в локальный терминал, изменив директорию, если терминал открыт не в той же директории.

  3. Введите yes на запрос «Are you sure you want to continue connecting (yes/no)?», чтобы добавить url в список известных хостов.

ПРИМЕЧАНИЕ: Если вы используете Windows, вы можете подключиться к вашему экземпляру через SSH с помощью SSH-клиента PuTTY, инструкции см. в разделе Connect Using PuTTY в документации AWS.

3. Как настроить сервер с Nodejs , Mongodb, PM2, Nginx

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

curl https://gist.githubusercontent.com/cornflourblue/f0abd30f47d96d6ff127fe8a9e5bbd9f/raw/e3047c9dc3ce8b796e7354c92d2c47ce61981d2f/setup-nodejs-mongodb-production-server-on-ubuntu-1804.sh | sudo bash
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда установит следующие пакеты:

  • NodeJS 10
  • MongoDB
  • PM2
  • Nginx и другие конфигурации и запустит MongoDB и NGINX на сервере.

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

4. Клонируйте проект на вашем сервере, вставив следующую команду

git clone https://github.com/abdulwaqar844/mern-ec-2.git
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Перейдите в каталог mern-ec-2 и установите зависимости, выполнив команду
 sudo npm install
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Теперь смените каталог и перейдите в папку frontend и установите зависимости, выполнив команду
sh sudo npm install
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. После установки зависимостей сделайте сборку React-приложения, выполнив команду
sudo npm run build
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание: Мы будем загружать наш статический контент из папки сборки с помощью NodeJS API.

5. Настройте сервер NGINX с помощью следующих команд

  • Удалите стандартный файл конфигурации сайта NGINX с помощью команды
sudo rm /etc/nginx/s ites-available/default
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Запустите текстовый редактор nano для создания нового файла конфигурации сайта по умолчанию с помощью команды
 sudo nano /etc/nginx/sites-available/default
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Вставьте следующие данные в редактор nano и сохраните их.
server {
listen 80 default_server;
server_name _;

# Backend
location / {
  proxy_pass http://localhost:4001/;
}
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Сохраните файл, нажав ctrl + x и выбрав Yes to save.

  • Перезапустите NGINX командой sudo systemctl restart nginx

6. Запуск сервера с помощью модуля pm2

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

  • Перейдите в корневой каталог вашего проекта. Установите зависимости, если они еще не установлены, выполнив команду sudo npm install.
  • В этом проекте главный файл сервера существует в корневой папке. Выполните следующую команду в корневом каталоге проекта:
sudo pm2 start server.js
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда запустит бэкенд нашего nodejs приложения и покажет список запущенных процессов.

Вы успешно развернули ваше приложение MERN. Кроме того, вы можете добавить Elastic IP к вашему экземпляру EC2. Вы можете добавить доменное имя к вашему приложению с помощью сервиса route53 в Aws. Вы можете защитить свое приложение от атак с помощью AWS Waf (брандмауэр веб-приложений).


Здравствуйте, я Абдул Вакар.

Веб-разработчик, работающий в качестве разработчика MERN Stack. Я делюсь статьями о GraphQL, AWS, Typescript и React:

Оцените статью
Procodings.ru
Добавить комментарий