javascript - 在 Heroku 前端部署 Angular/Express 应用程序时出现问题无法访问 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 不会为我分配 端口 8080 >，它给我分配了另一个。

话虽这么说...我该如何调整它才能读取 Heroku 给我的端口？

这是我的 app.js 文件

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，但这是针对后端的...如何在 service.ts 文件中的 API 调用中实现此目的？

Answer 1

你们为我指明了正确的方向，但准确地说:

我注意到，在 Angular 中，您会得到一个 environments 文件夹，其中包含两个文件 1. environment.ts 和 environment.prod.ts。

在部署 yourappname.herokuapp.com 后，我只需确保使用指向 Heroku 为我的应用程序提供的 URL，方法是在我的 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')
  }
}