Как разместить Vue-app на Heroku
Простой способ размещения Vue-приложения на Heroku
Статья основана на оригинальной статье 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”.
В новой вкладке браузера откроется запущенное приложение:
В адресной строке браузера хорошо видел url запущенного приложения. Ну и сам стандартный вид приложения на Vuetify.js