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

Question

I am trying to deploy a mean app, but I cannot figure out how. My API isn't connecting to my frontend once I deploy, but I can run the application locally on port:3000, but when I try to run it on port:8080 to try and deploy to heroku it doesn't run. I have tried to deploy to firebase, but it just pops up the front-end, and does nothing. Here is my WWWW/Bin file:

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

Here is. my calls to each endpoint of my api. This is my appointment.services.ts file

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}`);
  }
}

Here is my definition of my API_URL inside my enviorment.ts/enviorment.prod.ts files, im not sure what to put inside of this.

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

};

Answer 1

First you should make your local api to be hosted on https:// by hosting your app on firebase cloud function. Once you make it then please test it returns same result in same response type as your localhost:3000/appointments. Firebase cloudfunction is serverless function which communicates via https protocol. The exported url will be https://us-central1-..

And update your angular frontend to change base_url to have above api without /appointments to ensure it can be accessed via https live hosting. Make this cloudfunction on your admin

// 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 

Then build and deploy again. Atleast we should see the hosted live site access to https endpoint which were made by cloudfunction