Ошибка приложения развертывания Vuejs Heroku
Не удалось найти эту проблему с поиском. Я пытался развернуть приложение vue.js/node.js/Snipcart с помощью heroku, но получало ошибку приложения. Ниже приведены журналы консоли. Я не совсем уверен, что происходит. У меня не было проблем с локальным запуском приложения на http://localhost:8080/. Спасибо за ваше время!
2018-08-11T07:07:44.802032+00:00 app[api]: Initial release by user dan@gmail.com
2018-08-11T07:07:44.802032+00:00 app[api]: Release v1 created by user dan@gmail.com
2018-08-11T07:07:45.115146+00:00 app[api]: Enable Logplex by user dan@gmail.com
2018-08-11T07:07:45.115146+00:00 app[api]: Release v2 created by user dan@gmail.com
2018-08-11T07:08:38.000000+00:00 app[api]: Build started by user dan@gmail.com
2018-08-11T07:09:04.343597+00:00 app[api]: Deploy d0dc068e by user dan@gmail.com
2018-08-11T07:09:04.343597+00:00 app[api]: Release v3 created by user dan@gmail.com
2018-08-11T07:09:04.364525+00:00 app[api]: Scaled to web@1:Free by user dan@gmail.com
2018-08-11T07:09:07.000000+00:00 app[api]: Build succeeded
2018-08-11T07:09:08.483855+00:00 heroku[web.1]: Starting process with command `npm start`
2018-08-11T07:09:10.294446+00:00 app[web.1]: npm ERR! missing script: start
2018-08-11T07:09:10.302269+00:00 app[web.1]:
2018-08-11T07:09:10.302466+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-08-11T07:09:10.302627+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-08-11T07_09_10_296Z-debug.log
2018-08-11T07:09:10.353951+00:00 heroku[web.1]: Process exited with status 1
2018-08-11T07:09:10.472803+00:00 heroku[web.1]: State changed from starting to crashed
2018-08-11T07:09:10.475796+00:00 heroku[web.1]: State changed from crashed to starting
2018-08-11T07:09:14.554504+00:00 heroku[web.1]: Starting process with command `npm start`
2018-08-11T07:09:16.939135+00:00 app[web.1]: npm ERR! missing script: start
2018-08-11T07:09:16.944995+00:00 app[web.1]:
2018-08-11T07:09:16.945175+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-08-11T07:09:16.945260+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-08-11T07_09_16_940Z-debug.log
2018-08-11T07:09:17.037163+00:00 heroku[web.1]: State changed from starting to crashed
2018-08-11T07:09:17.013310+00:00 heroku[web.1]: Process exited with status 1
2018-08-11T07:09:22.111996+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=protected-inlet-82689.herokuapp.com request_id=7197fb1e-7a43-4b08-ab4b-0be1fc41df8e fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
2018-08-11T07:09:20.398260+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=protected-inlet-82689.herokuapp.com request_id=e1e711ff-e06c-4fab-a107-8cfe1f4bdea5 fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
2018-08-11T07:09:33.653501+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=protected-inlet-82689.herokuapp.com request_id=609f4e2f-d48c-4dfb-bdf0-d9467076ee56 fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
2018-08-11T07:09:35.360365+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=protected-inlet-82689.herokuapp.com request_id=c8066642-72a4-40f9-9bb9-d3f570306fd8 fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font -->
<!-- Snipcart CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="Y2Q3MmNiOWQtZDczMS00OWYxLThlOWQtODMzNmUzYzc3MjkyNjM2Njc5OTIyOTkxMTg5MjEw" id="snipcart"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />
<title>oceancloud</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div id="app">
<landing-page></landing-page>
</div>
</template>
<script>
import LandingPage from './components/LandingPage.vue';
export default {
name: 'app',
components:{
'landing-page':LandingPage
}
}
</script>
<style>
</style>
LandingPage.vue
<template>
<div id='landing-page'>
<header>
<nav class="navbar navbar-expand-lg navbar-light shadow" style="background-color: #d7ccc8;">
<a id="" class="navbar-brand">Honeymask</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a id="navText" class="nav-item nav-link align-self-right" href="#">Features</a>
<a id="navText" class="nav-item nav-link" href="#">About</a>
<a id="navText" class="nav-item nav-link" href="#">Find Us</a>
</div>
</div>
</nav>
<div class="fullPage attachBackground">
<div class="overlay d-flex justify-content-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="py-5"></div>
<p class="pt-5">
Harvested from the praries of northern Alberta. <br/>
Lorem ipsum dolor sit amet, consectetur, <br/>
sed do eiusmod tempor incididunt.
</p>
</div>
</div>
<div class="row pt-2 pb-5 mb-5">
<div class="col-md-1">
<button class="btn btn-warning shadow snipcart-add-item"
data-item-id="1"
data-item-name="Honeymask"
data-item-price="15.00"
data-item-weight="350"
data-item-url="/"
data-item-description="Fresh honey face mask">
Buy Now
</button>
</div>
<div class="col-md-2">
</div>
<div class="col-md-8 py-5 mb-5">
</div>
</div>
<div class="row pb-5">
<a class="scroll-down shadow" address="true"></a>
</div>
</div>
</div>
</div>
</header>
<main></main>
<footer></footer>
</div>
</template>
1 ответ
Это происходит потому, что heruko не может развернуть ваш проект самостоятельно, для этого ему нужен сервер, поэтому я предлагаю вам добавить сервер. В этом случае я покажу вам, как его правильно настроить: сначала вам нужно создать
.jsфайл в каталоге проекта, где находится package.json, назовите его
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 || 8080
app.listen(port)
после этого перейти к
package.jsonфайл и добавьте эту строку в
scripts:
"start":"node server.js"
это должно решить вашу проблему