0
votes

Provision pour changer l'adresse IP du serveur dans l'application Angular en production

J'ai créé une application Web Angular en utilisant Angular 8. L'application Web Angular se connecte à un serveur Java Jetty via les points de terminaison au format http: // adresse-ip-du-serveur: port / nom-du-point final . J'avais utilisé le fichier environment.ts pour spécifier l'adresse IP du serveur.

Maintenant, je dois fournir le serveur Java Jetty et la webapp Angular à un client (juste la webapp et le fichier .war, pas de code source à donner). Qui les installerait ensuite dans leur configuration privée. Ainsi, les adresses IP de production ne sont pas connues à l'avance.

Ainsi, comment puis-je autoriser la modification de l'adresse IP du serveur dans Angular Webapp en production?

angular angular8

1 commentaires

Vous ne devriez avoir l'adresse du serveur nulle part. Utilisez simplement des URL telles que /api/foo au lieu de http://ip:post/api/foo , et le noyau se connectera au serveur d'où il vient, quelle que soit son adresse IP ou son port. Bonus: il supportera également https de manière native.

4 Réponses :

1
votes

Vous pouvez modifier la configuration de votre environnement comme ceci:

<script>
var INJECTED_CONFIG = { apiEndpoint: 'http://0.0.0.0:port/endpoint-name', }
</script>

et lorsque vous servez une application, vous pouvez injecter la variable INJECTED_CONFIG dans votre index.html (côté serveur)

<!doctype html>
<html>
...
<body>
  ...
  <!-- Injections -->
</body>
</html>

votre serveur peut remplacer  par

import * as deepmerge from 'deepmerge';

export const environment: EnvConfig = deepmerge<EnvConfig>(
  {
    apiEndpoint: 'http://ip-address-of-server:port/endpoint-name',
    // other stuff
  },
  (typeof INJECTED_CONFIG === 'undefined' ? {} : INJECTED_CONFIG),
);

Côté serveur, vous pouvez lire la valeur d' apiEndpoint partir de l'environnement serveur.

Une telle application remplacera toutes les configurations d'environnement fournies par INJECTED_CONFIG , vous souhaiterez peut-être réduire la portée de ce que vous souhaitez activer pour le remplacement.

0 commentaires

0
votes

Si l'application serveur et l'application client sont toutes deux sur le même env. alors vous pouvez utiliser - this.window.location.hostname pour obtenir le nom d'hôte et créer le point de terminaison.

Si vous maintenez l'environnement env. fichiers, puis dans ce cas, vous devez fournir l'interface pour éditer cela ou vous demander manuellement de changer cela .. environnements / environment.prod.ts

1 commentaires

Merci pour la suggestion. La modification des fichiers env n'est pas une option, car je fournirais le contenu du dossier / dist au client.

1
votes

Une solution plus facile à maintenir serait Dockerize votre application. Vous fourniriez l'image du docker et votre client peut simplement lancer un conteneur sur le port qu'il souhaite.

Il vous suffit d'écrire les points finaux et tout serait servi chez localhost.

C'est un effort ponctuel pour créer une image docker, mais cela aidera à fournir les correctifs plus tard au lieu de fournir des fichiers de guerre. J'espère que cela t'aides.

0 commentaires

1
votes

Dans mon projet, nous avons travaillé sur quelque chose de similaire. Dans le fichier environment.ts, je fais référence à certaines variables que j'ai précédemment configurées dans un fichier de configuration. Vous pouvez probablement laisser le client configurer ce fichier avec les valeurs dont il a besoin, ou autre chose (dans mon cas, il sera écrasé lors de l'exécution dans mon image docker).

COMMENT?

Tout d'abord, vous devez déclarer un fichier de typages pour définir votre variable globale.

typings.d.ts

  <script src="./your/config/file/path/config.js"></script>

fichier environment.ts

    let ENV_CONFIG = {
        ENVIRONMENT: 'production',
        API_URL: 'http://ip-address-of-server:port',
        CLIENT: 'yourClientName'
    };

Fichier config.js:

    export const environment = {
       appVersion: require('../../package.json').version,
       env: ENV_CONFIG.ENVIRONMENT,
       apiUrl: ENV_CONFIG.API_URL,
       client: ENV_CONFIG.CLIENT
    };

Enfin, vous devez déclarer votre fichier dans index.html:

    declare var ENV_CONFIG: EnvConfig;

    interface EnvConfig {
        ENVIRONMENT: string;
        API_URL: string;
        CLIENT: string;
    }

Après cela, vous pouvez utiliser vos propriétés d'environnement comme toujours.

public API_URL = environment.apiUrl;

J'espère que cela aide!

3 commentaires

J'essaierais. Est-ce que le fichier config.js sera disponible pour modification après la création de l'application Angular pour prod?

Exactement! Mon problème était que j'avais besoin de configurer ces valeurs après avoir fait la construction angulaire et c'est la meilleure façon que j'ai trouvée pour le résoudre.

Désolé, j'ai oublié une partie fondamentale et c'est d'ajouter le fichier dans l'index. Je modifie le commentaire expliquant cela