小贝子编程

如何使用 Vite 部署到 Heroku



任何和所有的帮助将不胜感激。

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

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

2023 年 3 月更新

我参加聚会有点晚了，但我也必须更新构建过程。我尝试了很多东西，但这就是我所做的，ymmv。

首先，我真的很喜欢@Metehan的简单性(使用vercel的服务包)。因为它带走了学习nginx或w/e。但是，我无法让它起作用。我的最终解决方案与 @Gerald H 相同。

总结：

  1. 删除旧的构建包
heroku buildpacks:remove https://github.com/heroku/heroku-buildpack-static.git -a <your-app-name>
  1. 添加 nginx 构建包
heroku buildpacks:add heroku-community/nginx -a <your-app-name>
  1. 如果项目的根目录中还没有static.json文件，请添加该文件并粘贴以下内容
{
"root": "./dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
  1. 如果项目的根目录中还没有 Procfile，请添加它。如果这样做，请更新它以包含以下内容。这样可以确保nginx启动您的应用程序。
web: bin/start-nginx-solo
  1. NGINX将为您创建一个配置文件，您可以在启动的应用程序中找到该文件。您可以通过转到您的项目(heroku run bash -a <your-app-name>)找到它。到达那里后，键入cd config && cat nginx.conf.erb.这将打印出生成的配置。对我来说，这种配置并不完全正确，但这是一个好的开始。复制配置并返回到代码。创建一个文件夹config并添加一个名为nginx.conf.erb的文件，并粘贴到您复制的配置中。在代码库中创建此文件可确保每次都不会自动生成配置。
  2. 我必须更改的主要内容是服务器内容。我更改了添加的一行：root /app/dist，并更新了位置设置，如下所示：
location = /index.html {
add_header Cache-Control "no-store, no-cache";
try_files $uri $uri/ =404;
}
location / {
add_header 'Cache-Control' "public, max-age=3600";
try_files $uri $uri/ /index.html;
}

注意：正如杰拉尔德也提到的，一定要删除任何提及mruby。这些不是为我准备的，但请务必检查。

  1. 您现在可以删除static.json文件，不再需要它。

供参考：

我的nginx.conf.erb现在看起来像这样：

daemon off;
# Heroku dynos have at least 4 cores.
worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;
events {
use epoll;
accept_mutex on;
worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
}
http {
gzip on;
gzip_comp_level 2;
gzip_min_length 512;
gzip_proxied any; # Heroku router sends Via header
server_tokens off;
log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
access_log <%= ENV['NGINX_ACCESS_LOG_PATH'] || 'logs/nginx/access.log' %> l2met;
error_log <%= ENV['NGINX_ERROR_LOG_PATH'] || 'logs/nginx/error.log' %>;
include mime.types;
default_type application/octet-stream;
sendfile on;
# Must read the body in 5 seconds.
client_body_timeout 5;
upstream app_server {
server unix:/tmp/nginx.socket fail_timeout=0;
}
server {
listen <%= ENV["PORT"] %>;
server_name _;
keepalive_timeout 5;
root /app/dist;
location = /index.html {
add_header Cache-Control "no-store, no-cache";
try_files $uri $uri/ =404;
}
location / {
add_header 'Cache-Control' "public, max-age=3600";
try_files $uri $uri/ /index.html;
}
}
}

使用 buildpack-static (旧) 的解决方案

我找到了这个线程，也在为这个问题而苦苦挣扎。对于那些来到这里但无法弄清楚的人，这就是我的发现和对我有用的东西。

如果您只有一个 vite 项目，则应将其部署为静态站点。Vite 网站上有一些文档。基本上，它归结为确保您拥有正确的构建包(至少我的问题归结为这一点)。

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

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

  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>

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

  1. 您需要在应用中设置一些配置，以确保构建包采用正确的文件。为此，请将一个名为static.json的 Vite 项目的根目录添加。将以下 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"
},
...
}

我尝试使用 Robin G 的解决方案，但该构建包的折旧处于严重水平，并导致 Heroku 22(当前版本)出错。

