Angular - Як чытаць інфармацыю аб навакольным асяроддзі падчас выканання CI / CD

Калі вы выкарыстоўваеце NGINX у якасці вэб-сервера і Kubernetes для разгортвання

Фота Ціма Гоу на Unsplash

Angular прадастаўляе параметры канфігурацыі падчас зборкі, а значыць, вам трэба вызначыць розныя файлы навакольнага асяроддзя для кожнай асяроддзя, а Angular прымае адпаведную канфігурацыю пры пабудове праекта, падаючы сцяг --configuration для зборкі. Вы можаце праверыць гэты артыкул пра чытанне інфармацыі аб навакольным асяроддзі падчас зборкі.

Але дванаццаціфактарная метадалогія і сённяшнія стратэгіі DevOps мяркуюць, што нам трэба пабудаваць адзін раз і працаваць усюды, а значыць, у вас будзе толькі адзін шанец прадаставіць файл канфігурацыі. Кутавых варыянтаў канфігурацыі недастаткова. Вам трэба падаць інфармацыю пра канфігурацыю ці абстаноўку падчас выканання. У гэтым пасце мы ўбачым, як мы можам дасягнуць гэтага і прачытаем параметры канфігурацыі або інфармацыю аб навакольным асяроддзі падчас выканання.

  • Прыклад праекта
  • Праблема, з якой мы сутыкаемся
  • Рашэнне
  • Рэалізацыя
  • Як адладзіць
  • Рэзюмэ
  • Выснова

Прыклад праекта

Вось прыклад праекта для дэманстрацыі. Вы можаце кланаваць і запусціць яго на сваёй машыне.

// клон праекта git clone https://github.com/bbachi/angular-envread-runtime.git
// Для лакальнага развіцця npm усталяваць npm start

Гэта просты кутні праект, які загружае файл канфігурацыі app.config.json з тэчкі / актывы.

Мы выкарыстоўваем APP_INITIALIZER для загрузкі гэтага файла app.config.json перад загрузкай і выкарыстання гэтых налад. Вось файлы app.module.ts і app.service.ts.

Пасля загрузкі налад вы зможаце прачытаць гэтыя параметры ў app.component.ts, як паказана ніжэй.

Зыходзячы з канфігурацыі, вы можаце ўбачыць колер загалоўка, загаловак і табліцу. Напрыклад, калі гэта асяроддзе распрацоўкі, колер загалоўка - чорны, а загаловак - гэта распрацоўка. Вы можаце ўбачыць падобны экран, як паказана ніжэй.

экран распрацоўкі

Калі вы змяніце backgroundColor і загаловак на чырвоны і выраб адпаведна. Вы можаце ўбачыць экран, як паказана ніжэй.

экран вытворчасці

Праблема, з якой мы сутыкаемся

Дванаццаціфакторная метадалогія кажа пра тое, што нам трэба пабудаваць адзін раз у любым месцы, але ў гэтым выпадку мы будуем для кожнай асяроддзя. Для прастаты мы разглядаем толькі дзве распрацоўкі асяроддзя і вытворчасць. Паколькі мы служым вуглавым дадаткам з NGINX, мы можам забяспечыць канфігурацыю толькі падчас зборкі, а не час выканання. Мы нават не можам забяспечыць зменныя ўмовы навакольнага асяроддзя пры вызваленні, паколькі браўзэр не чытае гэтых зменных умоў.

Праходжанне канфігурацыі падчас зборкі

Мы будуем для кожнай асяроддзя, таму што мы павінны былі перадаваць інфармацыю пра навакольнае асяроддзе падчас зборкі. Мы павінны знайсці спосаб, якім мы павінны перадаць гэтую інфармацыю падчас выканання. Калі мы перададзім падчас выканання ўсё, што трэба, каб сабраць адзін раз і запусціць у любым месцы, як мы бачым на прыведзенай ніжэй схеме.

Праходжанне канфігурацыі падчас выканання

Рашэнне

Давайце паглядзім, як мы можам вырашыць гэтую праблему. Адзін са спосабаў вырашыць гэта - прачытаць URL браўзэра з акном location.href і змясціць усю канфігурацыю ў прыкладанне і загрузіць адпаведную канфігурацыю на аснове пэўнай часткі URL, напрыклад, dev, prod і г.д.

Калі вы карыстаецеся Java або Nodejs з дадаткам Angular, мы можам атрымаць гэтую канфігурацыйную форму сервера перад загрузкай прыкладання прыкладаннем APP_INITIALIZER. Але як зрабіць гэта, калі ў якасці вэб-сервера мы выкарыстоўваем NGINX?

Мы можам выкарыстоўваць канфігурацыйную праграму Kubernetes для ўнясення канфігурацыі ў аб'ём Pods, які усталёўваецца ў тэчцы / usr / share / nginx / html / актывы, так што вуглавае прыкладанне атрымлівае яго перад загрузкай прыкладання пры дапамозе APP_INITIALIZER. Давайце разгледзім прыведзеную ніжэй схему, каб зразумець лепш.

Канфігурацыя чытання падчас выканання з дапамогай configmap

Рэалізацыя

Давайце рэалізаваць рашэнне з аб'ектам Kubernetes configMap. Аб'ект ConfigMap робіць вашыя кантэйнеры партатыўнымі, развязваючы ад іх канфігурацыю. Вось як гэта працуе.

Першае, што нам трэба зрабіць, гэта стварыць малюнак докера і адправіць яго ў DockerHub. Вось шматступеньчаты Dockerfile, які стварае вуглавы дадатак на першым этапе і бярэ гэтыя статычныя актывы і змяшчае яго ў каранёвую тэчку NGINX.

