Как разместить Vue-app на Heroku

Простой способ размещения Vue-приложения на Heroku

Valery Semenenko

Published in

devSchacht

6 min readSep 8, 2017

Статья основана на оригинальной статье Sagar Jauhari: Quick-n-clean way to deploy Vue + Webpack apps on Heroku.

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

Создать статические страницы на локальной машине, а затем отправить собранное приложение на Heroku.

В этом случае размер готового приложения будет минимальным, а процесс размещения на Heroku — простым и быстрым. Ниже описан пример такого способа.

Введение

Процесс можно разбить на два этапа:

Первый этап — это работа с сервером Heroku. На этом этапе выполняется создание экземпляра приложения на сервере.
Второй этап — это работа на локальной машине. Это сборка приложения, создание дополнительных файлов, настройка локального репозитория, отправка приложения на удаленный репозиторий сервере.

Обзор Dashboard Heroku

Заходим на сервер Heroku. Платформа поддерживает достаточно много языков программирования, но нам нужен JavaScript, так как мы будем создавать приложение на Vue.js. Heroku поддерживает Node.js — это то, что нам нужно.

После входа под своей учетной записью попадаем в Dashboard — здесь отображены все приложения (если они есть). Если ни одного приложения под Heroku еще не размещено, то будет «чистый лист».

Примерный вид Dashboard может быть таким:

Создание нового приложения Heroku

Для создания нового приложения в Heroku наживаем сиротливую кнопку «New» в правом верхнем углу Dashboard и выбираем из краткого списка «Create new app».

В новом окне всего два поля — имя нового приложения (App name) и сервер (Choose a region), на котором оно будет размещено (United States или Europe):

После нажатия на кнопку «Create app» сервер открывает страницу с готовым приложением и его настройками:

Больше ничего здесь трогать не будем. Перемещаемся на свою локальную машину.

Создание тестового приложения

Для создания тестового приложения на Vue.js я воспользуюсь консольной утилитой vue-cli и фреймворком Vuetify.js. На странице документации представлены готовые консольные команды для быстрого развертывания Vue-приложения с поддержкой фреймворка Vuetify.js.

Выбираю конфигурацию Webpack Advanced, копирую команду и вставляю её в терминал. Мое приложение будет называться vuejs-test-app и иметь поддержку webpack:

vue init vuetifyjs/webpack-advanced vuejs-test-app

После установки и запуска командой npm run dev приложения vuejs-test-app можно переходить к его сборке, так как писать в самом приложении я ничего не буду.

Сборка тестового приложения

Сборка приложения выполняется очень просто. Для этого достаточно его остановить (Ctrl + C) и запустить консольную команду:

vuejs-test-app|master ⇒ npm run build

Если теперь посмотреть содержимое директории dist, то увидим там готовое приложение, с единственным файлом index.html, который необходим для правильной работы этого приложения на web-сервере:

vuejs-test-app|master ⇒ ll dist
total 8
-rw-r--r--  1 aarongreenberg staff 636B Sep 5 20:54 index.html
drwxr-xr-x  6 aarongreenberg staff 204B Sep 5 20:54 static

Дополнительные файлы

Процесс подготовки приложения на этом не заканчивается. Для следующего шага нужно перейти в директорию dist и создать в ней два файла: package.json и server.js:

vuejs-test-app|master ⇒ cd dist

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

Содержимое файла package.json будет следующим:

{
  "name": "test-vuejs-app",
  "version": "1.0.0",
  "description": "Heroku App",
  "author": "gearmobile",
  "private": true,
  "scripts": {
    "postinstall": "npm install express"
  }
}

Основная цель создания файла package.json — дать команду Heroku на установку express-сервера, который будет использоваться для размещаемого на Heroku приложения:

npm install express

Никаких дополнительных пакетов нет необходимости указывать в этом файле, так как в оригинальном файле package.json, расположенном в корне приложения, уже указаны все зависимости, необходимые для сборки приложения.

Содержимое файла server.js следующее:

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')
app = express()
app.use(serveStatic(__dirname))
var port = process.env.PORT || 5000
app.listen(port)
console.log('server started ' + port)

Так же как и в предыдущем случае, данный файл “подсказывает” Heroku, что следует делать с размещенным приложением.

При помощи файла server.js сервер Heroku выполняет запуск команды npm start, что в свою очередь осуществляет запуск размещенного на Heroku приложения.

Можно ( и нужно ) протестировать готовую сборку приложения на локальной машине, перед размещением его на удаленном сервере.

Для этого необходимо перейти в директорию dist проекта ( если вы еще не перешли туда ):

cd dist

… и выполнить внутри этой директории следующую команду:

dist|master ⇒ npm start
...
server started 5000

Строка server started 5000 говорит об успешном запуске приложения на локальнй машине. Теперь можно смело размещать его на Heroku. Останавливаем запущенный сервер сочетанием клавиш Ctrl + C.

Настройка локального репозитория

Предположим, что готовый проект на локальной машине располагается в директории vuejs-test-app ( как в моем случае ). Подготовленное приложение на удаленном сервере Heroku я назвал аналогично — vuejs-test-app.

Поэтому необходимо подключить удаленный репозиторий приложения vuejs-test-app на сервере к приложению vuejs-test-app на локальной машине. Это позволит разместить наше локальное приложение в удаленном репозитории.

Для этого выхожу из директории dist ( если мы еще находимся там ) так, чтобы оказаться в корне приложения vuejs-test-app.

Затем выполняю подключение удаленного репозитория:

dist|master ⇒ cd ..
vuejs-test-app|master ⇒ heroku git:remote -a vuejs-test-app
▸heroku-cli: update available from 6.12.5-17216bc to 6.14.16-9ae58fc
set git remote heroku to https://git.heroku.com/vuejs-test-app.git

Директория dist на данный момент не находится под версионным контролем Git, однако необходимо сделать так, чтобы она попала под него.

Для этого я нахожу в корне директории vuejs-test-app файл .gitignore:

vuejs-test-app|master ⇒ nano .gitignore

… и удаляю в нем строку dist/, тем самым разрешив Git выполнять контроль над этой папкой:

.DS_Store
node_modules/
// здесь была строка dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.swp

Теперь осталось зафиксировать это изменение — выполнить commit. Закрываю редактор nano (Ctrl + O, Ctrl + X) и выполняю команды ( здесь используются aliases, предоставляемые командной оболочкой zsh и оберткой Oh-My-Zsh ):

vuejs-test-app|master ⇒ gaa
vuejs-test-app|master ⇒ gcmsg "Adding dist folder"

Отлично — мы выполнили почти все шаги для размещения приложения на Heroku!

Размещаем директорию dist на Heroku

Размещаю приложение на Heroku двумя командами:

vuejs-test-app|master ⇒ heroku buildpacks:set heroku/nodejsBuildpack set. Next release on vuejs-test-app will use heroku/nodejs.Run git push heroku master to create a new release using this buildpack.vuejs-test-app|master ⇒ cd ..experiments|master ⇒ git subtree push --prefix vuejs-test-app/dist heroku master

Все — приложение vuejs-test-app размещено на Heroku. Чтобы открыть его и посмотреть, нужно нажать кнопку “Open app”.

В новой вкладке браузера откроется запущенное приложение: