我很難用 heroku 部署我的 node.js(TS)/angular 應用程式。
當我嘗試將它部署在 git 上時git push heroku master，每一步都很順利，直到最后一步heroku-postbuild。
因此，它回傳以下內容：
Generating browser application bundles (phase: setup)...
remote: An unhandled exception occurred: ENOENT: no such file or directory, lstat '/tmp/build_24879b07/front/node_modules'
remote: See "/tmp/ng-REYivA/angular-errors.log" for further details.
我的專案架構是...
Project
|
|-- api/...
|-- front/...
|-- package.json
|-- ...
...這可能會導致一些問題。
此外，這里是最有可能關注的檔案：
./package.json
{
"name": "mymusicads",
"scripts": {
"heroku-postbuild": "cd front && ng build --configuration production",
"start": "cd api && npm run start"
},
"engines": {
"node": "16.x",
"npm": "7.x"
},
"dependencies": {
"@angular-devkit/build-angular": "^12.2.12",
"@angular/cli": "^11.2.13",
"@angular/common": "^11.2.13",
"@angular/compiler": "^12.2.12",
"@angular/compiler-cli": "^11.2.13",
"@angular/core": "^11.2.13",
"@angular/platform-browser": "^11.2.13",
"rxjs": "^6.6.7",
"typescript": "^4.3.5"
}
}
./api/index.ts
import express, { Request, Response } from 'express';
import * as dotenv from 'dotenv';
import path from 'path';
import { adDataRoutes } from './app/routes/ad-data.route';
import { errorHandler } from './middleware/error.middleware';
import { notFoundHandler } from './middleware/not-found.middleware';
dotenv.config();
const app = express();
app.use(express.json());
app.use('/api/addata', adDataRoutes);
app.use(express.static(path.join(__dirname, 'mymusicads', 'dist', 'front')));
app.use(errorHandler);
app.use(notFoundHandler);
app.get('/', (req: Request, res: Response) => {
res.sendFile(path.join(__dirname, 'mymusicads', 'dist', 'front', 'index.html'));
});
app.listen(process.env.PORT || 3000, () => {
console.log(`Listening on port ${process.env.PORT || 3000}`);
});
./front/angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"front": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/front",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "3mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "10kb",
"maximumError": "20kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "front:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "front:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "front:build"
}
},
"test": { [...] },
"lint": { [...] }
}
}
}
},
"defaultProject": "front"
}
據我了解，問題來自我的api/index.ts檔案，我可能沒有使用res.sendFile(path.join(__dirname, 'mymusicads', 'dist', 'front', 'index.html')).
謝謝 ！
uj5u.com熱心網友回復：
不記得我是否遇到過同樣的問題，但有不同的設定。在front檔案夾中，我有一個專門用于 Angular 應用程式的 package.json - 基本上是默認的 Angular CLI 設定
頂級package.json幾乎沒有依賴項（如果有的話），主要是腳本（您使用前端的客戶端檔案夾）。對于預構建，npm install在客戶端檔案夾中運行，然后 npm run --prefix client build -- -- prod
對于服務器：
// Static files
app.use(
express.static(path.join(__dirname, '../client/dist/my-app'), {
maxAge: '1y',
})
);
// Angular app
app.get('*', (req, res) => {
res.sendFile(
path.join(__dirname, '../client/dist/my-app/index.html')
);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351679.html
上一篇：Django會話如何區分用戶？