Когда я стал фрилансером, я боялся развертывания. Как сотрудник стартапа, у меня всегда была роскошь моих коллег поблизости, если что -то пошло не так. Это была роскошь, которую я ценил, только когда это больше не было вариантом, так как в наши дни я в основном работаю сам. Но этот переход от сотрудника к фрилансеру также заставил меня понять кое -что еще:
Хотя развертывание может видеть пугающее, это не должно быть.
На самом деле, этот урок докажет, насколько легко и быстро вы можете развернуть приложение для следующего.js в Heroku.
Предварительные условия для этого урока:
- Git
- учетная запись Heroku (если у вас ее нет, создайте учетную запись Здесь )
- Heroku CLI (если у вас его нет, голова Здесь первый)
- Установлен Node.js (на момент написания, Next.js требует node.js 10.13 или более поздней версии. Для получения дополнительной информации, прочитайте Nexts.js — Начало работы )
Я предполагаю, что, если вы читаете этот пост, у вас, скорее всего, есть один на вашем местном хосте. Но, чтобы быть на 100% уверенным, я покажу вам, как настройка.
npx create-next-app # OR yarn create next-app
Пройдите настройку создания, и когда это будет сделано, вы можете попробовать запустить сервер разработки.
Heroku запускает свои приложения в контейнерах Linux под названием Dynos Анкет Когда Heroku запускает веб -динамо, он устанавливает переменную под названием $ port. Чтобы получить входящие запросы, вам необходимо привязать к этому порту.
Для этого перейдите в свой пакет на уровне корня.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT"
}
Совет: Для получения дополнительной информации о различных типах диноров и о том, как они работают, здесь это документация Хероку.
Во -первых, мы будем использовать GIT, чтобы подтолкнуть наш код в Heroku. Вот почему вы должны преобразовать свое приложение в git Repo, если это еще не так.
git init git add . git commit -m "Initial commit"
Вы должны войти в CLI Heroku, чтобы сделать это (вы можете сделать это с командой Heroku Login ) Как только вы это сделаете, вы можете создать свое приложение:
heroku create $APP_NAME
С помощью вашего кода и созданного приложения Heroku, вы теперь готовы натолкнуть этот код в свое приложение.
git push heroku master
Совет: Если вы находитесь в филиале, отличной от Master (скажем, Main или Production), вы можете подтолкнуть свой код так:
git push heroku [your branch name]:master
После выполнения развертывания вы можете получить доступ к своему приложению по адресу https://[app_name] .herokuapp.com/.
И вуаля!
1) Ошибка R10 (Тайм -аут загрузки) -> Веб -процесс не смог привязать к порту $ в течение 60 секунд после запуска
Вы совершили свой код, подтолкнули его к своему приложению Heroku, открыли вкладку, чтобы просмотреть ваше новое блестящее приложение и …. ничего не загружается. Хуже того, вы получите сообщение о том, что произошла ошибка. Во -первых, сделайте эту команду, чтобы увидеть ваши журналы:
heroku logs --tail
И, бам!
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Без паники. Скорее всего, вы забыли обновить свой Package.json. Вернитесь к этому файлу и убедитесь, что ваш стартовый скрипт имеет -p $ port обязательный.
2) Кэш сборки не найдена. Настройте кэширование сборки для более быстрых восстановлений
Вы можете увидеть это, когда вы подталкиваете свой код в Heroku, и ваше приложение создает. Это не ошибка, а предупреждение. Это не повредит вашему проекту, но приведет к более медленным сборкам. Для получения дополнительной информации вы можете прочитать Next.js документация по предмету Анкет
Чтобы исправить это, перейдите к своему Package.json и добавьте это:
"cacheDirectories": [".next/cache"]
После того, как вы закончите развертывание, вот список вещей, которые вы, возможно, захотите настроить для плавного запуска вашего приложения.
Установите переменные среды в Heroku
У вас есть два способа в вашем распоряжении, чтобы установить переменные окружающей среды в Heroku.
1) Через терминал
Сначала вы можете увидеть все свои переменные:
heroku config #If you just created your app, the result will probably be blank
Установите новую переменную. Это также перезапустит ваше приложение.
heroku config:set FOO=bar
Удалить переменную:
heroku config:unset FOO
2) Через приборную панель
Еще один способ добавления/редактирования/удаления переменных среды — через приборную панель.
Перейти к https://dashboard.heroku.com/apps и выберите свое приложение. Перейдите к настройкам. В соответствии с Config VAR вы сможете внести все необходимые изменения.
Автоматизированное развертывание
Если у вас есть учетная запись GitHub, вас может быть заинтересован в функции автоматического развертывания Heroku. Это будет означать, что каждый раз, когда вы перемещаете свои изменения в конкретную филиал, скажем, производство, эти изменения автоматически направляются к вашему приложению Heroku.
Для этого перейдите на приборную панель и выберите свое приложение. Под Развернуть вкладка, ищите Метод развертывания Анкет
Оттуда вы можете подключить свою учетную запись GitHub. Как только это будет сделано, вы можете выбрать репозиторий и ветвь.
Если вам понравилась статья, вы можете Следуй за мной в Твиттере Анкет
Оригинал: «https://dev.to/mariesta/deploy-your-next-js-app-to-heroku-in-5-minutes-ldn»