angularjs - Azure Web应用程序返回404(未找到)

Question

我编写了一个 Angular 应用程序，然后添加了一个 Node.js 服务器文件以包含基本的服务器端。

在我的本地文件夹中，应用程序可以运行 - 服务器返回 index.html 文件并让 Angular 从那里接管。

我的问题是尝试部署到 azure:我创建了一个应用程序服务并使用 git 提交所有文件。当我尝试访问该网站时，我收到一条“未找到”消息。

以下是所有相关详细信息:

git 推送输出:

$ git push azure master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 290 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: ........................................
remote: Updating submodules.
remote: Preparing deployment for commit id '078f9ff036'.
remote: Generating deployment script.
remote: Running deployment command...
remote: Handling node.js deployment.
remote: .............................
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Copying file: 'server.js'
remote: Using start-up script server.js from package.json.
remote: Generated web.config.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8
remote: ..
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://soundofsilence.scm.azurewebsites.net:443/soundOfSilence.git
   9b261b6..078f9ff  master -> master

服务器日志:

Error: ENOENT: no such file or directory, stat 'D:\home\site\wwwroot\dist\index.html' at Error (native)

我的 server.js 代码:

console.log('Server running');

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

// Get our API routes
const api = require('./src/server/routes/api');

const app = express();
var cors = require('cors');
app.use(cors());
//bring in model
let Report = require('./src/server/models/selfReport');

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Point static path to dist
app.use(express.static(path.join(__dirname, '../dist')));
// app.use(express.static(static_dir));
// Set our api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../dist/index.html'));
});



app.post('/add', function (req, res) {
    console.log('submmiting report');
    console.log(req.body);
    res.end("Good");
    return;
})

/**
 * Get port from environment and store in Express.
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

我的packages.json 文件:

{
  "name": "sound-of-silence-app",
  "version": "0.0.0",
  "license": "MIT",
  "main": "app.js",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.5",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-timer": "^1.3.5",
    "angular2-focus": "^1.1.0",
    "body-parser": "^1.17.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "cors": "^2.8.3",
    "express": "^4.15.3",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.10.8",
    "ngx-bootstrap": "^1.6.6",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

和我的文件结构:

如果有任何帮助，我将不胜感激

Answer 1

从上次捕获来看，您的 dist 文件夹似乎位于项目的根目录中。

请将您的代码片段修改为:

...
app.use(express.static(path.join(__dirname, './dist')));
...
app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, './dist/index.html'));
});
...

由于主脚本server.js与dist文件夹位于同一路径，因此../会查找到父目录。

另外，请仔细检查 dist 文件夹及其中的文件是否已成功部署到 Azure Web Apps。

如果dist文件夹中的文件被编译或生成，我们需要通过 Custom Deployment Script 配置一些额外的步骤.

希望对您有帮助，如有任何疑问，请随时告诉我。