heroku/heroku-buildpack-static 的自述文件告诉我们迁移到 heroku/heroku-buildpack-nginx，但迁移指南依赖于之前要运行buildpack-static。因为我什至无法运行它，所以我无法使用该迁移指南。

然后我尝试直接与buildpack-nginx一起设置项目，但遇到了我无法解决的问题。即使我已经经历了将config/nginx.conf.erb文件夹中的路径配置为location /dist/的痛苦dist，它也没有用。部署成功，但我在访问该页面时遇到经典错误。

所以我决定摆脱依赖 Heroku 的静态服务选项，并从 Vercel 安装了 npm 包serve。然后我添加了一个启动脚本，如下所示：

"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"start": "serve dist"
},

而且固定！删除除 Node 以外的任何其他构建包并进行部署。它运行没有问题。

最近我也遇到了同样的问题，虽然 Robin G 的帖子很好，但它没有更新。这就是我为解决问题所做的。我正在使用 vite + React 顺便说一句。

根据heroku-buildpack-static的 Github 存储库，构建包已被销毁，我们需要切换到构建包heroku-community/nginx。

# use this command in terminal to add new buildpack
heroku buildpacks:add heroku-community/nginx

我们还需要在应用根目录中创建一个static.json来生成 NGINX 配置文件。以下是我的static.json示例。

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

在应用根目录中创建一个Procfile，指示部署时要运行的命令。以下是我的Procfile.

web: bin/start-nginx-solo

然后部署您的应用程序并转到您的 Heroku 应用程序的外壳。

heroku run bash

在外壳内时，cd ./config，您应该能够看到文件调用nginx.conf.erb。复制内容，然后将其创建并粘贴到应用程序根目录中./config/nginx.conf.erb。请记住删除任何提及mruby的内容。以下是我nginx.conf.erb一些更改后的。

daemon off;
worker_processes auto;
events {
use epoll;
accept_mutex on;
worker_connections 512;
}
http {
gzip on;
gzip_comp_level 2;
gzip_min_length 512;
gzip_proxied any; # Heroku router sends Via header
server_tokens off;
log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
access_log logs/access.log;
error_log stderr error;
include mime.types;
default_type application/octet-stream;
sendfile on;
# Must read the body in 5 seconds.
client_body_timeout 5;
upstream app_server {
server unix:/tmp/nginx.socket fail_timeout=0;
}
server {
listen <%= ENV["PORT"] %>;
server_name _;
keepalive_timeout 5;
root /app/dist;
location = /index.html {
add_header Cache-Control "no-store, no-cache";
add_header Strict-Transport-Security "max-age=31536002;";
try_files $uri $uri/ =404;
}
location / {
add_header 'Cache-Control' "public, max-age=3600";
try_files $uri $uri/ /index.html;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header Host $http_host;
# proxy_redirect off;
# proxy_pass http://app_server;
}
}
}

粘贴后，提交代码并尝试再次部署它！这次应该可以了。希望这能够帮助您解决将 vite 部署到 heroku 的问题。

注意

请记住，Heroku 默认应用程序目录是/app而不是/。

参考

  • https://github.com/heroku/heroku-buildpack-static/issues/245
  • https://medium.com/@geralddevelop/deploying-static-site-on-heroku-df3162718c70

就我而言，我正在尝试部署我的 vite 应用程序。

  1. 我必须确保端口取自环境变量
  2. 主机设置为0.0.0.0而不是localhost
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview --host 0.0.0.0 --port $PORT" // For production
},

<</div> div class="one_answers">尝试将--port $PORT添加到启动脚本中。它应该看起来像这样：

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

我面临着同样的问题，这就是对我有用的。

这个堆栈溢出答案帮助我弄清楚了。

我希望它对你有用。

这个 https://harrylaou.com/js-ts/vite-heroku/帮助我弄清楚了，因为 heroku-buildpack-static 已被弃用并且不适用于最新的 heroku 堆栈

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium