Heroku 似乎在构建客户端，但我没有看到 dist 文件夹

Posted 2023-03-07

【中文标题】Heroku 似乎在构建客户端，但我没有看到 dist 文件夹

【英文标题】：Heroku seems to build client but I see no dist folder

【发布时间】：2019-12-12 07:15:39

【问题描述】：

将我的 angular/node 应用程序推送到 heroku 时，当我查看日志时，它似乎构建成功。但我可以看到没有在角度侧创建 dist 文件夹。

我在本地构建了 Angular 客户端，以确保代码中没有错误。

我已将构建脚本从 - "postinstall": "ng build --prod"

正在抛出“找不到 environment.prod.ts 的路径”错误

"heroku-postbuild": "ng build --configuration=production"

不会引发错误但不会继续创建 dist 文件夹。所以我有点卡住了。

角度包.json

  "name": "client",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "node app.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --configuration=production"
  ,
  "private": true,
  "dependencies": 
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "typescript": "~3.2.2",
    "@angular/animations": "^7.2.8",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@vguleaev/angular-material-autocomplete": "0.0.10",
    "@w11k/ngx-componentdestroyed": "^4.1.4",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "rxjs-observable-store": "^1.0.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0"
  ,
  "engines": 
    "node": "10.0.0",
    "npm": "5.6.0"
  

节点包.json

  "name": "spotify-alias",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "engines": 
    "node": "10.0.0",
    "npm": "5.6.0"
  ,
  "dependencies": 
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.0",
    "@babel/preset-env": "^7.5.0",
    "axios": "^0.19.0",
    "concurrently": "^4.1.0",
    "cookie-session": "^1.3.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.14",
    "node-fetch": "^2.3.0",
    "passport": "^0.4.0",
    "passport-spotify": "^1.0.1"
  ,
  "devDependencies": 
    "nodemon": "^1.19.1"
  ,
  "scripts": 
    "start": "node app.js",
    "server": "nodemon --exec babel-node app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix client"
  ,
  "author": "",
  "license": "ISC"

app.js - 节点

if(process.env.NODE_ENV === 'production') 
    app.use(express.static('/client/dist/index.html'));

    const path = require('path');
    app.get('*', (req, res) => 
        res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
    );

我想要构建所有内容并创建 dist 文件夹。这是我的第一个节点应用程序，所以请多多包涵，可能有些事情看起来完全不对。

就像我不能 100% 确定解析路径的 app.js 代码一样。我确实知道 /client 是 Angular 内容的来源。

非常感谢任何帮助。

【问题讨论】：

您找到任何解决方案了吗？我被困在类似的位置

@ApurvaPathak 看看我的配置，我最终确实让它工作了。观察你的客户端 dist 文件夹的路径，让 heroku cmds 正确，你应该没问题。 https://github.com/godhar/spotify-alias/blob/master/server/package.json

是的，我也想通了。问题出在 package.json 文件中。开始的价值：heroku 错了。顺便谢谢

@ApurvaPathak 很高兴听到这个消息！

【参考方案1】：

您没有构建脚本。我看到你正在使用 Babel。因此，您需要告诉 Babel 为您运行构建；它最终提供了 dist 文件夹（尽管可以是任何名称）。

"build": "babel src --out-dir dist --copy-files",

【讨论】：

Babel 与 Angular 客户端无关。节点也没有构建步骤。 @parkerthegeniuschild

【参考方案2】：

请按照博客在 heroku 上部署 Angular 应用程序

https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

【讨论】：

这是我遵循的教程。您可以看到我采取的步骤映射教程中的步骤。