如何使用 Vite 部署到 Heroku

Question

如何使用 Vite 部署到 Heroku

Kyl*_*ove 6 deployment heroku node.js vite

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

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

Run Code Online (Sandbox Code Playgroud)

我在这里读到一篇文章，说我需要设置一些变量，以便 Vite 能够正确安装，我相信我做到了：

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

Run Code Online (Sandbox Code Playgroud)

我的存储库可以在这里找到：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"
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Rob*_*n G 26

2023 年 3 月更新

我来晚了一点，但我还必须更新构建过程。我尝试了很多事情，但这就是我所做的，ymmv。

其一，我真的很喜欢@Metehan 的简单性（使用 vercel 的服务包）。因为它不需要学习 nginx 或 w/e。但是，我无法让它发挥作用。我的最终解决方案与@Gerald H相同。

总结：

删除旧的构建包

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

Run Code Online (Sandbox Code Playgroud)

添加 nginx 构建包

heroku buildpacks:add heroku-community/nginx -a <your-app-name>

Run Code Online (Sandbox Code Playgroud)

如果您的项目根目录中还没有static.json文件，请添加该文件并粘贴以下内容

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

Run Code Online (Sandbox Code Playgroud)

如果您的项目根目录中还没有 Procfile，请添加它。如果这样做，请更新它以包含以下内容。这可以确保 nginx 启动您的应用程序。

web: bin/start-nginx-solo

Run Code Online (Sandbox Code Playgroud)

NGINX 将为您创建一个配置文件，您可以在启动的应用程序中找到该文件。您可以通过转到您的项目 ( heroku run bash -a <your-app-name>) 来找到它。到达那里后，输入cd config && cat nginx.conf.erb. 这将打印出生成的配置。对我来说，这个配置并不完全正确，但这是一个好的开始。复制配置并返回到您的代码。创建一个文件夹config并添加一个名为的文件nginx.conf.erb并将其粘贴到您复制的配置中。在代码库中创建此文件可确保配置不会每次都自动生成。
我必须更改的主要内容是服务器内容。我更改了添加一行：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;
}

Run Code Online (Sandbox Code Playgroud)

注意：正如杰拉尔德也提到的那样，请确保删除任何提及mruby. 这些不适合我，但请务必检查一下。

您现在可以删除您的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;
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

使用 buildpack-static（旧）的解决方案

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

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

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

这将删除任何先前设置的构建包，并将该heroku/nodejs构建包设置为唯一要运行的构建包。

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

web: bin/start-nginx-solo

Run Code Online (Sandbox Code Playgroud)

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

其他要点

其他一些可能有趣的点。

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

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

Run Code Online (Sandbox Code Playgroud)

这个策略效果很好，但我收到了一条关于静态构建包被替换为带有 ERB 配置文件的 nginx 构建包的弃用消息。https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nginx 另外，它没有正确构建我的顺风车。YMMV。 (3认同)

Answer 2

Met*_*kin 5

我尝试使用Robin G的解决方案，但该 buildpack 的折旧程度非常严重，并导致 Heroku 22（当前版本）出现错误。

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

然后我尝试直接设置项目buildpack-nginx，但是遇到了我无法解决的问题。dist尽管我已经经历了在config/nginx.conf.erbas中配置文件夹路径的痛苦location /dist/，但它不起作用。部署成功，但我在访问该页面时遇到了经典错误。

因此，我决定不再依赖 Heroku 的静态服务选项，而是安装了serveVercel 的 npm 包。然后我添加了一个启动脚本，如下所示：

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 3

Ray*_*Ray 1

尝试添加 --port $PORT到您的启动脚本中。它应该看起来像这样：

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

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

这个stackoverflow 答案帮助我弄清楚了。

我希望这个对你有用。

归档时间：	4 年前
查看次数：	13830 次
最近记录：	1 年，9 月前