Создайте и разверните приложение Vue.js на Heroku с нуля менее чем за пять минут

Предпосылки:

Для начала используйте Vue CLI для создания нового приложения Vue:

vue create <app-name>

Если интерфейс командной строки запрашивает предварительную настройку, выберите значение по умолчанию.

cd <app-name>

Теперь, когда вы находитесь в каталоге нового проекта, давайте попробуем запустить это приложение, чтобы убедиться, что все работает должным образом. Но сначала мне нравится запускать свои веб-приложения единообразно, используя npm start, как и Heroku. К сожалению, при инициализации приложения Vue команда запуска отличается (npm run serve). Давайте быстро это изменим. В папке проекта откройте файл package.json.

Блок фигурных скобок, содержащийся в scripts, указывает псевдонимы для команд справа от них. Просто замените serve на start. У вас должно получиться что-то вроде этого:

{
  "name": "vue-heroku",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
.
.
.
}

Давайте попробуем, вернувшись к терминалу и запустив:

npm start

Перейдите к http: // localhost: 8080, и вы должны увидеть приложение, созданное Vue.

Далее, наше приложение Vue - это простое интерфейсное приложение. Мы можем обслуживать его через сервер или статически обрабатывать файлы сборки. Давайте выберем второй вариант, который гораздо менее громоздкий.

Все, что нужно сделать, это добавить один файл в наш проект и один пакет сборки в Heroku. Создайте файл с именем static.json в корне репозитория вашего проекта. Добавьте к нему этот контент (официальный источник):

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

На этом мы закончили редактирование нашего проекта. Мы можем продолжить и зафиксировать наши изменения в Git, выполнив:

git add . && git commit -m "Heroku config"

Давайте создадим производственную сборку:

npm run build

Наконец, идет Heroku. Предполагая, что у вас есть интерфейс командной строки Heroku, запустите:

heroku login

Нажмите любую клавишу, и откроется окно браузера для входа в систему:

Мы готовы создать новое приложение Heroku с помощью интерфейса командной строки. Запустить:

heroku create

Очень важным шагом является выполнение этих двух команд:

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

Это позволит Heroku использовать наше приложение как статическое.

Теперь мы можем, наконец, выполнить команду развертывания:

git push heroku master

Перейдите к удаленному URL-адресу, и вы должны увидеть свое приложение Vue.

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

Вот ссылка на репозиторий Github, содержащий приложение Vue, которое использовалось для этой статьи, вместе со всеми модификациями.

Спасибо, что посетили, и продолжайте читать!