Проблема с развертыванием приложения Angular / Express в интерфейсе Heroku не может достичь конечной точки API

Question

В настоящее время в разработке это работает просто отлично ... localhost:4200 для внешнего интерфейса и localhost:8080 для внутреннего интерфейса

Однако, я просто развернул его, и внешний интерфейс получился, но я не получаю данные из API, потому что в моем app.service.ts я делаю следующее:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://localhost:8080/api'

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(`${this.apiUrl}/countries`)
  }
}

Как видите, я жестко кодирую localhost:8080, и он отлично работает в развития, но когда дело доходит до производства, Heroku не назначает мне port 8080, он назначает мне еще один.

Как говорится ... Как я могу настроить это, чтобы прочитать порт, который Heroku дает мне ?

Это мое приложение. js file

const express = require('express');
const app = express();
const scrapper = require('./backend/scrapper')

// Create link to Angular build directory
var distDir = __dirname + "/dist/covid19";
app.use(express.static(distDir));

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    res.setHeader(
        "Access-Control-Allow-Methods",
        "GET, POST, PATCH, PUT, DELETE, OPTIONS"
    );
    next();
});

app.use("/api/countries", async (req, res, next) => {
    const data = await scrapper.getCountries()
    res.status(200).json(data)
})

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`API listening on port ${port}...`);
});

module.exports = app;

Как видите, я объявляю мой порт process.env.PORT || 8080, но это для бэкэнда ... Как этого добиться, кроме моего вызова API в файле service.ts?

Answer 1

Когда вы развертываете веб-сервер в Heroku, вы привязываетесь к $PORT, который Heroku сообщает вам, чтобы связываться с.

При посещении развернутого приложения вы не указываете порт. Вы просто подключаетесь к yourappname.heroku.com. DNS автоматически переводит его в ipaddress:port.

Итак, на вашем фронте вы просто указываете на yourappname.heroku.com вместо ipaddress:port.

Answer 2

Вы, ребята, указали мне правильное направление, но если быть точным:

Я заметил, что в Angular вы получаете папку environments с двумя файлами 1. environment.ts и environment.prod.ts.

Мне просто нужно было убедиться, что я указал URL-адрес, который Heroku дал мне для моего приложения после развертывания yourappname.herokuapp.com, выполнив в моем environments.prod.ts следующее (именно этот Heroku собирается использовать. ищите)

export const environment = {
  production: true,
  apiUrl: "https://yourappname.herokuapp.com/api"
};

И в моем api.service.ts я получил следующий код:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment'

const API_URL = environment.apiUrl;

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(API_URL + '/countries')
  }
}