Гэта інструкцыі па стварэнні Docker-вобраза і націсканні на DockerHub. Вы сапраўды можаце ўбачыць яго на DockerHub на наступным малюнку. Гэта агульнадаступная выява, якую вы можаце наўпрост выцягнуць з рэестра.

// пабудаваць вобраз docker build -t bbachin1 / envdemo.
// Пералічыць выявы докер-выяваў
// Уваход у сістэму і націсніце яе на docker hcker docker, уваход docker push bbachin1 / envdemo
Докер-хаб

Зараз нам трэба стварыць аб'екты разгортвання, абслугоўвання і канфігурацыі. мы змяшчаем усе гэтыя аб'екты ў адзін файл, які называецца manifest.yml. Мы ствараем Configmap спачатку з неабходным config.json. Калі вы паглядзіце аб'ект разгортвання, Kubernetes выцягвае вышэйзгаданае малюнак bbachin1 / envdemo з Docker Hub і стварае 5 рэплік. Нарэшце, у нас ёсць аб'ект службы тыпу Nodeport, які падвяргаецца ўздзеянню знешняга свету.

Мы загрузілі канфігурацыйную праграму ў том, які ўсталяваны на шляху / usr / share / nginx / html / актывы / тэчкі. Мы ствараем усе гэтыя аб'екты ў распрацоўцы прасторы імёнаў.

Вось інструкцыі па стварэнні аб'ектаў і праверцы іх.

// стварыць аб'екты kubectl create -f manifest.yml
// Выдаліць аб'екты kubectl delete -f manifest.yml
// атрымаць разгортванне kubectl атрымаць разгортванне -n распрацоўку
// атрымаць паслугу kubectl атрымаць svc -n распрацоўку
// атрымаць струкі kubectl атрымаць po -n развіццё

Атрымайце адкрыты адрас Kubernetes з гэтай каманды kubectl cluster-info і атрымайце порт ад аб'екта службы kubectl, атрымаць svc -n распрацоўку і атрымаць доступ да прыкладання, якое працуе ў прасторы імёнаў распрацоўкі з гэтым адрасам http: // : / appui

сэрвісны порт і публічны адрас

У вышэйзгаданым выпадку вы можаце атрымаць доступ да прыкладання па адрасе http://192.168.64.6:31935/appui. Пераканайцеся, што вы перайшлі ад https да http. Звярніце ўвагу, што ўся канфігурацыя загружаецца з канфігурацыйнай карты, такой як загаловак backgroundColor, загаловак і г.д.

Запуск разгортвання на Minikube

Давайце створым вытворчае разгортванне з файла manifest-prod.yml і выканайце вышэйпералічаныя дзеянні, каб запусціць прыкладанне на вашым лакальным.

// стварыць аб'екты kubectl create -f manifest-prod.yml
// Выдаліць аб'екты kubectl delete -f manifest-prod.yml
// атрымаць разгортванне kubectl атрымаць разгортванне -n вытворчасці
// атрымаць паслугу kubectl атрымаць svc -n вытворчасці
// атрымаць струкі kubectl атрымаць па -n вытворчасці

Паслуга ў вытворчай прасторы імёнаў працуе на порце 31633.

паслуга працуе ў порце 31633Запуск разгортвання на Minikube

Як адладзіць

Вось некаторыя з варыянтаў адладкі, калі ў вас узніклі праблемы з рэалізацыяй гэтага рашэння.

Спачатку нам трэба праверыць, ці ствараецца канфігурацыйная карта ў правільным кірунку і ў правільнай прасторы імёнаў.

// праверце, ці створана канфігурацыйная праграма, ці кубектл не атрымаецца cm -n
// праверце дадзеныя ў канфігурацыйным kubectl апісаць cm -n распрацоўку

Пасля праверкі канфігурацыі. Затым вы можаце праверыць усталяваны том, загружаны з канфігурацыйнай картай.

// атрымаць адзін з pod kubectl атрымаць po -n распрацоўку
// Выканаць у адным з струкоў kubectl exec -it / bin / sh -n распрацоўка # cd / usr / share / nginx / html / envapp / актывы # cat app.config.json
app.config.json

Рэзюмэ

  • Angular забяспечвае параметры канфігурацыі падчас зборкі, а значыць, вам трэба вызначыць розныя файлы навакольнага асяроддзя для кожнай асяроддзя.
  • Мы павінны пабудаваць, як толькі запусціць паўсюль, гэта рэкамендаваная стратэгія.
  • Мы не можам выкарыстаць параметр Angular Environment, калі мы хочам пабудаваць адзін раз і разгарнуць усюды, бо мы павінны забяспечыць асобную канфігурацыю для кожнай асяроддзя.
  • Configmap забяспечвае рашэнне адлучыць канфігурацыю ад запушчаных кантэйнераў.
  • Калі вы абслугоўваеце вуглавае прыкладанне з NGINX і вам патрэбны спосаб прайсці канфігурацыю падчас выканання, то ConfigMaps - самае простае рашэнне.
  • Вы павінны загрузіць канфігурацыйную карту ў аб'ём, які можа быць усталяваны на шляху хоста, а вуглавы атрымае JSON з гэтага шляху.
  • Вы можаце выдаліць існуючую канфігурацыйную карту і аднавіць адзін, і змены могуць быць адлюстраваны ў запушчаным кантэйнеры без перазагрузкі струкоў.

Выснова

Карыстайцеся канфігурацыямі, калі хочаце развязаць канфігурацыю з кантэйнераў і ўвядзіце адпаведную канфігурацыю падчас выканання.