angular - 从本地或从 Heroku/部署的服务器获取

问题描述

我在本地处理我的应用程序，但在完成某些任务后，我将其部署在 netlify 上以检查它的运行情况。我想根据我为应用程序提供服务的位置（本地/netlify）切换我的获取请求

这是我的 auth.service.ts，我应该实现哪个逻辑？

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

const baseUrl = 'http://localhost:3001'
const deployedUrl = 'https://my-deployed-server.herokuapp.com'

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

  constructor(private http: HttpClient) { }

  login(user:any){
    return this.http.post(`${baseUrl}/login`, user, {observe: "body", responseType:"json"})
  }

  signup(user:any){
    return this.http.post(`${baseUrl}/signup`, user, {observe: "body", responseType:"json"})
  }
}

感谢您的帮助

标签： angulardeployment

您应该创建不同的.env文件。在您的项目中，您应该enviorment在该文件夹中命名文件夹，您应该至少有两个文件：environment.ts和environment.prod.ts（您可以添加任意数量的环境文件）。在这些文件中，您可以声明不同的变量。因此，在您的情况下，您必须再创建一个env文件（我假设 heroku 版本将是您的生产环境）。

// 文件 environment.prod.ts

export const environment = {
  production: true,
  api: 'https://my-deployed-server.herokuapp.com'
};

// 文件 environment.dev.ts

export const environment = {
  production: true,
  api: 'localhost:{your-port here}'
};

之后在您的服务中，您将使用 env 文件

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

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

  constructor(private http: HttpClient) { }

  login(user:any){
    return this.http.post(`${enviorment.apiUrl}/login`, user, {observe: "body", responseType:"json"})
  }

  signup(user:any){
    return this.http.post(`${enviorment.apiUrl}/signup`, user, {observe: "body", responseType:"json"})
  }
}

这里重要的是您应该从基本文件（不是 .prod 、 .dev 路径）中导入environment变量。environment根据您的构建配置，基本环境文件将被其他一些环境文件覆盖。因此，如果您为生产构建/服务您的应用程序，apiUrl则将指向远程服务器，如果您为开发人员构建/服务，apiUrl则将是localhost

您可以在此处了解有关文件替换和构建配置的更多信息

angular - 从本地或从 Heroku/部署的服务器获取

问题描述

解决方案

推荐阅读