如何使用 Vite 部署到 Heroku

Question

我们将不胜感激。

我整天都在尝试部署到 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"
  }
}

我只是不确定我做错了什么。

Answer 1

我找到了这个帖子，并且也在努力解决这个问题。对于那些来这里但无法弄清楚的人，这就是我发现的，对我有用的。

如果你只有一个 vite 项目，你应该把它部署为一个静态站点。 Vite website 上有一些文档。基本上，它归结为确保您拥有正确的构建包（至少我的问题归结为这一点）。

首先，确定您的网站将如何托管。您是依靠 heroku 来构建您的 dist 文件夹，还是在推送分支之前这样做？如果您不依赖 heroku 来构建您的网站，则可以从第 2 步开始。

如果您希望 heroku 在提供网站之前构建您的网站，您应该将 heroku/nodejs buildpack 设置为第一个 buildpack。

1. 您可以通过运行以下 cli 命令来执行此操作：

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

这将删除任何以前设置的 buildpack 并将 heroku/nodejs buildpack 设置为唯一要运行的 buildpack。

1. 然后，您需要确保在构建应用程序后，它将您的dist 文件夹作为静态站点托管。您可以通过添加第二个 buildpack 来做到这一点：

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

这将确保您的应用程序被视为静态页面而不是节点 js 应用程序。

1. 您需要在应用程序中设置一些配置，以确保构建包采用正确的文件。为此，在您的 Vite 项目的根目录中添加一个名为 static.json 的文件。将以下 json 放在那里：

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

4. 将您的代码推送到您的首选平台，并确保您的 heroku 应用程序部署它。我在 Github 上有我的项目，并从正确的分支设置了自动部署。

---

其他要点

其他一些可能感兴趣的点。

• 我的 heroku 应用设置了 NODE_ENV=production 环境变量
• 我不需要添加任何脚本。作为参考，这是我的package.json 脚本的样子：

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

Answer 2

尝试将--port $PORT 添加到您的启动脚本中。它应该是这样的：

"start": "vite --port $PORT"

我遇到了同样的问题，这对我有用。

这个stackoverflow answer 帮我弄明白了。

我希望它对你有用。