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，而是给我分配了另一个。 / p>

话虽这么说...我该如何调整才能读取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

在Heroku上部署Web服务器时，您绑定到$PORT Heroku告诉您进行绑定。

当您访问已部署的应用程序时，您未指定端口。您只需连接到yourappname.heroku.com。 DNS自动将其转换为ipaddress:port。

因此在前端，您只需指向yourappname.heroku.com而不是ipaddress:port。

Answer 2

你们向我指出了正确的方向，但要准确地说：

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

我只需要确保在部署yourappname.herokuapp.com后使用指向指向Heroku为我的应用程序提供给我的URL，方法是在我的environments.prod.ts中执行以下操作（这是Heroku所使用的URL）会寻找）

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')
  }
}

无法在Heroku前端中部署Angular / Express应用程序无法访问API端点

2 个答案: