Сегодня у меня был ужасный день, когда я пытался развернуть свое приложение Vue.js на Heroku. Попробовав несколько «известных» методов, которые были в статьях и документах, я, наконец, смог развернуть его! (Хотя с моей стороны есть некоторые настройки 😏). Итак, давайте посмотрим, как я это сделал.

Psst: я предполагаю, что у вас уже есть приложение VueJS и создано приложение Heroku либо через интерфейс командной строки, либо через панель инструментов heroku. Не знаете, как это сделать? Ознакомьтесь с этими ресурсами



Создание проекта | Vue CLI
🛠️ Стандартный инструментарий для разработки на Vue.js cli.vuejs.org





Создание приложений из интерфейса командной строки | Heroku Dev Center
Создавайте приложения с помощью Heroku CLI. Вы можете выбрать имя для приложения, а также регион при создании… devcenter.heroku.com



Также стоит отметить, что мой исходный код развертывался на Heroku через Github.

С учетом всего сказанного и снятого с моей груди, давайте приступим к развертыванию, ладно? 😀

Начиная

Установите в свой проект следующие зависимости:

  • Экспресс (старый добрый экспресс)
  • Serve-Static (Подробнее о зависимости здесь)

Этого можно добиться, запустив:

npm install express serve-static --save

Примечание. В моем случае я обнаружил, что установка Express и serve-static в качестве зависимостей вместо зависимостей разработки работает.

Server.js

Создайте файл server.js в корне вашего проекта и добавьте к нему следующее:

const express = require('express');
const serveStatic = require("serve-static");
const path = require('path');
const app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 80;
app.listen(port);

Итак, приведенный выше код создает сервер NodeJS через Express и обслуживает содержимое в папке dist (которая является вашей производственной сборкой после запуска npm run build). Поэтому, когда кто-то посещает ваше приложение Heroku, будет показан dist / index.html!

Примечание. Бит process.env.PORT очень важен, потому что он понадобится Heroku при назначении порта для вашего приложения, так что не следует жестко его кодировать? 😉

Package.json

В package.json добавьте следующее в раздел скрипты:

"postinstall": "if test \"$NODE_ENV\" = \"production\" ; then npm run build ; fi ",
"start": "node server.js",

Обе строки кода, приведенные выше, называются сценариями NPM, и вкратце суть такова:

  • postinstall запускается после того, как NPM установит зависимости проекта.
  • start будет использоваться для запуска сервера, который мы создали некоторое время назад с помощью Express.

Итак, вместе сценарии NPM сообщают Heroku: «Привет, чувак, не мог бы ты создать мое приложение Vue, когда NODE_ENV настроен на производство, а затем будь хорошим парнем и запусти мой экспресс-сервер, чтобы мое приложение стало живым для всего мира! ” 😆

Примечание. Heroku получит значение NODE_ENV из переменных конфигурации, которые вы зададите на панели инструментов своего приложения в разделе настройки ›config vars. Просто добавьте NODE_ENV в качестве ключа и Производство в качестве значения.

Заключение

После того, как все это будет сделано, нажмите на Github и разверните приложение Heroku (вручную или автоматически - кто угодно.

Вы должны увидеть свое приложение при посещении URL-адреса приложения Heroku.

Вот как я это сделал, и я надеюсь, что это поможет и вам, когда в этом возникнет необходимость.

Удачного развертывания!