Развертывание стало простым, быстрым и бесплатным с помощью Heroku

Недавно я решил активизировать Vue.js и Nuxt.js и прошел отличный курс Vue Mastery, который я настоятельно рекомендую, если вы заинтересованы в изучении экосистемы Vue.jc (большое спасибо Греггу и его коллегам за свои качественные курсы).

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

Сценарий использования прост: вы разработали приложение с помощью любимого внешнего фреймворка и хотите протестировать его в производственной среде и показать своим пользователям и своей маме, не утруждая себя техническими деталями. Heroku позволяет вам обслуживать ваше приложение прямо из удаленного репозитория всего за семь шагов, а именно:

Предварительное условие: Сначала вам нужно установить Heroku CLI. После установки выполните следующие действия.

1. Создайте приложение на Heroku.

В своем терминале поместите себя в папку своего приложения. Перед тем, как начать, убедитесь, что все отправлено на ваш GitHub или другой удаленный репозиторий. Выполните команду:

$ heroku create

Это создаст ваше приложение на Heroku (которое подготавливает Heroku к получению исходного кода) и сгенерирует две ссылки:

Creating app... done, ⬢ fakestuff-farboo-84560
https://fakestuff-farboo-84560.herokuapp.com/ | https://git.heroku.com/fakestuff-farboo-84560.git

Первая ссылка - это URL-адрес, по которому вы увидите свое приложение вживую. Вторая ссылка - это репозиторий GitHub, предоставленный Heroku, вам нужно будет отправить свое приложение, чтобы развернуть его.

2. Задайте конфигурацию сервера узла.

$ heroku config:set NPM_CONFIG_PRODUCTION=false

Эта команда скажет Heroku установить devDependencies. Точнее, при этом пропускается этап сокращения и осуществляется доступ к пакетам, объявленным в devDependencies во время выполнения. Это позволяет Heroku запускать npm run build.

3. Слушайте хост 0.0.0.0

$ heroku config:set HOST=0.0.0.0

4. Запустите узел в рабочем режиме.

$ heroku config:set NODE_ENV=production

5. Скажите Heroku запустить «npm run build"

Затем нам нужно добавить сценарий в наш package.json файл, чтобы сообщить Heroku о запуске npm run build. Просто добавьте строку "heroku-postbuild": "npm run build” в свой "script" объект в вашем package.json:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "heroku-postbuild": "npm run build"
}

6. Создайте Procfile для Heroku.

Heroku нужен профиль для выполнения и запуска нашего приложения. Нам просто нужно создать файл без расширения в корне нашей папки приложения, назвать его Procfile и добавить в него следующую строку:

web: npm run start

npm run start - это сценарий, запускающий приложение, а web направляет на него HTTP-трафик.

7. Отправьте репозиторий GitHub на Heroku для развертывания

Наконец, все, что осталось сделать, это обработать, зафиксировать и отправить настроенное приложение в Heroku:

$ git add Procfile
$ git commit -a -m "Configuration to deploy to heroku"
$ git push heroku master

И это в прямом эфире. Процесс развертывания и развертывания занимает несколько минут, а затем Heroku дает вам URL-адрес, по которому вы можете увидеть свое приложение.

Надеюсь, это было полезно. Вы также можете найти эти же шаги с некоторыми дополнительными видео на официальном сайте Nuxt.js здесь.

Бонус: настройка доменного имени

Как видите, по умолчанию Heroku развертывает ваше приложение в собственном домене в форме [name of app].herokuapp.com. Но вы определенно можете сделать свое приложение доступным в домене, отличном от Heroku. Все, что вам нужно сделать, это добавить к нему собственный домен без дополнительных затрат.

Вы можете найти пятиэтапный процесс в документации Heroku здесь.

Удачного развертывания.