कॉन्फ़िगर कोणीय 2 Webpack अनुप्रयोग डोकर में कंटेनर पर्यावरण विशिष्ट

Question

हम अलग-अलग वातावरण में डोकर छवियों का उपयोग कर हमारे कोणीय 2 एप्लिकेशन को तैनात करना चाहते हैं (मचान/परीक्षण, उत्पादन, ...)

जब स्थानीय स्तर पर हम विकासशील http://localhost:8080 के माध्यम से बैकएंड REST API से कनेक्ट हो रहे लेकिन जब हम अलग अलग वातावरण में तैनात हम ही डोकर छवि का उपयोग करें और एक अलग REST API का अंत बिंदु से कनेक्ट करना चाहते।

क्या होगा को प्राथमिकता दी रास्ता क्रम पर डोकर कंटेनर में इंजेक्षन इस विन्यास?

क्या पर्यावरण चर के माध्यम से ऐसा करने का कोई तरीका है?

हम एक सादा पाठ फ़ाइल तरह

{ 
    "BASE_URL": "https://api.test.example.com" 
} 

Answer 1

इस पोस्ट में और ट्विटर पर कुछ चर्चा करने के बाद ऐसा लगता है कि वेबपैक के माध्यम से मैं जो हासिल करना चाहता हूं उसे हासिल करने का कोई आसान तरीका नहीं है। फ़ाइलों को केवल रनटाइम पर स्थिर फाइलों के रूप में कार्य किया जाता है और बिल्ड समय पर फ़ाइल को बाहर करना संभव नहीं है और इसे रनटाइम पर शामिल करना संभव नहीं है।

इसलिए मैंने दिमाग में समाधान/समाधान के साथ जाने का फैसला किया: डॉकर कंटेनर शुरू करते समय स्थिर फ़ाइलों को बदलना।

मैं

npm run build:prod 
docker build -t angularapp . 

कर मैं अपने आधार छवि के रूप में आधिकारिक nginx डोकर छवि का उपयोग कर रहा द्वारा अपने डोकर छवि बनाने और Dockerfile लगता है कि

FROM nginx:1.11.1 

COPY dist /usr/share/nginx/html 
COPY run.sh /run.sh 

CMD ["bash", "/run.sh"] 

run.sh config को संशोधित करने के लिए किया जाता है sed के माध्यम से फाइल और बाद में nginx शुरू करने के लिए:

#!/bin/sh 

/bin/sed -i "s|http://localhost:8080|${BASE_URL}|" /usr/share/nginx/html/api.config.chunk.js 

nginx -g 'daemon off;' 

(सरलीकृत)

इससे मुझे अपने docker-compose.yml फ़ाइल में पर्यावरण variabel के माध्यम से BASE_URL कॉन्फ़िगर कर सकते हैं:

version: '2' 

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

इस समाधान/वैकल्पिक हल मैं एक विशेष संस्करण के लिए मेरे जेनकींस काम के द्वारा बनाई गई डोकर छवि तैनात कर सकते हैं के साथ

में तैनात सब मेरी डॉकर कंटेनर शुरू करते समय पर्यावरण चर के माध्यम से उपयोग किए गए आरईएसटी एपीआई एंडपॉइंट को कॉन्फ़िगर करके वातावरण (विकास, स्टेजिंग, उत्पादन)।

Answer 2

यहाँ अंतिम समाधान कुछ युक्त के माध्यम से यह कर सकता पूरी तरह से अपने सीआई/सीडी toolchain की तरह दिखता है, लेकिन इस समाधान काफी में ढाला जा सकता है क्या पर निर्भरता है कुछ भी।

पहला चरण: https://github.com/motdotla/dotenv जैसे dependencies पर कुछ जोड़ें जो यह आपके कॉन्फ़िगरेशन मानों को संभालेगा। आपकी जरूरतों के आधार पर अन्य विकल्प & हैं, अपना खुद का रोल करना काफी आसान है।

