Heroku требует, чтобы вы настроили сервер приложений (HTTP-сервер) для обслуживания статических файлов.weekly-todo-vue этого не делает.
Я могу предложить 3 решения: добавить веб-сервер и изменить процесс сборки, извлечь сборку приложения и развернуть его отдельно с сервером, использовать webpack-dev-serverв качестве сервера на Heroku.
Добавьте сервер и настройте процесс сборки
Переместите сборку в postinstall script
// package.json
scripts: {
// omited ...
"postinstall": "yarn run build",
// omitted...
},
Изменить сценарий start npm
// package.json
scripts: {
// omited ...
"start": "node server.js",
// omitted...
},
Некоторые пакеты следует переместить из devDependencies в зависимостей , поскольку мы собираемся создать приложение на Heroku, и Heroku сделала это впроизводственная среда.Это довольно утомительно, поэтому вы можете переместить devDependencies в зависимости.Но это добавит ненужные депы.в вашу сборку.
Установите зависимость Express.JS:
$ yarn add express
В корне репозитория создайте файл server.js с кодом сервера приложений, который будет обслуживать статические файлы приложения:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
Передайте все изменения и отправьте их в Heroku
$ git push heroku master
Извлеките сборку
Создайте сборку из репозитория:
$ yarn run build
СоздатьНовый репозиторий и скопируйте каталог dist.Не забудьте добавить node_modules/ в .gitignore.
Init new package.json:
$ npm init -y
Добавить скрипт запуска npm;
// package.json
scripts: {
"start": "node server.js",
// omitted...
},
Установить ExpressЗависимость .JS:
$ yarn add express
В корне репозитория создайте файл server.js с кодом сервера приложений, который будет обслуживать статические файлы приложения, на том же сервере, что и в предыдущем решении:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
У вас должна быть такая структура проекта:
.
├── dist
│ ├── index.html
│ └── static
│ ├── css
│ │ ├── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css
│ │ └── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css.map
│ ├── fonts
│ │ ├── icons.674f50d.eot
│ │ ├── icons.af7ae50.woff2
│ │ ├── icons.b06871f.ttf
│ │ └── icons.fee66e7.woff
│ ├── img
│ │ ├── flags.9c74e17.png
│ │ └── icons.912ec66.svg
│ └── js
│ ├── app.88670f817a4b11e940e6.js
│ ├── app.88670f817a4b11e940e6.js.map
│ ├── manifest.304e67c5c14ed63ee160.js
│ ├── manifest.304e67c5c14ed63ee160.js.map
│ ├── vendor.434b5723496264d2da17.js
│ └── vendor.434b5723496264d2da17.js.mapo
├── package-lock.json
├── package.json
└── server.js
Зафиксируйте код и отправьте его в Heroku.
Используйте webpack-dev-server
Как указано здесь вы можете использовать webpack-dev-server для обслуживания вашего приложения.Но это настоятельно не рекомендуется для производственных приложений.
Добавить конфигурацию сервера разработки webpack в webpack.prod.conf.js:
// ..omitted
devtool: config.build.productionSourceMap ? config.build.devtool : false,
+ devServer: {
+ disableHostCheck: true,
+ clientLogLevel: 'warning',
+ historyApiFallback: true,
+ hot: false,
+ host: '0.0.0.0',
+ port: process.env.PORT || config.dev.port,
+ open: false,
+ overlay: false,
+ publicPath: config.dev.assetsPublicPath,
+ proxy: config.dev.proxyTable,
+ quiet: true // necessary for FriendlyErrorsPlugin
+ },
output: {
// ..omitted
Изменить сценарий запуска npm:
// package.json
scripts: {
// omited ...
"start": "webpack-dev-server --port $PORT --host 0.0.0.0 --config build/webpack.prod.conf.js",
// omitted...
},
Некоторые пакеты следует переместить из devDependencies в зависимостей , поскольку мы собираемся создать приложение на Heroku, а Heroku делала это в производственной среде.Это довольно утомительно, поэтому вы можете переместить devDependencies в зависимости.Но это добавит ненужные депы.в вашу сборку.
Передайте изменения и отправьте их в Heroku.
Проблема версии узла / npm с Heroku
Heroku любит строгие спецификации движка в package.json.Я бы порекомендовал вам указать явные версии Node.JS и NPM:
"engines": {
- "node": ">= 8.0.0",
- "npm": ">= 5.0.0"
+ "node": "8.11.4",
+ "npm": "5.6.0"
},