我可以在本地运行 MEAN 应用程序，但无法部署它

Question

我正在尝试部署一个普通的应用程序，但我不知道如何部署。部署后，我的 API 没有连接到我的前端，但我可以在端口：3000 上本地运行应用程序，但是当我尝试在端口：8080 上运行它以尝试部署到 heroku 时，它不会运行。我试图部署到firebase，但它只是弹出前端，什么都不做。 这是我的 WWWW/Bin 文件：

enter code here
   #!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('api:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

var server = http.createServer(app);

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
};
onListening()
console.log("Node server running on port : 3000" );

enter code here

这里是。我对我的 api 的每个端点的调用。这是我的约会.services.ts 文件

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

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

  private BASE_URL = environment.API_URL;

  constructor(private http: HttpClient) { }

  getAppointments(): Observable<Appointment[]> {
    return this.http.get<Appointment[]>(`${this.BASE_URL}/appointments`);
  }

  createAppointment(appointmentDate: string, appointmentTime: string, name: string, email: string, phone: string): Observable<Appointment> {
    return this.http.post<Appointment>(`${this.BASE_URL}/appointments`, { appointmentDate,appointmentTime, name, email,phone});
  }

  cancelAppointment(id: string): Observable<any> {
    return this.http.delete(`${this.BASE_URL}/appointments/${id}`);
  }
}

这是我在 enviorment.ts/enviorment.prod.ts 文件中对 API_URL 的定义，我不知道该放什么。

export const environment = {
  production: true,
  API_URL: 'http://localhost:3000',

};

Answer 1

首先，您应该通过在 firebase 云功能上托管您的应用程序来使您的本地 api 托管在 https:// 上。 完成后，请测试它以与 localhost:3000/appointments 相同的响应类型返回相同的结果。 Firebase cloudfunction 是通过 https 协议进行通信的无服务器功能。导出的 url 将是 https://us-central1-..

并更新您的 Angular 前端以将 base_url 更改为在没有 /appointments 的情况下具有上述 api，以确保可以通过 https 实时托管访问它。 在您的管理员上创建此云功能

// cloudfunction
exports.appointments= functions.https.onRequest((req, res) => {
  
  return cors(req, res, () => {  //its good for you to install cors package on your cloud function side to avoid any cors error. npm install cors
    //your code here
    return res.status(200).send(result)
  });
});

// your angular frontend
export class AppointmentService {
 //your code
 private BASE_URL = "https://us-central1-.."   //your cloudfunction url without /appointments. this is root url of all your apis 

然后再次构建和部署。 至少我们应该看到由 cloudfunction 实现的对 https 端点的托管实时站点访问