Прокси-маршрутизация в приложении Angular, развернутом в Heroku

Question

У меня есть приложение Angular, которое взаимодействует со службой REST.

Когда я запускаю приложение Angular локально с помощью интерфейса командной строки, он правильно передает все запросы /api в службу REST.Когда я пытаюсь собрать приложение и запустить его через server.js (чтобы я мог развернуть приложение на Heroku), я теряю маршрутизацию прокси.

Служба REST развернута на Heroku и работает нормально.

Я запускаю Angular с:

ng serve

My proxy.conf.json

{
  "/api": {
    "target": "https://my-app.herokuapp.com",
    "secure": true,
    "changeOrigin": true
  }
}

Я создал server.js, как описано в этой статье чтобы я мог развернуться на Heroku.

// server.js
const express = require('express');
const app = express();
const path = require('path');

// If an incoming request uses
// a protocol other than HTTPS,
// redirect that request to the
// same url but with HTTPS
const forceSSL = function () {
    return function (req, res, next) {
        if (req.headers['x-forwarded-proto'] !== 'https') {
            return res.redirect(
                ['https://', req.get('Host'), req.url].join('')
            );
        }
        next();
    }
}
// Instruct the app
// to use the forceSSL
// middleware
app.use(forceSSL());

// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 4200);

Я также настроил постустановочную сборку в моих package.json скриптах:

{
  "name": "catalog-manager-client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.2.1",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.5",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.2.1",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@swimlane/ngx-charts": "^8.0.2",
    "@swimlane/ngx-datatable": "^13.0.1",
    "core-js": "^2.5.4",
    "express": "^4.16.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "ngx-perfect-scrollbar": "^6.2.0",
    "ngx-quill": "^3.2.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.1",
    "rxjs-tslint": "^0.1.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  },
  "engines": {
    "node": "9.11.2",
    "npm": "6.5.0"
  }
}

Я новичок в Angular, поэтому я могделать фундаментальную ошибку, но как мне изменить server.js, чтобы использовать настройки proxy.conf.json?

Answer 1

Объяснение относится к Да, вы делаете фундаментальную ошибку , но я видел достаточно похожих вопросов, и я подумал, что объяснение может просто помочь следующему разработчику.

Angular CLI работает на полном http-сервере.Пользовательский интерфейс Angular полностью скомпилирован, а интерфейс командной строки передает его в виде статического содержимого из каталога /dist.

Настройки proxy.conf.json предназначены для Сервера, управляемого Angular CLI .не имеет ничего общего с вашим скомпилированным кодом.

Когда вы переходите из локальной среды в нечто вроде Heroku, вам нужен сервер, чтобы заменить Angular CLI.Вот тут-то и подойдут все примеры node.js и express. Простого файла server.js, по которому они вас проведут, достаточно для настройки базового статического сервера контента.И это нормально, потому что ваш Angular-код является статическим контентом!

Но если вам нужна маршрутизация на динамический внутренний сервер через proxy.conf.json, ваш простой статический сервер ничего об этом не знает.

В моем случае мой внутренний сервер работает на Koa, поэтому я добавил статическую маршрутизацию в код Angular.

const router = require('koa-router')();
const body = require('koa-body')({ text: false });
const send = require('koa-send');
const fs = require('fs');

/**
 * Code about server routes ommited
 */

async function main(ctx, next) {
    //All dynamic routes start with "/api"
    if (/\/api\//.test(ctx.path)) {
        try {
            await next();
        }
        catch (error) {
            if (error instanceof ApplicationError) {
                logger.error(error, { data: error.data, stack: error.stack });
                ctx.status = error.code;
            } else {
                ctx.status = 500;
                logger.error(error.message, { stack: error.stack });
            }
        }
        return;
    } else {
        //Not a dynamic route, serve static content
        if ((ctx.path != "/") && (fs.existsSync('dist' + ctx.path))) {
            await send(ctx, 'dist' + ctx.path);
        } else {
            await send(ctx, 'dist/index.html');
        }
    }
}

module.exports = app => {
    app.use(main);
    app.use(router.routes());
};

NOTE - это не производительностьрешение для любой высокой нагрузки, но если у вас очень маленький проект, который не оправдывает затрат ресурсов на настройку чего-то более масштабируемого, это будет работать до тех пор, пока вы не увеличитесь.