Бесплатный хостинг для Vue JS

Простое развертывание приложения Vue + Webpack для Heroku за 5 шагов

После некоторых серьезных поисков в Google по этой теме я, наконец, устал и написал этот туториал,
так как не мог поверить, что в этой теме была настолько плохая информация!

Что мы рассмотрим в этом кратком туториале:

  • Создание проекта Vue
  • Создание приложения Heroku
  • Настройка проекта vue, чтобы Heroku мог обслуживать код VUE
  • Выгрузка и развертывание

1

Создание проекта Vue.js

Прежде всего, установите Vue.js. Нам также понадобится CLI Vue,
чтобы легко сгенерировать наш проект. (Не стесняйтесь использовать
для этих примеров менеджер зависимостей yarn вместо npm):

npm install --global vue-cli
vue init webpack YOUR-PROJECT-NAME-HERE
cd YOUR-PROJECT-NAME-HERE
npm install
npm run dev

Убедитесь, что открылось окно браузера и отображается стартовый проект.

2

Создаем приложение Heroku

Heroku — это платформа, позволяющая нам легко развертывать и размещать приложения Vue.js.
Если вы еще этого не сделали, тогда самое время создать учетную запись на сайте
Heroku.
Затем установите инструмент CLI Heroku с помощью инструкций
здесь.
И наконецто создаем приложение Heroku:

heroku create YOUR-PROJECT-NAME-HERE

Когда это будет сделано, вы получите новый URL-адрес для своего проекта, типа
https://YOUR-PROJECT-NAME-HERE.herokuapp.com.

Наконец, чтобы избежать установки в Heroku ненужных зависимостей разработки при развертывании,
давайте перейдем к настройке NODE_ENV:

heroku config:set NODE_ENV=production --app YOUR-PROJECT-NAME-HERE

3

Создайте server.js и соберите проект

Поскольку Vue является только интерфейсной библиотекой, самый простой способ захостить
ее, — создать простой сценарий Express,
который Heroku может использовать для запуска мини-веб-сервера.
Бегло прочитайте о Express,
если вы еще этого не сделали. После этого добавьте выражение:

npm install express --save

Теперь добавьте файл server.js в корневой каталог вашего проекта:

ВАЖНО: вы, вероятно, заметили, что он будет обслуживать каталог dist.
dist — это предопределенный каталог, который создает Vue.js,
который является сжатой, уменьшенной версией вашего сайта.
Мы соберем проект, а затем скажем Heroku запустить server.js, поэтому
Heroku захостит этот каталог dist:

npm run build
Теперь вы должны увидеть каталог dist.

Давайте проверим наш файл server.js, запустив его:

node server.js

Теперь перейдите на http://localhost:5000 и убедитесь,
что ваше приложение загружается.

Наконец, нам нужно будет отредактировать наш start скрипт в package.json,
чтобы запустить наш node сервер, так как Heroku автоматически ищет этот
скрипт при поиске приложения node.js.

4

Инициализация Git и добавление отдаленного репозитория

Heroku позволяет нам пушить в удаленный репозиторий,
поэтому нам сначала нужно создать собственный репозиторий git:

git init

Теперь добавим наш удаленный репозиторий Heroku:

heroku git:remote --app YOUR-PROJECT-NAME-HERE

Давайте сохраним наш сгенерированный каталог dist,
чтобы мы всегда могли сохранить первоначальную копию
того, что мы развернули в Heroku, удалив dist/ из .gitigore

.DS_Store
node_modules/
dist/  <--- REMOVE THIS LINE
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

Теперь, самое главное, давайте добавим и сделаем коммит наших файлов:

git add . && git commit -a -m "Adding files."

5

Выгрузка кода для развертывания

Теперь все, что нам нужно чтобы развернуть проект в Heroku, это:

git push heroku master

Это переместит наш код в удаленный репозиторий Heroku,
запустит команду start в package.json, которая будет работать
с нашим недавно созданным каталогом dist.

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

Если развертывание будет успешным, приложение будет доступным по URL-у вашего проекта
https://YOUR-PROJECT-NAME-HERE.herokuapp.com

Если есть какие то проблемы - пишите в комментариях, будем разбиратся! 🙂

Похожие публикации

Комментарии