MEAN Stack: Развертывание на MongoDB Atlas

Использование удаленной базы данных MongoDB Atlas

Наш проект использует локальную базу данных и локальный сервер. Для размещения сайта в интернете необходимы удаленная база данных и удаленный сервер. Начнём с удалённой базы данных MongoDB Atlas (ссылка в описании).

1. Регистрация/Вход: Зарегистрируйтесь или войдите в учетную запись на сайте MongoDB Atlas.
2. Создание кластера: Нажмите «Build a Cluster». Для тестирования можно использовать базовые настройки, нажав «Create Cluster».
3. Создание пользователя: Создайте пользователя с доступом к базе данных, нажав «Add a new database user». Укажите имя пользователя (например, «George»), пароль (например, «12345») и выберите права администратора («Admin»).
4. Network Access (опционально): Можно указать разрешенные IP-адреса, но для тестирования этот шаг можно пропустить.
5. Подключение к базе данных: Скопируйте строку подключения, которая появится после создания кластера и пользователя. Эта строка понадобится для конфигурации приложения.

В файле конфигурации замените строку подключения к локальной базе данных (mongodb://localhost) на скопированную строку подключения к MongoDB Atlas. Не забудьте заменить password на ваш пароль.

После внесения изменений, попробуйте зарегистрироваться на сайте. Регистрация должна происходить в удалённой базе данных. Проверьте, появился ли новый пользователь в коллекции users в MongoDB Atlas.

Выгрузка проекта на удаленный сервер Heroku

В качестве удаленного сервера будем использовать Heroku (ссылка в описании). Это бесплатный сервис, работающий по принципу Git.

1. Регистрация/Вход: Зарегистрируйтесь или войдите в свою учетную запись на Heroku.
2. Создание приложения: Нажмите «Create new app», укажите имя (например, «itprager-mean»), выберите регион и нажмите «Create app».
3. Подготовка приложения: Перед выгрузкой приложения на Heroku, необходимо внести некоторые изменения в код.

Изменения в коде:

• Порт: В файле index.js замените process.env.PORT || 3000 на process.env.PORT || 8080. Это значение требуется Heroku.
• Удаление localhost: Во всех файлах, где используется localhost:3000, удалите это значение.
• Перенаправление URL: Добавьте код для перенаправления всех URL-адресов на файл index.html из папки public. Этот код обеспечит корректную работу одностраничного приложения. Пример:

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

• Сборка проекта: Перейдите в папку frontend и выполните команду ng build. Это скомпилирует проект и создаст необходимые файлы в папке public.

4. Установка Heroku CLI: Скачайте и установите Heroku CLI (ссылка на скачивание в описании). Инструкции по установке зависят от вашей операционной системы.
5. Авторизация: В терминале выполните команду heroku login. Авторизуйтесь через браузер.
6. Инициализация Git: В папке проекта выполните команду git init.
7. Добавление файлов: Выполните команды git add . и git commit -m "first commit".
8. Создание удаленного репозитория: Выполните команду heroku git:remote -a itprager-mean.
9. Выгрузка на Heroku: Выполните команду git push heroku master. Это выгрузит файлы проекта на сервер Heroku.

После успешной выгрузки ваш сайт будет доступен по адресу, указанному Heroku.

Изменение URL-адреса: Для изменения URL-адреса перейдите в настройки приложения на Heroku и добавьте новый домен. Не забудьте изменить DNS-серверы вашего домена.

В этом уроке мы успешно выгрузили созданный веб-сайт на удаленный сервер, используя MongoDB Atlas для базы данных и Heroku для хостинга. Теперь ваш сайт доступен в интернете!