Cum includeti URL-ul la servicii in build-ul de front-end in docker?

Am o mică dilemă, m-am gândit la câteva soluții, dar poate există ceva soluție elegantă deja făcută.

  1. Se dă un pipeline de build de frontend, se creează un folder de dist.
  2. Se copiază fișierele din dist într-un container de nginx în docker.
  3. Imaginea de docker se va folosi în docker compose sau intr-un un helm chart.

Problema: Cum ati seta url-ul la backend/gateway din imaginea de docker cu frontend-ul deja construit?

Ati construi cate o imagine pentru fiecare environment cu alt build de front-end?

Frontend-ul conține un url de backend, la build îi pot da build parameters dar după devine fișiere de JS și HTML.

M-am gândit la a seta un window.API_URL înainte de frontend-ul in sine in index.html si de a seta url-ul cu un replace în imaginea de nginx.

Eventual m-am gândit la pur și simplu un replace în toate fișierele din dist.

Pe net am găsit exemple de reverse proxy în nginx și neutilizarea unui URL în frontend. (Asta implica probleme complexe cu un gateway, headere care se pierd, domain service discovery în nginx/docker compose/helm. Trebuie să te aliniezi cu fiecare backend să fie în rețea și trebuie să te bagi in docker compose/helm charts ca și frontend dev.

Ca să fac mai multe build-uri trebuie mai multe job-uri în pipeline și o să fie multă logică. Ar implica din start o imagine diferită pentru local development și pentru dev environment.

Salut,

Cea mai buna solutie ar fi un build separat pentru fiecare env. La build, depinzand de environmentul pentru care il construiesti, generezi un fisier numit environment.ts care apoi intra in buildul de webpack (sau orice altceva folosesti), mai apoi ajungand in dist si de acolo in nginx.

In codul de js ramanand doar sa te referi la acest fisier de environment (care poate sa fie chiar si o clasa daca doresti) pentru orice variabila care tine de envul in care esti.

Nu uita sa taguiesti imaginea de Docker apoi ca sa o poti folosi usor in orice folosesti tu sa faci deploy (local sau staging sau prod).

3 Likes