दस्तावेज़ों के अनुसार, अपने ऐप में जितनी जल्दी हो सके कॉन्फ़िगर लोड करें (वैश्विक ऐप.मॉड्यूल.ट्स मेरी व्यक्तिगत पसंद है क्योंकि हम चाहते हैं कि यह वैश्विक रूप से उपलब्ध हो)।

बस - process.env.NODE_ENV के आधार पर आप प्रति स्टैक अलग-अलग कॉन्फ़िगरेशन लोड करने जा रहे हैं और डीएक्स को सरल बनाने के लिए, मैं हमेशा कॉन्फ़िगरेशन मान डिफ़ॉल्ट रूप से देता हूं इसलिए मेरे डेवलपर्स को फ़ाइल से परेशान नहीं होना पड़ता है।

TESTING, STAGING, PRODUCTION के लिए - उदाहरण के लिए, आप BASE_URL_STAGING & वातावरण चर का प्रयोग कर रहे है जो कुछ भी सीआई प्रदाता के लिए में BASE_URL_PRODUCTION सेट करना चाहते हैं।

अपने सीआई रन & के एक भाग के रूप में Git शाखा के आधार पर, एक .env फ़ाइल में अपने config मान लिख सकते हैं और फिर अपने Dockerfile में एक COPY जोड़ने || docker-compose.yml उस पर्यावरण फ़ाइल को खींचने के लिए जिसे आपने अभी अपने डॉकर बिल्ड के दौरान लिखा था।

अपनी मान्यताओं के बाद, जब आप अपनी नई डॉकर छवि को दबाते हैं, तो .env आपके परिनियोजन पैकेज का हिस्सा है जो आपको कभी भी पर्यावरण विशिष्ट अंतराल को लक्षित करता है।

Answer 3

मैं थोड़ा अलग लेता, लेकिन आपके sed -shellcript के समान तरीके से।

एक ज्ञात स्थान से कॉन्फ़िग फ़ाइल की सेवा करता है, उदा:

मैं "सादा पाठ कॉन्फ़िग फ़ाइल" है कि आप का उल्लेख करने के विचार, कैसे इस बारे में पसंद ./config? चूंकि आपका जेएस पहले से ही मौजूदा साइट से लोड हो चुका है, कम से कम वहां आपको एक सापेक्ष पथ पर भरोसा करने में सक्षम होना चाहिए।

चरण 1: डॉकर कंटेनर में शुरू होने वाली शेलस्क्रिप्ट पर्यावरण चर से कॉन्फ़िगर पैरामीटर को सादे टेक्स्ट फ़ाइल में लिखती है और इसे पैक किए गए कोणीय कोड के समान फ़ोल्डर में रखती है।

चरण 2:

$(function() { 
    $.get('./config') 
    .then(function(res) { 
     window.appConfig = res.data; 
     // your bootstrapping call 
     angular.bootstrap(....); 
    }); 
}); 

चरण 3:: मुख्य HTML फ़ाइल है कि एप्लिकेशन को लोड करता है में इस तरह की कुछ init कोड है आप अपने कोणीय एप्लिकेशन, उदा वैश्विक चर का उपयोग यदि आप OpaqueToken उपयोग कर रहे हैं:

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

const CONFIG_TOKEN = new OpaqueToken('config'); 

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

हाँ यह अभी भी एक सा hacky & अपने देव-env में नोड प्रॉक्सी है कि आप की सेवा एनजी-ऐप भी इस तरह के एक config endpoint बेनकाब करने के लिए है के लिए इस्तेमाल करते हैं। इसके अलावा इसे एक अतिरिक्त अनुरोध की आवश्यकता है, लेकिन स्थानीय स्तर पर डेटा को कैश करने के लिए इनिट-कोड को थोड़ा बढ़ाकर आसानी से बचाया जा सकता है (उदाहरण के लिए कि यह डेटा वास्तव में समय के साथ नहीं बदलेगा)।

लेकिन मुझे लगता है कि यह sed की तुलना में थोड़ा अधिक रखरखाव योग्य है, जिसमें से कुछ फाइलें हैं जिन्हें आप वास्तव में नहीं जानते हैं कि वे कैसे बाहर निकलते हैं।

मुझे बताएं कि आप क्या सोचते हैं!