10
votes

Configurer l'application Angular 2 Webpack dans l'environnement du conteneur Docker

Nous voulons déployer notre application angulaire 2 en utilisant docker images dans différents environnements (mise en scène / test, production, ...)

lorsque nous développons localement nous sommes Connexion à l'API de repos Backend via http: // localhost: 8080 Mais lorsque nous déployons dans les différents environnements, nous voulons utiliser le MÊME DOCKER Image et connectez-vous à un point d'extrémité d'API de repos différent différent .

Quel serait le moyen préféré de injecter cette < Strong> Configuration dans le conteneur Docker à l'exécution ?

est là un moyen de faire cela via Variables d'environnement ?

Pouvons-nous faire cela via un fichier texte clair contenant quelque chose comme xxx


8 commentaires

utilisez-vous une CLI angulaire ou une construction personnalisée?


Nous avons créé le projet basé sur Github.com/angularClass/angular2-WebPack-Starter


Désolé, je ne suis pas compétent sur la façon dont cela fonctionne avec le répétition de Starter Werbpack. Angular-CLI que nous utilisons a l'option que vous décrivez (environnements).


Aussi loin que je connais avec Angular-CLI, ces environnements sont utilisés au moment de la construction et non au moment de l'exécution, ce que nous recherchons est un moyen de configurer l'application au moment de l'exécution.


Vous avez raison. Mais avec votre solution Docker, vous ne construiriez-vous pas votre application à l'intérieur de Docker avant de l'exécuter de toute façon?


Je le constraînerais une fois à l'intérieur de Docker, puis déployez l'image créée dans plusieurs endroits différents. Il doit y avoir un moyen de configurer une application angulaire 2 à l'exécution!


Ok, tu as eu. Désolé je ne suis pas d'aide alors.


Cela peut faire ce que vous voulez: Stackoverflow.com/Questtions/43234536/...


3 Réponses :


3
votes

La solution finale ici est une dépendance totalement sur ce que votre boîte à outils CI / CD ressemble, mais cette solution peut être moulée dans n'importe quoi.

première étape: ajoutez quelque chose comme https://github.com/motdotla/dotenv à votre Dépendances Ceci permettra de gérer vos valeurs de configuration. Il y a d'autres optiions et en fonction de vos besoins, le rouleau est suffisamment facile.

par la documentation, chargez la configuration le plus tôt possible dans votre application (Global app.Module.ts est mon choix personnel car nous voulons que cela soit disponible dans le monde).

simple - basé sur processus.env.node_env Vous allez charger différentes configs par pile et pour rendre le dx simple, je donne toujours des valeurs de configuration par défaut afin que mes développeurs ne doivent donc pas avoir à déranger avec le fichier.

pour test, mise en scalification, production - comme exemple, vous souhaitez définir base_url_stage & base_url_production dans les variables d'environnement pour n'importe quel fournisseur de CI vous utilisez.

Dans le cadre de votre course CI et basé sur la branche GIT, écrivez vos valeurs de configuration dans un fichier .env , puis ajoutez un copier dans votre dockerfile || docker-compose.yml pour tirer dans le fichier d'environnement que vous venez d'écrire lors de votre construction de Docker.

Après vos validations, lorsque vous appuyez sur votre nouvelle image Docker, le .env fait partie de votre package de déploiement ciblant quels points de terminaison spécifiques dans l'environnement dont vous avez besoin.


3 commentaires

Cela ne conduit pas à ce que je veux: je veux une image Docker d'une version spécifique que je peux déployer dans plusieurs environnements avec différentes configurations :(


Le mécanisme de passage des variables env n'a pas vraiment d'importance. Quelque chose comme Dotenv & Son WebPack Plugin associé Il suffit de câbler des variables d'environnement externe à votre application. Vous pouvez tout aussi facilement passer quelque chose comme base_url_stage dans votre commande Docker Exécuter Docker Run -e -E ou dans votre docker-composition comme .. Environnement: - BASE_URL = $ {Base_url_from_environment} C'est un problème de deux parties. Dotenv traite les Vares externes dans votre application, définir ces Vars est spécifique à une boîte à outils


Je comprends, mais la partie importante est que je ne veux pas construire plusieurs images Docker pour différents environnements (mise en scène, production, ...). Je veux seulement exécuter NPM Run Build: prod une fois et un package créé des fichiers dans une image Docker



10
votes

Après avoir eu quelques discussions dans ce post et sur Twitter, on dirait qu'il n'y a pas de moyen facile d'atteindre ce que je veux via Webpack. Les fichiers ne sont servis que comme fichiers statiques au moment de l'exécution et il n'est pas possible d'exclure un fichier au moment de la construction et de l'inclure au moment de l'exécution.

J'ai donc décidé d'aller avec la solution / la solution de contournement que j'avais à l'esprit: Changer les fichiers statiques Lorsque vous démarrez le conteneur Docker. P>

i Créez mon image Docker en faisant P>

version: '2'

services:
  api:
    image: restapi
  frontend:
    image: angularapp
    environment:
      BASE_URL: https://api.test.example.com


1 commentaires

J'ai essayé toute la solution que vous avez produite ici mais que vous avez échoué, alors pouvez-vous partager votre code avec moi s'il vous plaît. Je devrais aussi faire la même chose.



1
votes

J'aurais pris un peu différent, mais d'une manière approche similaire à votre sed code> -shellscript.

Je aime l'idée du « fichier de configuration de texte brut » que vous avez mentionné, comment à ce sujet: p>

Servir le fichier de configuration à partir d'un emplacement connu, par exemple, ./ config code>? Étant donné que votre JS est déjà chargé à partir du site actuel, au moins là, vous devriez pouvoir compter sur un chemin relatif p>

Etape 1:. Le shellscript démarrage dans le conteneur docker écrit les paramètres de configuration de l'environnement variables au fichier texte brut et le place dans le même dossier que le code angulaire emballé p>

Étape 2:. dans le fichier HTML principal qui charge l'application il y a un code d'initialisation comme ceci: p> XXX pre>

Étape 3: Vous utilisez les variables globales dans votre application angulaire, par exemple si vous utilisez OpaqueToken: p>

import { OpaqueToken } from '@angular/core';

const CONFIG_TOKEN = new OpaqueToken('config');

export const THIRDPARTYLIBPROVIDERS = [
  { provide: CONFIG_TOKEN, useValue: window.appConfig }
];


0 commentaires