Развертывание стало простым, быстрым и бесплатным с помощью 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 здесь.
Удачного развертывания.