如何使用Vite部署到Heroku

lf5gs5x2 于 2022-11-13 发布在其他

关注(0)|答案(3)|浏览(193)

任何帮助都将不胜感激。
我一整天都在尝试部署到Heroku。我在本地使用Vite进行开发，所以我想我也可以尝试用它来部署。所有东西都在本地工作（当然），当我部署存储库时，构建是成功的。但是，当我尝试查看我的应用时，我得到了以下信息：

2021-10-05T02:12:13.493958+00:00 heroku[web.1]: Starting process with command `npm start`
2021-10-05T02:12:14.624236+00:00 app[web.1]: [heroku-exec] Starting
2021-10-05T02:12:14.834583+00:00 app[web.1]: 
2021-10-05T02:12:14.834585+00:00 app[web.1]: > dashboard-frontend@0.0.0 start /app
2021-10-05T02:12:14.834585+00:00 app[web.1]: > vite
2021-10-05T02:12:14.834585+00:00 app[web.1]: 
2021-10-05T02:12:15.759365+00:00 app[web.1]: Pre-bundling dependencies:
2021-10-05T02:12:15.759384+00:00 app[web.1]:   vue
2021-10-05T02:12:15.759384+00:00 app[web.1]:   vue-chart-3
2021-10-05T02:12:15.759385+00:00 app[web.1]:   axios
2021-10-05T02:12:15.759389+00:00 app[web.1]: (this will be run only when your dependencies or config have changed)
2021-10-05T02:12:16.402419+00:00 app[web.1]: 
2021-10-05T02:12:16.402429+00:00 app[web.1]:   vite v2.5.5 dev server running at:
2021-10-05T02:12:16.402429+00:00 app[web.1]: 
2021-10-05T02:12:16.402543+00:00 app[web.1]:   > Local: http://localhost:3000/
2021-10-05T02:12:16.402578+00:00 app[web.1]:   > Network: use `--host` to expose
2021-10-05T02:12:16.402610+00:00 app[web.1]: 
2021-10-05T02:12:16.402611+00:00 app[web.1]:   ready in 1529ms.
2021-10-05T02:12:16.402611+00:00 app[web.1]: 
2021-10-05T02:12:16.000000+00:00 app[api]: Build succeeded
2021-10-05T02:13:14.120863+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-10-05T02:13:14.233876+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-10-05T02:13:14.376928+00:00 heroku[web.1]: Process exited with status 137
2021-10-05T02:13:14.423585+00:00 heroku[web.1]: State changed from starting to crashed
2021-10-05T02:13:15.030060+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=indicatorsdashboardfrontend.herokuapp.com request_id=c9ad1cae-2b32-4e54-bab1-7919401af71c fwd="98.209.145.237" dyno= connect= service= status=503 bytes= protocol=https

我在这里读到一个帖子，说我需要设置一些变量，以便Vite可以正确安装，我相信我做到了：

NPM_CONFIG_PRODUCTION=false
       NPM_CONFIG_LOGLEVEL=error
       YARN_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true

我的存储库可以在这里找到：https://github.com/kddove85/IndicatorDashboardFrontend
我认为重要的文件是package.json，但我不确定。

{
  "name": "dashboard-frontend",
  "version": "0.0.0",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@vue/cli": "^4.5.13",
    "axios": "^0.21.4",
    "chart.js": "^2.9.4",
    "lodash": "^4.17.21",
    "vue": "^3.2.6",
    "vue-axios": "^3.3.6",
    "vue-chart-3": "^0.5.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.2.6",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^7.18.0",
    "vite": "^2.5.4"
  },
  "engines": {
    "node": "14.17.5",
    "npm": "6.14.14"
  }
}

我只是不知道我做错了什么。

heroku

来源：https://stackoverflow.com/questions/69444225/how-do-i-deploy-to-heroku-using-vite

3条答案

按热度按时间

njthzxwz1#

我发现了这个帖子，也在为这个问题而挣扎。对于那些来到这里却无法弄清楚的人，这是我发现的，也是对我有效的。
如果你只有一个vite项目，你应该把它部署为一个静态站点。在Vite网站上有一些文档。基本上，它归结为确保你有正确的构建包（至少我的问题归结为这一点）。
首先，确定网站的托管方式。您是依赖heroku来构建您的dist文件夹，还是在推送分支之前构建dist文件夹？如果您不依赖heroku来构建您的网站，您可以从第2步沿着。
如果你想让heroku在提供服务之前构建你的网站，你应该把heroku/nodejs buildpack设置为第一个buildpack。
1.您可以通过运行以下cli命令来执行此操作：

heroku buildpacks:set heroku/nodejs -a <your-app-name>

这将删除以前设置的任何构建包，并将heroku/nodejs构建包设置为要运行的唯一构建包。
1.然后，您需要确保应用构建完成后，它会将您的dist文件夹作为静态站点托管。

heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git -a <your-app-name>

这将确保您的应用程序被视为静态页面，而不是 NodeJS 应用程序。
1.您需要在应用中设置一些配置以确保构建包使用正确的文件。为此，请在Vite项目的根目录下添加一个名为static.json的文件。在其中放入以下json：

{
  "root": "./dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

1.把你的代码推到你喜欢的平台上，并确保你的heroku应用程序部署了它。我在Github上有我的项目，并从正确的分支设置了自动部署。

其他要点

还有几点可能会让人感兴趣。

我的heroku应用程序有一个NODE_ENV=production环境变量集
我不需要添加任何脚本。作为参考，我的package.json脚本如下所示：

{
  ...
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  ...
}

赞(0）回复(0）举报 2022-11-13

hs1ihplo2#

尝试将--port $PORT添加到启动脚本中。它应该如下所示：
"start": "vite --port $PORT"个
我也面临着同样的问题，这对我很有效。
这个stackoverflow answer帮我想通了。
我希望它对你有用。

赞(0）回复(0）举报 2022-11-13

gcxthw6b3#

在我的情况下，我试图部署我的vite应用程序。
1.我必须确保端口是从环境变量中获取的
1.主机被设置为0.0.0.0而不是localhost

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview --host 0.0.0.0 --port $PORT" // For production
  },

赞(0）回复(0）举报 2022-11-13

我来回答

如何使用Vite部署到Heroku

3条答案

其他要点

相关问题

热门标签

最新问答