Mamirioni epamberi-yekupedzisira maapplication ari kutonga nharaunda-yakatarwa kuvaka. Kune yega yega nharaunda - ingave budiriro, dhizaini, kana kugadzirwa - yakaparadzana kuvaka yepamberi app inofanirwa kugadzirwa, uye iyo yakakodzera nharaunda inosiyana inofanirwa kusetwa. Huwandu hwezvivakwa hunowanda kana akawanda maapplication akabatanidzwa, zvichiwedzera kuvhiringidzika. Iri rave riri dambudziko rakajairika kwenguva yakareba, asi pane nzira iri nani yekubata nharaunda dzakasiyana. Ini ndawana nzira yekukwenenzvera iyi maitiro, uye mune ino chinyorwa, ini ndinokutungamira nhanho-ne-nhanho kuti ugadzire nzira inoshanda iyo inoderedza nguva dzekuvaka uye kukubatsira iwe kuve nechokwadi chekuenderana munzvimbo dzese mumapurojekiti ako.   Kunzwisisa mamiriro akasiyana  Tisati tatanga, ndinofunga tinofanira kuita kudzokorora. Zvishandiso zveWebhu zvinogara zvichitsamira pane zvinosiyana zvinozivikanwa se   ", izvo zvinowanzo sanganisira mukati mehurongwa hwekupedzisira, masisitimu ekubatanidza, makiyi ehurongwa hwekubhadhara, nhamba dzekuburitsa, zvichingodaro. Nomuzvarirwo, kukosha kweizvi zvinosiyana zvinosiyana zvichienderana nenharaunda iyo application inoiswa. "evironment variables  Semuenzaniso, fungidzira chikumbiro chinopindirana negedhi rekubhadhara. Munzvimbo yekusimudzira, iyo yekubhadhara gedhi URL inogona kunongedza kubhokisi rejecha rekuyedza (https://sandbox.paymentgateway.com), iri munzvimbo yekugadzira, inonongedza kune yehupenyu sevhisi (https://live.paymentgateway.com ) Saizvozvo, makiyi eAPI akasiyana kana chero imwe nharaunda yakatarwa kusetwa inoshandiswa kune yega yega nharaunda kuve nechokwadi chekuchengetedza data uye kudzivirira kusanganisa nharaunda.   Matambudziko ari pamberi pekuvandudzwa  Paunenge uchivaka   , iyi haisi nyaya. Kuzivisa izvi zvakasiyana-siyana mukodhi yekushandisa zvakakwana sezvo hutsika hwezvinhu izvi zvakachengetwa munzvimbo yevhavha iyo iyo backend inoshandiswa. Nenzira iyi, iyo backend application inovawana pakutanga. backend application  Nekudaro, ne   zvinhu zvinowedzera kuoma. Sezvo ivo vachimhanyisa mubrowser yemushandisi, ivo havana mukana weiyo chaiyo nharaunda inosiyana kukosha. Kugadzirisa izvi, kukosha kweaya akasiyana anowanzo "kubikwa mukati" kumberi kwekushandisa panguva yekuvaka. Nenzira iyi, kana iyo application ichimhanya mubrowser yemushandisi, ese anodiwa maitiro akatoiswa mukati meiyo yekumberi application. frontend applications  Iyi nzira, sevamwe vazhinji, inouya necaveat: iwe unofanirwa kugadzira yakaparadzana yekuvaka imwechete yekumberi application kune yega yega nharaunda kuitira kuti imwe neimwe kuvaka ive neyayo hunhu.    , ngatiti tine nharaunda nhatu: Semuenzaniso  kuvandudzwa kwekuedzwa kwemukati;  danho rekuedzwa kwekubatanidza;  uye kugadzirwa kwevatengi.  Kuti uendese basa rako kuti riyedzerwe, iwe unovaka iyo app uye woiendesa kunzvimbo yekusimudzira. Mushure mekuyedzwa kwemukati kwapera, iwe unofanirwa kuvaka iyo app zvakare kuti uiise pachikuva, uye wozoivaka zvakare kuti iendeswe kukugadzira. Kana iyo purojekiti iine anopfuura kumberi-yekupedzisira application, nhamba yekuvaka kwakadaro inowedzera zvakanyanya. Uyezve, pakati pezvivakwa izvi, iyo codebase haisi kuchinja - yechipiri neyechitatu inovaka yakavakirwa pane imwechete sosi kodhi.  Zvese izvi zvinoita kuti nzira yekuburitsa iwande, inonoke, uye inodhura, pamwe nekuunza njodzi yehutano. Pamwe chivakwa chakayedzwa zvakanaka munzvimbo yekusimudzira, asi nhanho yekuvaka inyowani, zvichireva kuti pane mukana mutsva wekukanganisa.    Une maapplication maviri ane nguva dzekuvaka dzeX uye Y masekonzi. Kune idzo nharaunda nhatu, ese maapplication aizotora   munguva yekuvaka. Nekudaro, kana iwe ukagona kuvaka yega yega app kamwe chete uye kushandisa iyo yakafanana kuvaka munzvimbo dzese, iyo yakazara nguva yaizoderedzwa kusvika   masekonzi chete, ichicheka nguva yekuvaka katatu. Muenzaniso: 3X + 3Y X + Y  Izvi zvinogona kuita mutsauko mukuru mumapaipi ekumberi, uko zviwanikwa zvishoma uye nguva dzekuvaka dzinogona kubva pamaminetsi mashoma kusvika kweawa. Nyaya iripo munenge mune yese frontend application pasi rose, uye kazhinji hapana nzira yekuigadzirisa. Asi, iri idambudziko rakakura, kunyanya kubva pakuona kwebhizinesi.  Hazvingave zvakanaka here kana pachinzvimbo chekugadzira matatu akapatsanurwa anovaka, iwe unogona kungogadzira imwe uye woitumira munzvimbo dzese? Zvakanaka, ndawana nzira yekuita nayo chaizvo.   Kukwenenzvera kumberi kwekutumira. Bhuku rekushandisa   Kugadzira mamiriro ekunze  Kutanga, iwe unofanirwa kugadzira faira mune yako yepamberi purojekiti repository uko inodiwa nharaunda inosiyana ichanyorwa. Izvi zvichashandiswa nemugadziri munharaunda. Kazhinji, faira iyi inodaidzwa kunzi   , iyo yakawanda yemazuva ano emberi mafaera anogona kuverenga. Heino muenzaniso wefaira rakadaro: .env.local   CLIENT_ID='frontend-development' API_URL=/api/v1' PUBLIC_URL='/' COMMIT_SHA=''  Ongorora: masisitimu akasiyana anoda akasiyana mazita makongiresi ezvakasiyana nharaunda. Semuyenzaniso, muReact, unofanira kufanogadzirira   kumazita akasiyana. Iri faira haridi kuti ribatanidze mavhezheni anobata application zvakananga; inogona zvakare kuve nerubatsiro rwekugadzirisa ruzivo. Ini ndakawedzera iyo   shanduko, yatichazodhonza kubva pabasa rekuvaka kuti titevere kuzvipira uku kwakavakirwa. REACT_APP_ COMMIT_SHA  Zvadaro, gadzira faira inonzi   , kwaunogona kutsanangura kuti ndeapi mabhii emamiriro ezvinhu aunoda. Iyo yekumberi framework ichakuisira izvi. For React, semuenzaniso, iwo akachengetwa mu   chinhu: environment.js process.env   const ORIGIN_ENVIRONMENTS = window.ORIGIN_ENVIRONMENTS = { CLIENT_ID: process.env.CLIENT_ID, API_URL: process.env.API_URL, PUBLIC_URL: process.env.PUBLIC_URL, COMMIT_SHA: process.env.COMMIT_SHA }; export const ENVIRONMENT = { clientId: ORIGIN_ENVIRONMENTS.CLIENT_ID, apiUrl: ORIGIN_ENVIRONMENTS.API_URL, publicUrl: ORIGIN_ENVIRONMENTS.PUBLIC_URL ?? "/", commitSha: ORIGIN_ENVIRONMENTS.COMMIT_SHA, };  Pano, unotora zvese zvakatanga kukosha zvezvakasiyana   chinhu, chinokutendera kuti uzvione mubrowser's console. Uyezve, iwe unofanirwa kuakopa mune   chinhu, kwaunogona zvakare kuseta zvimwe zvisizvo, semuenzaniso: isu tinofungidzira   ndeye / nekukasira. Shandisa   chinhu pese panodiwa mavhezheni aya mukushandisa. window.ORIGIN_ENVIRONMENTS ENVIRONMENT publicUrl ENVIRONMENT  Panguva ino, wazadzisa zvese zvinodiwa zvebudiriro yenzvimbo. Asi chinangwa ndechekubata nharaunda dzakasiyana.  Kuti uite izvi, gadzira   faira rine zvinotevera zvirimo: .env   CLIENT_ID='<client_id>' API_URL='<api_url>' PUBLIC_URL='<public_url>' COMMIT_SHA=$COMMIT_SHA  Mune faira iri, iwe uchada kudoma zvibatiso zvezvakasiyana zvinoenderana nenharaunda. Vanogona kuve chero chaunoda, chero bedzi vakasiyana uye vasingapindire neyako kodhi kodhi neimwe nzira. Kuti uwedzere kuvimbiswa, unogona kushandisa kunyange     UUIDs - Universal Unique Identifiers.  Kune izvo zvinosiyana izvo zvisingasanduke munzvimbo dzese (semuenzaniso, iyo hashi yekuzvipira), unogona kunyora iwo chaiwo maitiro zvakananga kana kushandisa hunhu huchave huripo panguva yekuvaka basa (senge   ). Iyo yekumberi sisitimu inotsiva aya anobatisa nzvimbo nemakoshero chaiwo panguva yekuvaka maitiro: $COMMIT_SHA  File   Iye zvino iwe unowana mukana wekuisa mune chaiwo hunhu pachinzvimbo chezvibatiso. Kuti uite izvi, gadzira faira,   (ndakasarudza Python, asi unogona kushandisa chero chishandiso kune ichi chinangwa), icho chinofanira kutanga chine mepu yezvibatiso kumazita akasiyana: inject.py   replacement_map = { "<client_id>": "CLIENT_ID", "<api_url>": "API_URL", "<public_url>": "PUBLIC_URL", "%3Cpublic_url%3E": "PUBLIC_URL" }  Ziva kuti   yakanyorwa kaviri, uye chechipiri chatiza mabhuraketi. Iwe unoda izvi kune ese akasiyana anoshandiswa muCSS uye HTML mafaera. public_url  Zvino ngatiwedzerei runyoro rwemafaira atinoda kugadzirisa (uyu ungave muenzaniso weNginx):   base_path = 'usr/share/nginx/html' target_files = [ f'{base_path}/static/js/main.*.js', f'{base_path}/static/js/chunk.*.js', f'{base_path}/static/css/main.*.css', f'{base_path}/static/css/chunk.*.css', f'{base_path}/index.html' ]  Zvadaro, isu tinogadzira iyo   faira, kwatinogashira mepu uye runyorwa rwekuvaka artifact mafaera (akadai seJS, HTML, uye CSS mafaera) uye kutsiva vanobata nzvimbo nehunhu hwezvakasiyana kubva kwatinogara. injector.py   import os import glob def inject_envs(filename, replacement_map): with open(filename) as r: lines = r.read() for key, value in replacement_map.items(): lines = lines.replace(key, os.environ.get(value) or '') with open(filename, "w") as w: w.write(lines) def inject(target_files, replacement_map, base_path): for target_file in target_files: for filename in glob.glob(target_file.glob): inject_envs(filename, replacement_map)  Uyezve, mune   faira, wedzera iyi mutsara (usakanganwa kuendesa kunze   ): inject.py injector.py   injector.inject(target_files, replacement_map, base_path)  Iye zvino tinofanira kuva nechokwadi chokuti   script inongoshanda panguva yekuendesa chete.Unogona kuiwedzera   mumutemo   mushure mekuisa Python uye kukopa zvose zvinyorwa: inject.py Dockerfile CMD   RUN apk add python3 COPY nginx/default.conf /etc/nginx/conf.d/default.conf COPY --from=build /app/ci /ci COPY --from=build /app/build /usr/share/nginx/html CMD ["/bin/sh", "-c", "python3 ./ci/inject.py && nginx -g 'daemon off;'"]That's it! This way, during each deployment, the pre-built files will be used, with variables specific to the deployment environment injected into them.  Ndizvo! Nenzira iyi, panguva yekutumirwa kwega kwega, mafaera ekutanga-akavakwa achashandiswa, aine akasiyana akanangana nenzvimbo yekutumirwa akaiswa mavari.  Faira:    Kubata filename hashing kune yakakodzera browser caching  Chinhu chimwe - kana zvivakwa zvako zvekuvaka zvinosanganisira hashi yemukati mumafaira avo, jekiseni iri harizokanganisa mazita emafaira uye izvi zvinogona kukonzera matambudziko nebrowser caching. Kuti ugadzirise izvi, mushure mekugadzirisa mafaera ane majekiseni akasiyana, unozofanirwa:  Gadzira hashi nyowani yemafaira akagadziridzwa.  Isa iyi hashi nyowani kumazita emafaira, saka bhurawuza inoatora semafaira matsva.  Gadziridza chero mareferensi kumazita ekare efaira mukodhi yako (senge zvirevo zvekutumira) kuti aenderane nemazita efaira matsva.  Kuti uite izvi, wedzera hashi raibhurari import (   ) uye anotevera mabasa kune   faira. import hashlib inject.py   def sha256sum(filename): h = hashlib.sha256() b = bytearray(128 * 1024) mv = memoryview(b) with open(filename, 'rb', buffering=0) as f: while n := f.readinto(mv): h.update(mv[:n]) return h.hexdigest() def replace_filename_imports(filename, new_filename, base_path): allowed_extensions = ('.html', '.js', '.css') for path, dirc, files in os.walk(base_path): for name in files: current_filename = os.path.join(path, name) if current_filename.endswith(allowed_extensions): with open(current_filename) as f: s = f.read() s = s.replace(filename, new_filename) with open(current_filename, "w") as f: f.write(s) def rename_file(fullfilename): dirname = os.path.dirname(fullfilename) filename, ext = os.path.splitext(os.path.basename(fullfilename)) digest = sha256sum(fullfilename) new_filename = f'{filename}.{digest[:8]}' new_fullfilename = f'{dirname}/{new_filename}{ext}' os.rename(fullfilename, new_fullfilename) return filename, new_filename  Asi, haasi mafaera ese anoda kupihwa zita. Semuyenzaniso, iyo   filename inofanirwa kuramba isina kuchinjika uye kuti uite izvi, gadzira   kirasi inochengeta mureza unoratidza kana kutumidza zita zvichidikanwa: index.html TargetFile   class TargetFile: def __init__(self, glob, should_be_renamed = True): self.glob = glob self.should_be_renamed = should_be_renamed  Iye zvino iwe unongofanirwa kutsiva hurongwa hwemafaira mu   nehurongwa   kirasi zvinhu: inject.py TargetFile   target_files = [ injector.TargetFile(f'{base_path}/static/js/main.*.js'), injector.TargetFile(f'{base_path}/static/js/chunk.*.js'), injector.TargetFile(f'{base_path}/static/css/main.*.css'), injector.TargetFile(f'{base_path}/static/css/chunk.*.css'), injector.TargetFile(f'{base_path}/index.html', False) ]  Uye gadziridza   basa   kuti ubatanidze kutumidza zita refaira kana mureza waiswa: inject injector.py   def inject(target_files, replacement_map, base_path): for target_file in target_files: for filename in glob.glob(target_file.glob): inject_envs(filename, replacement_map) if target_file.should_be_renamed: filename, new_filename = rename_file(filename) replace_filename_imports(filename, new_filename, base_path)  Nekuda kweizvozvo, iyo artifact mafaera achatevera iyi yekupa zita:   .   .   . <origin-file-name> <injection-hash> <extension>  Zita refaira risati rabaya jekiseni:   Zita refaira mushure mejekiseni:  Mamiriro ezvinhu akafanana anoburitsa zita rimwechete refaira, zvichibvumira bhurawuza yemushandisi kuti ichengetedze faira nemazvo. Ikozvino kune vimbiso yekuti iwo chaiwo hunhu hwemhando idzi huchachengetwa mubrowser cache, semhedzisiro - kuita zvirinani kumutengi.  Mhinduro yekufambiswa kwemaitiro akakwenenzverwa  Maitiro echinyakare ekugadzira akasiyana anovaka ega ega nharaunda akatungamira kune mashoma akakosha kusashanda, izvo zvinogona kuve nyaya kuzvikwata zvine zviwanikwa zvishoma.  Iwe zvino une purani yemaitiro ekuburitsa anogona kugadzirisa nguva refu yekutumirwa, yakawandisa kuvaka, uye yakawedzera njodzi mukusimbisa kwemhando yezvikumbiro zvemberi - zvese. Zvese panguva yekuunza nhanho nyowani yeyakavimbiswa kuenderana munzvimbo dzese.  Panzvimbo pekuda N kuvaka, iwe unongoda imwe chete. Pakuburitswa kuri kuuya, unogona kungoendesa chivakwa chakange chaedzwa kare, icho chinobatsirawo kugadzirisa zvingangoitika zvebug nekuti iyo yakafanana kuvaka ichashandiswa munzvimbo dzese. Uyezve, kumhanya kwekuita kwechinyorwa ichi kwakakurumidza zvisingaenzaniswi kupfuura kunyange yakanyanya kugadziridzwa kuvaka. Semuenzaniso, mabhenji emunharaunda paMacBook 14 PRO, M1, 32GB ndeaya anotevera:  Maitiro angu anorerutsa maitiro ekuburitsa, anochengetedza mashandiro ekushandisa nekubvumira nzira dzinoshanda dzecaching, uye inova nechokwadi chekuti mabug ane chekuita nekuvaka haapinde munzvimbo. Uyezve, iyo nguva yese uye simba rakamboshandiswa pamabasa anonetesa ekuvaka zvino anogona kutariswa mukugadzira yakatonyanya nani mushandisi ruzivo. Chii chisiri chekuda?  Isu tinoona kuti mabugs ane chekuita nekuvaka haatsvedze muapp kune dzimwe nharaunda. Panogona kunge paine phantom bugs inoratidzira nekuda kwekusakwana mumasisitimu ekuvaka. Mikana midiki, asi iripo.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Odhiyo iyi inogadzirwa mumutauro wekutanga wenyaya!

Kushanda neEnvironment Variables muFrontend Application Releases

About Author

MACOMMENTS

HONGA TAGS

NYAYA IYI YAKAPIWA MUNA

Related Stories

Forget Pepe and dogwifhat — Snek Is the Memecoin You've Been Waiting For

On the Position of Large Factories

Meet SNATIKA, Winner of HackerNoon's Startups of The Year 2024 in Training And Consulting

Snowdrop & Other Tales by Jacob Grimm and Wilhelm Grimm - Table of Links

Forget Pepe and dogwifhat — Snek Is the Memecoin You've Been Waiting For

On the Position of Large Factories

Meet SNATIKA, Winner of HackerNoon's Startups of The Year 2024 in Training And Consulting

Snowdrop & Other Tales by Jacob Grimm and Wilhelm Grimm - Table of Links

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps