當 express 服務器與代碼捆綁時，將 Vue 3 應用程序部署到 Heroku

Question

我的應用

我使用 Vue CLI 創建了 Vue3 應用程序，並使用https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr上的文檔添加了 SSR 支持。

express 服務器代碼使用環境變量“process.env.PORT”來確定在哪個端口上運行服務器。

const port = process.env.PORT ? process.env.PORT : 8080;
server.listen(port, () => {
  console.log(`Application is accesssible on : http://localhost:${port}`);
});

我有一個指定 PORT 的 .env 文件。

PORT=8080

我已經使用 vue.config.js 更改了應用程序，以便將 express server.js 捆綁在應用程序中。

構建后，我在 dist 文件夾中有以下內容

• client ：包含構建的客戶端代碼
• server ：在 serverBundle.js 中包含構建的服務器代碼

我使用運行應用程序

node dist/server/serverBundle.js

該應用程序在 GIT 上可用

https://github.com/se22as/vue3ssr-beer-sample-app-using-serverbundle

部署到 Heroku

我現在正在嘗試將此應用程序部署到 Heroku。 它構建但不運行，日志中的錯誤顯示

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

當應用程序在 Heroku 上構建時，我相信“process.env.PORT”沒有設置，因此“serverBundle.js”的端口值是“undefined”而不是實際值。

然后運行應用程序時，端口無效。

類似的應用程序我有相同的應用程序，編寫方式略有不同，因此 Express Server 未與服務器捆綁包捆綁在一起。 在這種情況下，Express Server 代碼沒有構建，因此它的 process.env.PORT 沒有被替換為“undefined”。 當應用程序在 Heroku 上運行時， process.env.PORT 有一個值，因此應用程序運行正常。

ISSUE如何使用 serverBundle 中內置的 Express Server 部署我的 Vue 應用程序，並使用 Heroku 指定的 PORT 在 Heroku 上部署

Answer 1

改變

const port = process.env.PORT ? process.env.PORT : 8080;

至

const port = process.env.PORT || 80;

然后從 .env 文件中刪除PORT=8080 。 Heroku 將自行動態設置端口，console.log 調用上的模板文字表達式將綁定到該動態端口並停止拋出錯誤。

（同時你怎么能有一個 .env 文件？我想 .env 配置是在 heroku 儀表板設置或通過heroku config:set命令設置的）