Erstellen und Bereitstellen von Angular-Anwendungen in verschiedenen Umgebungen mit Environment.ts (Angular)

Als Angular-Entwickler kommt die Bereitstellung Ihrer Anwendung in verschiedenen Umgebungen – Entwicklung (Dev), Benutzerakzeptanztests (UAT) und Produktion – häufig vor. Allerdings kann die ständige Änderung des Codes zur Anpassung an diese Umgebungsspezifika mühsam und fehleranfällig sein und die Effizienz beeinträchtigen.

Dieser Artikel beschreibt einen schrittweisen Ansatz zum Erstellen und Bereitstellen Ihrer Angular-Anwendung in verschiedenen Umgebungen, ohne die Codebasis zu ändern und dabei die leistungsstarke Funktionalität von Environment.ts zu nutzen.

Szenario:

Stellen Sie sich eine Angular-Anwendung vor, bei der das Frontend mit Backend-APIs interagiert, die in verschiedenen Umgebungen gehostet werden. Lassen Sie uns untersuchen, wie Sie neue Umgebungen erstellen, diese konfigurieren und Ihre Anwendung basierend auf der Zielumgebung bereitstellen/erstellen.

Umgebungen einrichten:

Umgebungsdateien generieren:

Führen Sie den folgenden Befehl in Ihrem Terminal aus:

Umgebungen generieren

Dadurch wird im src-Verzeichnis ein Ordner mit dem Namen „environments“ erstellt, der eine anfängliche Datei „environment.ts“ enthält. Standardmäßig dient diese Datei als Konfiguration Ihrer Entwicklungsumgebung.

Umgebungsvariablen definieren:

Öffnen Sie „environment.ts“ und definieren Sie Ihre Entwicklungsumgebungsvariablen:

export const environment = {
  production: false, //Set to False for development
  apiUrl: 'http://my-dev-url' //Replace with your development URL
};

Umgebungsspezifische Dateien erstellen:

Erstellen Sie für UAT- und Produktionsumgebungen separate Dateien:

environment.test.ts (für UAT)
Environment.prod.ts (für Produktion)

Fügen Sie diesen Dateien Ihre jeweiligen UAT- und Produktions-API-URLs hinzu:

// environment.test.ts (UAT)
export const environment = {
  production: false,
  apiUrl: 'http://my-uat-url'
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

Umgebungen im Code nutzen:

So verwenden Sie die API-URL in Ihrem Code:

Environment.ts importieren:

import { Environment } from './environments/environment';

Zugriff auf die API-URL:

In Ihren Dienst oder Ihre Komponente fügen Sie die Umgebungsvariable ein:

export class MyService {
  constructor() {}
  apiUrl = environment.apiUrl;
}

Angular.json für umgebungsspezifische Builds konfigurieren:

Zielkonfigurationen:

Öffnen Sie angle.json und suchen Sie den Abschnitt „Konfigurationen“ unter „Build“. Dies definiert Build-Konfigurationen für verschiedene Umgebungen.

"configurations": {
  "production": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },

"staging": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  },
  // ... other configurations
},

"defaultConfiguration": "production"

Dadurch wird die Angular-CLI angewiesen, die Standardumgebung „environment.ts“ bei Produktions-Builds durch „environment.prod.ts“ und bei UAT-Builds durch „environment.test.ts“ zu ersetzen.

Um die Anwendungen in mehreren Umgebungen bereitzustellen, können Sie Bereitstellungskonfigurationen in angle.json hinzufügen als:

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": { … },
    "configurations": {
      "development": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:development"
      },
      "staging": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:staging"
      },
      "production": {
        // Use the `production` configuration of the `build` target.
        "buildTarget": "my-app:build:production"
      }
    },
    "defaultConfiguration": "development"
  },

Bauen und Servieren für bestimmte Umgebungen:

Für die Produktion bauen:

Um Ihre Anwendung für die Produktion zu erstellen, verwenden Sie:

ng build --configuration=produktion

Verwenden Sie den Namen der in angle.json definierten Konfiguration (Produktion, Staging in unserem Szenario)

Für UAT dienen:

Um Ihren Antrag auf UAT zu bearbeiten, verwenden Sie:

ng Serve --configuration=staging

Abschluss

Die Verwendung umgebungsspezifischer Konfigurationen verbessert die Entwicklererfahrung erheblich. Es bietet einen sauberen und wartbaren Ansatz, der die Anwendungsbereitstellung in verschiedenen Umgebungen optimiert und letztendlich die mittlere Produktionszeit (MTTP) verkürzt.

Wenn Ihnen die Lektüre dieses Artikels gefallen hat, können Sie hier mehr über mich erfahren.

Das obige ist der detaillierte Inhalt vonErstellen und Bereitstellen von Angular-Anwendungen in verschiedenen Umgebungen mit Environment.ts (Angular). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!