Веб-приложение настроено, поэтому в этой последней главе мы развернем его, чтобы каждый мог его использовать.
После прошлой недели наступил финал! Хотя я называю это финалом, после него предстоит много работы, например, написать правильный набор тестов. Но в этой главе мы, наконец, развернем веб-приложение и запустим его.
Если вы хотите сразу перейти к коду, вы можете найти его здесь.
База данных
Следуя шагам, описанным в этом руководстве, это полный список шагов, которые мы можем выполнить для создания облачной базы данных, чтобы мы могли получить доступ к данным с нашего сервера.
- Создайте учетную запись в https://www.mongodb.com/cloud/atlas/register
- Следуйте инструкциям, данным
- Выберите уровень бесплатного пользования
- Выберите регион
- Выберите параметры кластера и назовите кластер
- Подождите несколько минут, пока кластер не будет создан.
- Следуйте инструкциям по началу работы
- 1. Создайте своего первого пользователя базы данных
— Добавьте нового пользователя базы данных
— Выберите аутентификацию по паролю
— Введите имя пользователя и пароль (старайтесь избегать специальных символов, чтобы у Mongoose не было проблем с разбором)
— Выберите права администратора Atlas
— (Необязательно) Выберите кластеры, к которым у пользователя есть доступ
— Нажмите «Добавить пользователя».
- 2. Внесите IP-адреса в белый список
— Добавьте IP-адрес
— Для простоты разрешите доступ откуда угодно
— Нажмите Подтвердить
- 3. (Необязательно) Загрузите образцы данных
- 4. Подключиться к вашему кластеру
— Подключить наше приложение
- Перейти к коллекциям
— нажмите «Добавить мои собственные данные»
— добавьте имя базы данных и имя коллекции
Теперь мы можем проверить локально, что это работает. Мы заменяем наш файл .env новой ссылкой на базу данных и начальными данными с производственными данными. Если мы проверим базу данных Atlas, мы увидим там игры.
Героку
Мы развернем наше приложение на Heroku для простоты использования. Мы можем сделать это, следуя этому сценарию.
heroku login -i heroku create -a retro-ps5 heroku config:set NODE_ENV='production' heroku config:set MONGO_INITDB_SERVER='...' heroku config:set DB_DROP='false' heroku config:set DB_SEED='false' git push heroku main
С 11 марта 2019 года Heroku автоматически выполняет скрипт сборки, если он доступен, поэтому нам не нужно запускать его вручную. А для приложений Node.js — в конце концов, Sapper — это Node.js — Heroku выполняет стартовый скрипт без дополнительной настройки.
С этим наше приложение живо! Вы можете проверить это в https://retro-ps5.herokuapp.com/.
Исправление ошибок
Если мы проверим или создадим любую новую игру с 0 положительными или отрицательными голосами, круговая диаграмма будет построена неправильно. Простое решение состоит в том, чтобы добавить 1e-6 — очень маленькое число — чтобы положительный процент не равнялся нулю.
$: positivePercent = calcPercent(game.positiveVotes, game.positiveVotes + game.negativeVotes) + (game.positiveVotes === 0 ? 1e-6 : 0);
Мы фиксируем и отправляем изменения и снова развертываем с помощью git push heroku main . В будущем мы могли бы внедрить конвейер CI/CD, чтобы нам не нужно было автоматически развертывать каждое внедряемое нами изменение.
Пользовательский домен
Наше приложение уже запущено, но было бы неплохо иметь для него собственный домен. Начнем с покупки! В моем случае я купил в CDMON.
На стороне Heroku мы добавляем домены с помощью следующих команд.
heroku domains:add www.caniplayitonps5.site heroku domains:add caniplayitonps5.site heroku domains # prints the domains, for checking
Первая команда добавляет CNAME, а вторая добавляет ALIAS или ANAME.
С доменами, добавленными в Heroku, мы идем в CDMON, к нашим доменам, для управления DNS, и добавляем оба. Затем мы ждем, пока изменения вступят в силу.
К сожалению, интеграция между Heroku и CDMON не так хороша, и мне нужно было попросить их службу поддержки клиентов, чтобы в конечном итоге перейти на их сторону.
Но с этим, теперь наш сайт работает в нашем собственном домене! Проверьте это на http://www.caniplayitonps5.site/
Google Реклама
Чтобы настроить Google Ads, сначала нам нужно создать учетную запись в их рекламной системе. Они предоставят нам ссылку, которую мы скопируем и вставим в template.html. К сожалению, в нашем веб-приложении недостаточно контента, чтобы иметь право на участие в Google Ads.
И, как горько-сладкая нота, эта серия завершена! Мы прошли путь от нуля до веб-героя; мы создали наше собственное веб-приложение с нуля, и теперь оно работает в пользовательском домене.
Надеюсь, вам понравилась эта серия. Для меня это была очень благодарная работа!
Вы можете увидеть весь код в https://github.com/omirobarcelo/retro-ps5.
